ExtJS How to add click event for chart fragments

Question

I created a pie chart using the example pie chart on the Sencha ExtJS website, I wanted to add a click event to each Pie fragment so that I could process the context data on that fragment. I was able to add a click listener to the pie, but I don’t know how to get the data on the fragment.

Below is the ExtJS code.

Ext.onReady(function(){ var store = Ext.create('Ext.data.JsonStore', { fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], data: [{ 'name': 'January', 'data1': 10 }, { 'name': 'February', 'data1': 7 }, { 'name': 'March', 'data1': 5 }, { 'name': 'April', 'data1': 2 }, { 'name': 'May', 'data1': 27 }] }); Ext.create('Ext.chart.Chart', { renderTo: Ext.getBody(), width: 800, height: 600, animate: true, store: store, theme: 'Base:gradients', legend: { // Pie Chart Legend Position position: 'right' }, series: [{ type: 'pie', field: 'data1', showInLegend: true, tips: { trackMouse: true, width: 140, height: 28, renderer: function(storeItem, item){ //calculate and display percentage on hover var total = 0; store.each(function(rec){ total += rec.get('data1'); }); this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%'); } }, highlight: { segment: { margin: 5 } }, label: { field: 'name', display: 'rotate', contrast: true, font: '18px Arial' }, listeners: {//This Doesnt Work :( itemclick: function(o){ alert('clicked at : ' + o); } } }], listeners: { //This Event handler works but I am not sure how to figure how which slice i have clicked .................................. click: { element: store, //bind to the underlying el property on the panel fn: function(o, a){ alert('clicked' + o + a + this); } } } }); }); 

Please help.

Regards, Lalita

Answer 1

This is how you get clicked fragment data. The series class supports listeners through the Observable syntax, and they:

• itemmouseup When a user interacts with a marker.
• itemmousedown When a user interacts with a marker.
• itemmousemove When a user searches using a marker.
• afterrender Will be launched when the animation ends or when the series is fully displayed.

I am using the itemmousedown event to capture a clicked fragment. Here is my listener method:

 series: [{ . . . listeners:{ itemmousedown : function(obj) { alert(obj.storeItem.data['name'] + ' &' + obj.storeItem.data['data1']); } } . }] 

Please note that I placed my listener inside the series, not the chart! Now the obj variable contains a lot of information. For each series, the property for receiving data will be different. Thus, you will have to carefully inspect the object using firebug or some other developer tool.

Now, in the case of Piecharts, you can get information about the slice using obj :

 obj.storeItem.data['your-series-variable-name'] 

Here is the obj from firebug ..

Answer 2

I use a more selective approach because I need to add some kind of user logic in order to implement drag-and-drop for our diagrams. So after defining the chart, I just add the following:

 // Add drag-and-drop listeners to the sprites var surface = chart.surface; var items = surface.items.items; for (var i = 0, ln = items.length; i < ln; i++) { var sprite = items[i]; if (sprite.type != "circle") { continue; } // only add listeners to circles // Additional funky checks for the draggable sprites sprite.on("mousedown", onSpriteMouseDown, sprite); // mouse down ONLY for sprites } surface.on("mousemove", onSurfaceMouseMove, surface); // mouse move for the entire surface surface.on("mouseup", onSurfaceMouseUp, surface); 

Hurrah! Franc