Results 1 to 8 of 8

Thread: Radar Chart does not display xLabels from a proxy

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-6582 in 4.2.3.
  1. #1
    Sencha User
    Join Date
    Jun 2007
    Posts
    266

    Default Radar Chart does not display xLabels from a proxy

    <edit> Sorry, forgot to put [B3] in the subject line.

    When playing with the radar chart, I setup a test like so, which works fine. Shows the legend, each point has the proper label around the x-axis in the chart, etc.

    Here is a screenshot when the following is executed:

    labels.jpg
    Code:
    var chs = Ext.create('Ext.data.Store', {
    	model: 'Radar',
    	data : [
    	        {
    	            "name":"Va 1",
    	            "site0":61.441684425547,
    	            "site1":52.934696380231,
    	            "site2":52.095893060769
    	         },
    	         {
    	            "name":"Val 2",
    	            "site0":41.24804810094388,
    	            "site1":41.24804810094388,
    	            "site2":18.42372235865956
    	         },
    	         {
    	            "name":"Val 3",
    	            "site0":47.81805620694,
    	            "site1":41.390285474857,
    	            "site2":31.13609151073
    	         },
    	         {
    	            "name":"Val 4",
    	            "site0":48.020481555126,
    	            "site1":41.437328231387,
    	            "site2":33.420276880875
    	         },
    	         {
    	            "name":"Val 5",
    	            "site0":63.5595229012,
    	            "site1":51.87916082251,
    	            "site2":58.623663430603
    	         },
    	         {
    	            "name":"Val 6",
    	            "site0":82.29572936219174,
    	            "site1":55.32603085531591,
    	            "site2":30.61729927619892
    	         }
    	      ],
        autoLoad: true,
        listeners: {
    		beforeload: function(store, operation) {
    			var x = operation;
    		},
        	load: function(store, records, success) {
        		//FIXME: This is very sloppy
    			var proxy = this.model.getProxy(); 
        		var chart = Ext.getCmp("radar-test");
        		var series = chart.items.items[0].series;
        		for(var i = 0; i < series.items.length; i++)
        		{
        			var legendItem = series.items[i];
        			var titleIndex = "label" + i;
        			var labels = proxy.reader.rawData.label;
        			var title = labels[titleIndex];
        			legendItem.setTitle(title);
        		}
        	}
        }
    });
    
    Ext.define("Ext.seo.RadarChartPortlet", {
        extend: "Ext.panel.Panel",
        alias: "widget.radarchartportlet",
        requires: ["Ext.chart.theme.Base", "Ext.chart.series.Series"],
        initComponent: function () {
            Ext.apply(this, {
                layout: "fit",
                id: "radar-test",
                width: 600,
                height: 400,
                items: {
    	        	xtype: 'chart',
    	            style: 'background:#fff',
    	            theme: 'Category2',
    	            insetPadding: 20,
    	            animate: true,
                    store: chs,
                    legend: {
                        position: "right"
                    },
                    axes: [{
                        type: "Radial",
                        position: "radial",
                        maximum: 100,
                        label: {
                            display	: true
                        }
                    }],
                    series: [{
                    	showInLegend	: true,
                        type			: 'radar',
                        xField			: 'name',
                        yField			: 'site0',
                        style: {
                            opacity: 0.4
                        }
                    },{
                        showInLegend	: true,
                        type			: 'radar',
                        xField			: 'name',
                        yField			: 'site1',
                        style: {
                            opacity: 0.4
                        }
                        
                    },{
                        showInLegend	: true,
                        type			: 'radar',
                        xField			: 'name',
                        yField			: 'site2',
                        style: {
                            opacity: 0.4
                        }
                    }]
                }
            });
            this.callParent(arguments);
        }
    });
    But when I try and use a model with a proxy attached to it, it shows everything correctly except the access labels. Below, the contents of the file radar.json is an exact copy of what is loaded into the data property in the above working example. I just put it in the root of the webserver, and did a breakpoint in the load function and looked at the records in the store. Each field is populated with the data without error.

    Screenshot of the following code after execution. Notice there are no labels:

    no-labels.jpg

    Code:
    Ext.regModel('Radar', { 
    	fields: ['name', 'site0', 'site1', 'site2'],
        proxy: {
    		type    : 'ajax',
    	    url     : '/radar.json',
    	    reader: {
    	        type : 'json'
    	    }
        }
    });
    
    var chs = Ext.create('Ext.data.Store', {
    	model: 'Radar',
        autoLoad: true,
        listeners: {
    		beforeload: function(store, operation) {
    			var x = operation;
    		},
        	load: function(store, records, success) {
        		//FIXME: This is very sloppy
    			var proxy = this.model.getProxy(); 
        		var chart = Ext.getCmp("radar-test");
        		var series = chart.items.items[0].series;
        		for(var i = 0; i < series.items.length; i++)
        		{
        			var legendItem = series.items[i];
        			var titleIndex = "label" + i;
        			var labels = proxy.reader.rawData.label;
        			var title = labels[titleIndex];
        			legendItem.setTitle(title);
        		}
        	}
        }
    });
    
    Ext.define("Ext.seo.RadarChartPortlet", {
        extend: "Ext.panel.Panel",
        alias: "widget.radarchartportlet",
        requires: ["Ext.chart.theme.Base", "Ext.chart.series.Series"],
        initComponent: function () {
            Ext.apply(this, {
                layout: "fit",
                id: "radar-test",
                width: 600,
                height: 400,
                items: {
    	        	xtype: 'chart',
    	            style: 'background:#fff',
    	            theme: 'Category2',
    	            insetPadding: 20,
    	            animate: true,
                    store: chs,
                    legend: {
                        position: "right"
                    },
                    axes: [{
                        type: "Radial",
                        position: "radial",
                        maximum: 100,
                        label: {
                            display	: true
                        }
                    }],
                    series: [{
                    	showInLegend	: true,
                        type			: 'radar',
                        xField			: 'name',
                        yField			: 'site0',
                        style: {
                            opacity: 0.4
                        }
                    },{
                        showInLegend	: true,
                        type			: 'radar',
                        xField			: 'name',
                        yField			: 'site1',
                        style: {
                            opacity: 0.4
                        }
                        
                    },{
                        showInLegend	: true,
                        type			: 'radar',
                        xField			: 'name',
                        yField			: 'site2',
                        style: {
                            opacity: 0.4
                        }
                    }]
                }
            });
            this.callParent(arguments);
        }
    });

    It looks as though chart labels are drawn before the data is returned from the server. Should an event be internally fired for the chart when the store is loaded?


    EDIT: HACKED TOGETHER BELOW

    I just called drawLabels() after the store is loaded. I posted this as a bug b/c I figured that properties that rely on data from a store would have an event fired off once the store was loaded or updated. This includes the labels, as well as the data points.



    Code:
    var chs = Ext.create('Ext.data.Store', {
    	model: 'Radar',
        autoLoad: true,
        listeners: {
    		beforeload: function(store, operation) {},
        	load: function(store, records, success) {
        		//FIXME: This is very sloppy
    			var proxy = this.model.getProxy(); 
        		var chart = Ext.getCmp("radar-test");
        		var series = chart.items.items[0].series;
        		for(var i = 0; i < series.items.length; i++)
        		{
        			var legendItem = series.items[i];
        			var titleIndex = "label" + i;
        			var labels = proxy.reader.rawData.label;
        			var title = labels[titleIndex];
        			legendItem.setTitle(title);
        		}
        		var axes = chart.items.items[0].axes;
        		axes.each(function(axis) {
        			axis.label.display = true;
        			axis.drawLabel();
                });
        	}
        }
    })

  2. #2
    Ext JS Premium Member Charlyva's Avatar
    Join Date
    Dec 2007
    Location
    Austria, St. Plten
    Posts
    88

    Default

    I ran into the same issue under 4.0.5. Is there a fix scheduled for future release?
    strangers are friends i haven't met yet

  3. #3

    Default same

    Same issue here. Is this something that has been fixed or am I doing something wrong?

    Thanks

  4. #4

    Default Any news?

    Hi guys,

    did you fix this issue in a different way from the one on top?

    Please let me know ASAP.

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    27

    Default

    Sencha, any news about a permanent fix of this bug ?

    The reason why the labels are displayed on the surface is because Ext.chart.axis.Radial maintain an internal cache of labels & axes sprites already on the surface.

    At the first draw, there is no record in the store so the cache is initialized with no sprites at all.
    On the store load, the chart is redrawn and the Ext.chart.axis.Radial use the internal cache of labels & axes sprites to do this redraw (see methods drawAxis and drawLabel)

    I fixed this bug in a different way : by reseting the Ext.chart.axis.Radial internal cache :
    Code:
    Ext.require('Ext.chart.*');
    Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
    
    Ext.onReady(function () {
    
        var store1 = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1']
        });
        var chart = Ext.create('Ext.chart.Chart', {
            id: 'chartCmp',
            xtype: 'chart',
            style: 'background:#fff',
            theme: 'Category2',
            animate: false,
            store: store1,
            insetPadding: 20,
            legend: false,
            axes: [{
                type: 'Radial',
                position: 'radial',
                label: {
                    display: true
                }
            }],
            series: [{
                type: 'radar',
                xField: 'name',
                yField: 'data1',
                showInLegend: true,
                showMarkers: true,
                markerConfig: {
                    radius: 5,
                    size: 5
                },
                style: {
                    'stroke-width': 2,
                    fill: 'none'
                }
            }]
        });
    
        store1.on('datachanged', function() {
            var me = this,
                axesItems = me.axes.items,
                axesLen = axesItems.length,
                labelArray, sprites,
                cleanSurface = function(sprites) {
                    if(Ext.isArray(sprites)) {
                        for (i = 0; i < sprites.length; i++) {
                            me.surface.remove(sprites[i]);
                        }
                    }
                };
    
            for (i = 0; i < axesLen; i++) {
                if(axesItems[i]) {
                    if(axesItems[i].labelArray) {
                        labelArray = axesItems[i].labelArray;
                        delete axesItems[i].labelArray;
                    }
                    if(axesItems[i].sprites) {
                        sprites = axesItems[i].sprites;
                        delete axesItems[i].sprites;
                    }
                }
                cleanSurface(labelArray);
                cleanSurface(sprites);
            }
        }, chart);
    
        var win = Ext.create('Ext.Window', {
            width: 800,
            height: 600,
            minHeight: 400,
            minWidth: 550,
            hidden: false,
            shadow: false,
            maximizable: true,
            style: 'overflow: hidden;',
            title: 'Radar Chart',
            renderTo: Ext.getBody(),
            layout: 'fit',
            tbar: [{
                text: 'Load Data',
                handler: function() {
                    store1.loadData(generateData());
                }
            }],
            items: chart
        });
    });
    Is this related to EXTJSIV-6522 http://www.sencha.com/forum/showthre...re-not-removed ?

  6. #6
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    1

    Default

    Hello. We are using Extjs 4.2.1, and this bug is still exists. Any update? This bug makes the radar charts practically unusable.

    Thanks.

  7. #7

    Default Work around for Radar Chart issues with remote store

    A little easier than the options above perhaps. It fixes both the missing labels and the resize errors. Tested on 4.1.2.

    Code:
            // this fixes some errors in charts around remote proxies
            chart.store.addListener('load', function() {
                for (var i=0; i<chart.axes.items.length; i++) {
                    var axis = chart.axes.items[i];
                    if (axis.type='Radial') {
                        axis.sprites = null;
                        axis.labelArray = null;
                        chart.surface.removeAll(true);
                    }
                }
                chart.redraw(true);
            });

  8. #8

    Default ... ugg - silly mistake

    ==, not =... posted too soon. Worked on a radar chart

    Code:
            // this fixes some errors in charts around remote proxies
            chart.store.addListener('load', function() {
                var redraw=false;
                for (var i=0; i<chart.axes.items.length; i++) {
                    var axis = chart.axes.items[i];
                    if (axis.type=='Radial') {
                        axis.sprites = null;
                        axis.labelArray = null;
                        chart.surface.removeAll(true);
                        redraw=true;
                    }
                }
                if (redraw) {
                    chart.redraw(true);
                }
            });

Similar Threads

  1. Replies: 1
    Last Post: 1 Apr 2011, 4:49 PM
  2. Replies: 1
    Last Post: 1 Apr 2011, 10:41 AM
  3. [FIXED-EXTJSIV-223] Radar chart misses scaling
    By steffenk in forum Ext:Bugs
    Replies: 2
    Last Post: 28 Mar 2011, 2:41 AM
  4. Dotted radar chart not looped
    By sabbath in forum Ext GWT: Discussion
    Replies: 5
    Last Post: 30 Apr 2010, 9:57 AM
  5. dotted radar chart not looped
    By sabbath in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 29 Jan 2010, 11:39 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •