PDA

View Full Version : [FIXED] Radar Chart does not display xLabels from a proxy



hallikpapa
18 Apr 2011, 11:44 AM
<edit> Sorry, forgot to put 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:

25701


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:

25700



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?


[B]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.





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();
});
}
}
})

Charlyva
1 Aug 2011, 1:52 AM
I ran into the same issue under 4.0.5. Is there a fix scheduled for future release?

carlitos.10040
19 Dec 2011, 3:57 PM
Same issue here. Is this something that has been fixed or am I doing something wrong?

Thanks

luca22574
26 Jan 2012, 7:59 AM
Hi guys,

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

Please let me know ASAP.

lmalgras
19 Jun 2012, 8:24 AM
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 :


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/showthread.php?219672-radar-chart-after-deleting-store-s-records-appropriate-sprites-are-not-removed ?

tlovato
16 Jan 2014, 11:36 PM
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.

tommytobin
25 Feb 2014, 7:23 PM
A little easier than the options above perhaps. It fixes both the missing labels and the resize errors. Tested on 4.1.2.


// 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);
});

tommytobin
25 Feb 2014, 7:37 PM
==, not =... posted too soon. Worked on a radar chart :)


// 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);
}
});