ExtJS 4.1.3 Chart Legend Bug for charts with remote Store

[imc_Ruf]

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:

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

{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:

• snap092.png

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

[evant]

Thanks for the test case. We already have this one reported, id is EXTJSIV-7458 for your reference.

[imc_Ruf]

Thank you for the quick answer!

Is there already a fix or workaround? Where can I find and search the bugs? Is there a public bug tracking system? Please help, I’m not familiar with bug reports for Sencha and was not able to find this information.

[samks]

Any information on this? I am experiencing the same issue. Is there a work around? Is it possible to explain how we can use with the bug id you provided? Are we missing something we can search with the id?

[imc_Ruf]

This bug is fixed, you can use the nightly build from 2012-12-02.

[fitzman49]

Any information on this? I am experiencing the same issue. Is there a work around? Is it possible to explain how we can use with the bug id you provided? Are we missing something we can search with the id?

In case anyone is interested in a fix for 4.1.3 without using a nightly here is what I did. I basically had to override the redraw function on the chart to reinitialize the items in the legend again for pie charts. The fix uses a slightly modified version of the fix found in the 4.1.4 nightlies.

Ext.define('My.chart.Chart',{    
    override: 'Ext.chart.Chart',
        /**
     * Redraws the chart. If animations are set this will animate the chart too. 
     * @param {Boolean} resize (optional) flag which changes the default origin points of the chart for animations.
     */
    redraw: function(resize) {
        var me = this,
            seriesItems = me.series.items,
            seriesLen = seriesItems.length,
            axesItems = me.axes.items,
            axesLen = axesItems.length,
            themeIndex = 0,
            i, item,
            chartBBox = me.chartBBox = {
                x: 0,
                y: 0,
                height: me.curHeight,
                width: me.curWidth
            },
            legend = me.legend, 
            series;
            
        me.surface.setSize(chartBBox.width, chartBBox.height);
        // Instantiate Series and Axes
        for (i = 0; i < seriesLen; i++) {
            item = seriesItems[i];
            if (!item.initialized) {
                series = me.initializeSeries(item, i, themeIndex);
            } else {
                series = item;
            }
            //******************************************************************
            //EXTJS 4.1.3 fix for pie chart legends not rendering
            if(series && series.type && series.type == 'pie') {
                series.onRedraw = function() {
                    this.initialize();
                }
                series.onRedraw();
            }
            //******************************************************************


            // For things like stacked bar charts, a single series can consume
            // multiple colors from the index, so we compensate for it here
            if (Ext.isArray(item.yField)) {
                themeIndex += item.yField.length;
            } else {
                ++themeIndex;
            }
        }
        for (i = 0; i < axesLen; i++) {
            item = axesItems[i];
            if (!item.initialized) {
                me.initializeAxis(item);
            }
        }
        //process all views (aggregated data etc) on stores
        //before rendering.
        for (i = 0; i < axesLen; i++) {
            axesItems[i].processView();
        }
        for (i = 0; i < axesLen; i++) {
            axesItems[i].drawAxis(true);
        }


        // Create legend if not already created
        if (legend !== false && legend.visible) {
            if (legend.update || !legend.created) {
              legend.create();
            }
        }


        // Place axes properly, including influence from each other
        me.alignAxes();


        // Reposition legend based on new axis alignment
        if (legend !== false && legend.visible) {
            legend.updatePosition();
        }


        // Find the max gutter
        me.getMaxGutter();


        // Draw axes and series
        me.resizing = !!resize;


        for (i = 0; i < axesLen; i++) {
            axesItems[i].drawAxis();
        }
        for (i = 0; i < seriesLen; i++) {
            me.drawCharts(seriesItems[i]);
        }
        me.resizing = false;
    }
});

[karlsnyder0]

Thank you for sharing this override.

[rahul.9269]

Hi ,
Where can the above fix be downloaded from, i do not have access to nightl builds.