This issue duplicates another issue.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2008
    Posts
    12
    Vote Rating
    0
    imc_Ruf is on a distinguished road

      0  

    Default ExtJS 4.1.3 Chart Legend Bug for charts with remote Store

    ExtJS 4.1.3 Chart Legend Bug for charts with remote Store


    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

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,067
    Vote Rating
    660
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Thanks for the test case. We already have this one reported, id is EXTJSIV-7458 for your reference.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2008
    Posts
    12
    Vote Rating
    0
    imc_Ruf is on a distinguished road

      0  

    Default


    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.

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2012
    Posts
    9
    Vote Rating
    0
    samks is on a distinguished road

      0  

    Default


    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?

  5. #5
    Sencha Premium Member
    Join Date
    Oct 2008
    Posts
    12
    Vote Rating
    0
    imc_Ruf is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    New Hampshire, USA
    Posts
    14
    Vote Rating
    1
    fitzman49 is on a distinguished road

      1  

    Default


    Quote Originally Posted by samks View Post
    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.

    Code:
    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;
        }
    });
    Last edited by fitzman49; 9 Jan 2013 at 1:26 PM. Reason: Being more specific in explanantion

  7. #7
    Sencha Premium Member karlsnyder0's Avatar
    Join Date
    Mar 2010
    Location
    Maryland, USA
    Posts
    82
    Vote Rating
    12
    karlsnyder0 is on a distinguished road

      0  

    Default


    Thank you for sharing this override.

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    1
    Vote Rating
    0
    rahul.9269 is on a distinguished road

      0  

    Default Fix download

    Fix download


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