ExtJS How to add a click event to Pie Chart pieces

6
votes

I have created a Pie chart using the Pie chart example in sencha ExtJS website , I wanted to add a click event to the each Pie slice so that i get handle to the contextual data on that slice. I was able to add a click listener to the Pie but not sure how to get the data on the slice.

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);
            }
        }

    }

});

});

Kindly help.

Regards, Lalit

2
extjs4

2 Answers

12
votes

Here is how you get data of the clicked slice. The series class supports listeners via the Observable syntax and they are:

  1. itemmouseup When the user interacts with a marker.
  2. itemmousedown When the user interacts with a marker.
  3. itemmousemove When the user iteracts with a marker.
  4. afterrender Will be triggered when the animation ends or when the series has been rendered completely.

I will make use of the itemmousedown event to capture the clicked slice. Here is my listener method:

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

Note that I have placed my listener inside the series and not the chart! Now, the obj variable holds lot of information. For each series, the property to get data will differ. So, you will have to carefully inspect the object using firebug or some other developer tool.

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

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

Here is the obj from firebug.. enter image description here

0
votes

I'm using a more selective approach, because I needed to add some custom logic in order to implement drag-and-drop for our charts. So after the chart definition 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);

Cheers! Frank