REQUIRED INFORMATION


Ext version tested:
  • Ext 4.1.3.548

Browser versions tested against:
  • Chrome23
  • IE9
  • FF16

DOCTYPE tested against:
  • HTML

Description:
  • Define an Ext.chart.Chart with a remote store (Ext.data.JsonStore/Ext.data.proxy.Ajax) and a legend.
  • The legend is shown in ExtJS 4.1.1.1
  • The legend is not shown in ExtJS 4.1.3.548.

Test Case:

app.js file:
Code:
var localStore = Ext.create('Ext.data.JsonStore', {
	name: 'localStore',
    fields: ['name', 'data'],
    data: [
        { 'name': 'metric one',   'data': 10 },
        { 'name': 'metric two',   'data':  7 },
        { 'name': 'metric three', 'data':  5 },
        { 'name': 'metric four',  'data':  2 },
        { 'name': 'metric five',  'data': 27 }
    ]
});

var remoteStore = Ext.create('Ext.data.JsonStore', {
	name: 'remoteStore',
	fields: ['name', 'data'],
	proxy: Ext.create('Ext.data.proxy.Ajax', {url: '/test.js', reader: {type:'json',root:'result'}}),
	autoLoad: true
    });


var donut = false;
var generateChart = function(chartStore) {
    var chart = Ext.create('Ext.chart.Chart', {
	xtype: 'chart',
	animate: true,
	store: chartStore,
	shadow: true,
	legend: {
	    position: 'right'
	},
	insetPadding: 60,
	theme: 'Base:gradients',
	series: [{
                type: 'pie',
                field: 'data',
                showInLegend: true,
                donut: donut,
                tips: {
		    trackMouse: true,
		    width: 140,
		    height: 28,
		    renderer: function(storeItem, item) {
			//calculate percentage.
			var total = 0;
			localStore.each(function(rec) {
				total += rec.get('data');
			    });
			this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
		    }
                },
                highlight: {
		    segment: {
			margin: 20
		    }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial'
                }
            }]
	});
    return chart;
}
    var generateChartPanel = function(chart) {
    var panel1 = Ext.create('widget.panel', {
        width: 500,
        height: 400,
        title: 'Chart for store= ' + chart.store.name,
        renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: 'Save Chart',
            handler: function() {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                    if(choice == 'yes'){
                        chart.save({
                            type: 'image/png'
                        });
                    }
                });
            }
        }, {
            text: 'Reload Data',
            handler: function() {
                // Add a short delay to prevent fast sequential clicks
                window.loadTask.delay(100, function() {
                    localStore.loadData(generateData(6, 20));
                });
            }
        }, {
            enableToggle: true,
            pressed: false,
            text: 'Donut',
            toggleHandler: function(btn, pressed) {
                chart.series.first().donut = pressed ? 35 : false;
                chart.refresh();
            }
        }],
        items: chart
    });
    return panel1;
    }

var remoteChart = generateChart(remoteStore);
var panelRemoteChart = generateChartPanel(remoteChart);

var localChart = generateChart(localStore);
var panelLocalChart = generateChartPanel(localChart);


Ext.application({
   name: 'MyApp',
   launch: function() {
    Ext.create('Ext.container.Viewport', {
    items: [
    {
     title: 'EXTJS: MyApp',
	    html : 'Version: ' + Ext.versions.core.version,
     height:50
	    
	    }, panelRemoteChart, panelLocalChart
    ]
  });
 }
});
Remote data (referenced as test.js above):
Code:
{result:[ { 'name': 'metric one',   'data': 10 },
        { 'name': 'metric two',   'data':  7 },
        { 'name': 'metric three', 'data':  5 },
        { 'name': 'metric four',  'data':  2 },
        { 'name': 'metric five',  'data': 27 },
        { 'name': 'metric six',  'data': 30 }
]}

HELPFUL INFORMATION


Screenshot or Video:
See this URL for live test case: (none)


Debugging already done:
  • none

Possible fix:
  • not provided

Additional CSS used:
  • only default ext-all.css

Operating System:
  • WinXP Pro