PDA

View Full Version : ExtJS 4 chart store update issue.



senatorsfc
29 Aug 2011, 3:38 PM
Hello,

I have an ExtJS 4 Line chart that is bound to a store.

The initial load shows up perfectly, with the markers and the line showing.

On user request, I change the dates to show on the graph. So I change the parameters of the store using this :


this.store.proxy.extraParams = { to: toDate,
from: fromDate
};

Then, I reload to store.


this.store.load();

The chart then updates itself with new markers and lines. But the markers from the previous lines (inital load) are still showing..with no lines attached to them.

How do I clear the graph from the old markers? :-/

Thanks for your help!

senatorsfc
29 Aug 2011, 4:05 PM
Heres some screenshots.


Initial Load :
http://img825.imageshack.us/img825/9899/screenshot20110829at801.th.png (http://imageshack.us/photo/my-images/825/screenshot20110829at801.png/)



After store 2nd load :
http://img842.imageshack.us/img842/466/screenshot20110829at802.th.png (http://imageshack.us/photo/my-images/842/screenshot20110829at802.png/)

skirtle
30 Aug 2011, 7:20 AM
I just gave this a try and it seemed fine to me.

A few details that might help...

Exact ExtJS version.
Browsers tested. Make sure you've tried a few to confirm whether the issue is browser-specific.
Does the problem only happen with remote data loading? Can you try loading some local data?
A minimal but complete test case. The emphasis here is on the words 'minimal' and 'complete' - cut out all code that isn't needed to demonstrate the problem and ensure that there aren't external dependencies that stop us from being able to run the code ourselves.

senatorsfc
31 Aug 2011, 12:03 PM
I just gave this a try and it seemed fine to me.

A few details that might help...
Exact ExtJS version.
Browsers tested. Make sure you've tried a few to confirm whether the issue is browser-specific.
Does the problem only happen with remote data loading? Can you try loading some local data?
A minimal but complete test case. The emphasis here is on the words 'minimal' and 'complete' - cut out all code that isn't needed to demonstrate the problem and ensure that there aren't external dependencies that stop us from being able to run the code ourselves.


Hi Skirtle,

1. Version is 4.0.1, but tried 4.0.2 and same issue
2. I've tried Chrome and Safari, same issue in both.
3. I've tried loading with a static store, and seems to work fine. Do I have to do something special for when loading differently? See following code for how I'm connecting to my data.



Ext4.define('AC.MyModelName', {
extend: 'Ext4.data.Model',
fields: [
{
name: 'publisher'
},
{
name: 'date',
type: 'date',
dateFormat: 'Y-m-d'
},
{
name: 'views',
type: 'int'
},
{
name: 'clicks',
type: 'int'
},
{
name: 'revenue',
type: 'float'
},
{
name: 'costs',
type: 'float'
},
{
name: 'ctr',
type: 'float'
},
{
name: 'cpx',
type: 'float'
},
{
name: 'eCpm',
type: 'float'
},
{
name: 'score',
type: 'float'
}
]
});


var me = this;
var fromDate = this.startDate.format('c');
var toDate = this.endDate.format('c');


me.store = Ext4.create('Ext4.data.Store', {
model: 'AC.MyModelName',
autoLoad: true,
proxy: {
type: 'rest',
url: '/myreports/NameOfReportImLoading',
noCache: false,
extraParams:{ sortBy : this.sortField,
sortOrder: this.sortOrder,
from : fromDate,
to : toDate,
limit :'10'
},
reader: {
root: 'data',
idProperty: 'id',
totalProperty: 'count'
}
}
});


me.ext4chart = new Ext4.chart.Chart({
theme : 'Blue',
store: me.store,
renderTo: r.body.dom,
width: r.body.dom.offsetWidth,
height: 365,
axes: [
{
title: me.xField,
type: 'Time',
position: 'bottom',
fields: [me.xField],
dateFormat: 'd',
groupBy: 'month,day',
dateFormat: 'M d',
label: {
rotate: {
degrees: -90
}
},
grid: true
},
{
title: me.yField,
type: 'Numeric',
position: 'left',
fields: [me.yField],
minimum: 0,
grid: true
}],
series: [
{
type: 'line',
axis: 'left',
xField: me.xField,
yField: me.yField
}]
})
});




And then here is the code when the user changes the dates to show, and I reload the store



onDateRangeChange: function(start, end) {
var theChart = this.ext4chart;
var fromDate = this.startDate.format('c');
var toDate = this.endDate.format('c');


this.store.proxy.extraParams = { to: toDate,
from: fromDate
};
this.store.load();
//theChart.refresh();
//theChart.redraw();
}

As I said, when dealing with a store that I set the data myself, and update it, it works just fine (doing a chart refresh/redraw after store change.) I'm left scratching my head over this. Any help is appreciated! Thank you!

skirtle
1 Sep 2011, 1:16 PM
I just gave it a go but still couldn't reproduce your problem. Do you have access to a non-Mac that you could try it on?

If you need more help we'll need you to produce a complete, minimal test case.

lufton
27 Oct 2011, 12:50 PM
I have the same problem topic starter described.
My store is defined like:

Ext.define('TimeLineStore', {
extend: 'Ext.data.Store',
fields: ['rb', { name: 'time', type: 'time', dateFormat: 'timestamp' }, { name: 'reliability', type: 'int'}],
autoLoad: false,
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
proxy: {
type: 'ajax',
url: 'api.php',
reader: {
type: 'json',
root: 'items'
},
extraParams: {
mode: 'chart',
server_id: cfg.server_id,
start: compute_time(cfg.start),
end: compute_time(cfg.end)
}
}
}, cfg)]);
}
});
It binds to the chart:

Ext.getCmp('mChart').store = new TimeLineStore({
server_id: this.getValue(),
start: new Date(new Date(new Date() - 24 * 60 * 60 * 1000)),
end: roundtime(new Date())
});
And the loads:

Ext.getCmp('mChart').store.load();
But nothing happens until I resize window or loads with callback parameter:

Ext.getCmp('mChart').store.load(function () { Ext.getCmp('mChart').refresh(); Ext.getCmp('mChart').redraw(); });

And one more question: how I can clear my chart after showing some data? I tried to output somesing like

{"items":[]}
but points are still on the chart even if I use this.

nebucade
28 Feb 2012, 7:21 AM
hello,

test : http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/charts/Column.html

reload ok

with firebug test :
store1.loadData(generateData(8)); ->bug
store1.loadData(generateData(1)); ->bug
store1.loadData(generateData(12)); -> no bug

so, if you change colmun number -> bug.

nebucade
8 Mar 2012, 8:23 AM
Nobody refreshes these graphs ??

vanov
14 Apr 2012, 12:57 AM
If column number becomes less , or data loaded becomes less then previously displayed - having a bug: lables of previous data still on screen or even columns still shown (columns are still - if it loads empty data from the store).
Someone, create a bug report, please!!!

slashandburn
10 May 2012, 5:57 AM
I also have a similar issue, which I've been trying to fix in 4.0 & 4.1. We're allowing our clients to define charts that will side-load with search results, so they can be used as secondary filters. On Initial load, everything is fine, but when the user change's search criteria, the charts will start to show corruption with labels being over-lapped. I've found a work-around, which is semi workable by, showing the chart, using chart.surface.removeAll() method to completely clear the chart, and then call chart.redraw(). This method is messy and required timers to fire in order to get timing correct.

mrinal.nath
6 Jun 2012, 5:02 AM
Hi,
I am facing simlar issue.
If my chart is on a panel which is currently not visible and the store refreshes, the chart is not redrawn properly. I can only see some dots.
It updates properly if the panel is visible.
Please help.
-Mrinal

kaslakhanova
16 Jan 2013, 2:01 PM
Additional scenario:

Ext JS 4.1.3
IE8

If the initial number of columns is 1, the additional items in the chart store makes the whole chart disappears completely.

The chart would redraw with additional items if you use the code below:


chart.surface.removeAll();
chart.redraw();


However that also causes the labels of the bars to be behind the bar (i.e. seen only on mouseover) and the axis grid to change style (i.e. bold grey lines).

josh.tingle
30 Aug 2013, 6:48 AM
I found a workaround since the chart.redraw() method doesn't automatically redraw the axis scale/values.

Set a new maximum for the axes, then use the axis.drawAxis() method prior to redrawing the chart...

My chart redraws when the user sorts a column on a bound grid.




chart.axes.items[0].fields = [column.dataIndex];
chart.series.items[0].yField = [column.dataIndex];


var s = Ext.data.StoreManager.lookup('myStore');
var max = s.max(column.dataIndex);


chart.axes.items[0].maximum = max;
chart.axes.items[0].drawAxis();


chart.redraw();