Question

I have some problem with pie charts on ExtJS 4.1.

I load by Ajax and Json the datastore:

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: ['status', 'data', 'data1', 'data2']
});

var store1 = Ext.create('Ext.data.JsonStore', {
    model: 'MyModel',
    proxy: {
        type: 'ajax',
        url : 'PieChartJsonServlet',
    },
    autoLoad: true
});

I would like to display pie charts representing:
1) data by status
2) data1 by status
3) data2 by status

To display each pie chart, I click on buttons from tbar on a panel.

When I load HTML page, the first chart (data by status) is correctly loaded and display.

My problem is after clicking on buttons from tbar, data seem to be loaded but pie chart doesn’t refresh! (When I highlight slices, I display loaded data and I see data are well loaded)

My code:

Ext.require('Ext.chart.*');
Ext.require(['Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.require('Ext.JSON.*');

Ext.onReady(function () {
Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: ['status', 'data', 'data1', 'data2']
});

var store1 = Ext.create('Ext.data.JsonStore', {
    model: 'MyModel',
    proxy: {
        type: 'ajax',
        url : 'PieChartJsonServlet',
    },
    autoLoad: true
});

var titlePieChart = 'Data by status',
dataToDisplay = 'data',
highlightToDisplay = ' data',
chart = Ext.create('Ext.chart.Chart', {
    xtype: 'chart',
    animate: true,
    store: store1,
    shadow: true,
    legend: {
        position: 'right'
    },
    insetPadding: 60,
    theme: 'Base:gradients',
    items: [{
        type  : 'text',
        text  : titlePieChart,
        font  : '18px Arial',
        width : 100,
        height: 30,
        x : 155,
        y : 30
     }],
     series: [{
        type: 'pie',
        field: dataToDisplay,
        showInLegend: true,
        tips: {
          trackMouse: true,
          width: 180,
          height: 35,
          renderer: function(storeItem, item) {
              var total = 0;
              store1.each(function(rec) {
                  total += rec.get(dataToDisplay);
              });
              this.setTitle(storeItem.get('status') + ' : ' + storeItem.get(dataToDisplay) + highlightToDisplay + '\n(' + Math.round(storeItem.get(dataToDisplay) / total * 100) + '%)');
          }
        },
        highlight: {
          segment: {
            margin: 20
          }
        },
        label: {
            field: 'status',
            display: 'rotate',
            font: '18px Arial',
        }
    }]
});

var panel1 = Ext.create('widget.panel', {
    width: 600,
    height: 500,
    renderTo: 'chartCmp',
    layout: 'fit',
    tbar: [{
        text: 'Data',
            handler: function(button, evt) {
            titlePieChart = 'Data by status',
            dataToDisplay = 'data';
            highlightToDisplay = ' data',
            chart.refresh(); // Doesnt' work !
        }
    }, {
        text: 'Data 1',
        handler: function(button, evt) {
            titlePieChart = 'Data1 by status',
            dataToDisplay = 'data1';
            highlightToDisplay = ' data1',
            chart.refresh(); // Doesnt' work !
        }
    }, {
        text: 'Data 2',
        handler: function(button, evt) {
            titlePieChart = 'Data2 by status',
            dataToDisplay = 'data2';
            highlightToDisplay = ' data2',
            chart.refresh(); // Doesnt' work !
        }
    }],
    items: chart
});
});

Each line “chart.refresh();” from tbar doesn’t work whereas I would like a refreshed chart.

For information, I use ExtJS 4.1 on java web application.

Answer 1

With these lines of code for tbar, it works :

tbar: [{
    text: 'Data',
        handler: function(button, evt) {
        titlePieChart = 'Data by status',
        dataToDisplay = 'data';
        chart.series.first().field = dataToDisplay,
        highlightToDisplay = ' data',
        chart.refresh();
    }
}, {
    text: 'Data 1',
    handler: function(button, evt) {
        titlePieChart = 'Data1 by status',
        dataToDisplay = 'data1';
        chart.series.first().field = dataToDisplay,
        highlightToDisplay = ' data1',
        chart.refresh();
    }
}, {
    text: 'Data 2',
    handler: function(button, evt) {
        titlePieChart = 'Data2 by status',
        dataToDisplay = 'data2';
        chart.series.first().field = dataToDisplay,
        highlightToDisplay = ' data2',
        chart.refresh();
    }
}],