Daily Archives: March 19, 2013

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