Ext JS and Sencha Touch Charts Drill-Down

The “trick” to implementing drill-down on Sencha Touch and Ext JS 4 charts is to use the completely undocumented itemmousedown event listener as illustrated on lines 20-24 below. Note that this technique is compatible with both Sencha Touch 2.0+ and Ext JS 4.0. Use console.log() in the itemmousedown handler to determine how to access the underlying data record as the referencing varies depending on platform and type of chart series.

var chart = new Ext.chart.PolarChart({
    animate: true,
    interactions: ['rotate'],
    colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e"],
    store: {
      fields: ['name','data3'],
      data: [
          {'name':'metric one', 'data3':14},
          {'name':'metric two', 'data3':16},
          {'name':'metric three', 'data3':14},
          {'name':'metric four', 'data3':6},
          {'name':'metric five', 'data3':36}
      ]
    },
    series: [{
        type: 'pie',
        labelField: 'name',
        xField: 'data3',
        donut: 30,
        listeners: {
           itemmousedown: function(a,b) {
            Ext.Msg.alert("You clicked!",  b.record.get('name') + "(" + b.record.get('data3') + ")");
           }
        }
    }]
});
Ext.Viewport.setLayout('fit');
Ext.Viewport.add(chart);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s