PDA

View Full Version : [OPEN] Charts not updating when no data is loaded



wiznia
22 Jul 2011, 9:22 AM
REQUIRED INFORMATION Ext version tested:

Ext 4.0.2a

Browser versions tested against:

Firefox 5

Description:

When a store binded to a Ext.chart.Chart loads no data, the chart keeps showing the old data.

Steps to reproduce the problem:

In the Column Chart example (http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Column.html) just execute store1.loadData([]);

The result that was expected:


An empty chart or maybe a message in the chart that says "No data to display".

The result that occurs instead:


The previous data is still displayed

Test Case:
Navigate to: http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Column.html
In the console execute: store1.loadData([]);

Possible fix:

not provided

Additional CSS used:

only default ext-all.css
custom css (include details)

Operating System:


Fedora 15

partha.ramaraj@markit.com
8 Aug 2011, 7:47 AM
any update on this? I am also having same issue.

wiznia
8 Aug 2011, 8:41 AM
Nope...

mike.estes
8 Aug 2011, 9:50 AM
there is a bug here, looks like the chart isn't reacting to the store's clear event properly. The correct form for the call you are trying to make is
store1.loadData([], false); instead of
store1.loadData([]); but it's not currently working either way. I'll get this filed shortly...

Juanito
8 Aug 2011, 12:43 PM
I am also facing the same problem. My chart gets updated often, and sometimes there is no data to display. Just like the OP, the previous data stays on the chart and I haven't found a way to get rid of it.


Try typing this into the console from http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Line.html In this example I try to call removeAll, loadData with an empty array and I also try to hack it by setting a single data point that is outside of the minimum/maximum to no avail.



Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.layout.container.Fit']);
Ext.onReady(function () {
var store = new Ext.data.ArrayStore({
fields: ['fieldA', 'fieldB'],
data: [
[50, 95],
[60, 47],
[70, 68],
[80, 90]
]
});

Ext.create('Ext.Window', {
width: 800,
height: 600,
title: 'Test Chart - How to remove data',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Remove data',
handler: function() {
store.removeAll();
// I thought the line below may help but it doesn't
// Ext.ComponentQuery.query('chart')[0].refresh();
}
}, {
text: 'Set empty data',
handler: function() { store.loadData([]); }
}, {
text: 'Load data outside minimum/maximum range',
handler: function() { store.loadData([[40, 30]])}
}],
items: {
xtype: 'chart',
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['fieldB'],

},{
type: 'Numeric',
position: 'bottom',
fields: ['fieldA'],
minimum: 50,
maximum: 80
}],
series: [{
type: 'line',
axis: 'left',
xField: 'fieldA',
yField: 'fieldB'
}]
}
}).show();
});

wiznia
9 Aug 2011, 1:28 AM
mike.estes, I load the data on the store through a proxy, so there's no call to loadData that I can change...

Juanito
9 Aug 2011, 10:47 AM
@Mike: why would the correct form be loadData([], false)? passing false or undefined to the functions yields the same result.

@wiznia: The reduction I've posted shows that there is no way to get the chart to clear its data.

mike.estes
9 Aug 2011, 10:56 AM
@Juanito you are correct, I was misreading the code, it looked like it needed an explicit false but that doesn't seem to be the case

adriankb
11 Oct 2011, 1:13 AM
To show the y-axes add a minimum and maximum temporarily whilst there is no data in the store.

To show the x-axes temporarily add two records to the store for the x-axes start and end range that you want. Set these to zero for instance. Then modify the chartObject.series.items[i].style = { stroke: 'transparent'
}

Set the above back to style = {} assuming you are not using style once you reload the store.

wiznia
11 Oct 2011, 2:06 AM
@adriankb: that would probably work, but it would be better if it's really fixed in the library...

adriankb
11 Oct 2011, 2:55 AM
Sure, I agree. It is just a work around for anyone struggling with it at the moment.

Varela
11 Oct 2011, 5:46 AM
Same problem. I did kind of UI fix that works for me:


'load' : function() {
var visiblity = 'visible';
if (this.getCount() == 0) {
visiblity = 'hidden';
}
Ext.getCmp('adtypes-pie').getEl().setStyle({visibility : visiblity});
}

ZachG
26 Oct 2011, 2:03 PM
A side effect of keeping items in the chart visible when the store is cleared is invalid store references in records. Consider the following example:




Ext.onReady(function() {
Ext.create("Ext.window.Window", {
width:500,
height:500,
layout:"fit",
items:[
{
xtype:"chart",
store:{
proxy:{
type:"memory",
reader:{
type:"json"
}
},
model:Ext.define("MyModel", {
extend:"Ext.data.Model",
fields:[
"x",
"y"
]
}) && "MyModel",
data:[
{
x:1,
y:2
},
{
x:2,
y:5
}
]
},
axes:[
{
type:"Numeric",
position:"bottom",
fields:["x"]
},
{
type:"Numeric",
position:"left",
fields:["y"]
}
],
series:[
{
type:"bar",
axis:"bottom",
xField:"x",
yField:"y",
tips:{
renderer:function(inRecord) {
alert(inRecord.store.getCount());
}
}
}
],
listeners:{
afterrender:function() {
var me = this;

setTimeout(function() {
me.store.removeAll();
}, 5000);
}
}
}
]
}).show();
});


After 5 seconds, the data in the store is removed, but the bars still show up. The series tip renderer expects the record it's passed to contain a reference to the store that contains the record, but that reference is unset when the data was removed. Now the only way to get the store from the parameter passed is to look at the item.series.chart.store

agdev
23 May 2012, 9:03 PM
This seems to be fixed for bar charts in 4.1, but pie charts still intermittently remain when there's no data - the legend disappears and the pie segments no longer move on mouse-over, but the chart itself still doesn't update. Seems to happen about 1 time in 3 or 4. Any news on this?