Error when reloading store / chart

[Pacos]

Hello,

I have a chart :


var columnBI = Ext.create(Ext.chart.Chart, {
style: 'background:#fff',
animate: {
easing: 'bounceOut',
duration: 500
},
store: dshDetailStore,
flex: 1,
theme: 'Base:gradients',
width: 300,
height: 200,
shadow: true,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['roi'],
title: '',
grid: true,
minimum: -100,
label: {font: '8px Arial'}
},{
type: 'Category',
position: 'bottom',
fields: 'name',
title: '',
minimum: 0,
label: {font: '8px Arial'}
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
xField: 'name',
yField: 'roi',
flex: 1,
theme: 'Base:gradients',
tips: {
trackMouse: true,
width: 150,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('roi') + ' %');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'roi',
renderer: function (v) { return v + '%'; },
orientation: 'vertical'
}
}]
});

which is binded to a JSONStore :


var dshDetailStore = new Ext.data.JsonStore({
autoDestroy: true,
storeId: 'dshDetailStore',
proxy: {
type: 'ajax',
url: 'Controller?action=ddlist',
reader: {
type: 'json',
root: 'dshDetail',
idProperty: 'name'
}
},
fields: ['name', {name: 'itm', type: 'float'}, {name: 'bi', type: 'float'}, {name: 'roi', type: 'float'}]
});

Everything works fine, except for one situation : I reload the datastore after submitting a form, because the source data of this datastore has changed. In this exact case, the column chart cannot be rendered (it shows a blank area), and Firebug displays the same warning several time (seems to be one time per record of the datastore) :


Unexpected value matrix(NaN,NaN,NaN,NaN,NaN,NaN) parsing transform attribute

Here is the part of the form code that reloads the datastore :


var formSession = new Ext.FormPanel({
[... properties ...],
items: [{
layout:'anchor',
bodyStyle:'padding:5px 5px 0',
items:[...],
buttons: [{
text: 'Save',
handler: function(){
if(formSession.getForm().isValid()){
formSession.getForm().submit({
url: 'Controller',
method:'POST',
waitMsg: 'Saving Session',
params: {
action: 'sAdd'
},
success: function(){
Ext.Msg.show({
title:'Success',
msg: 'Session successfully saved.',
buttons: Ext.Msg.OK
});
sessionStore.load();
dshSumStore.load();

// HERE IS THE LOAD
dshDetailStore.load();

dshTitleStore.load();
Ext.getCmp('combo-room').reset();
Ext.getCmp('combo-tournament').reset();
Ext.getCmp('nfield-rebuy').reset();
Ext.getCmp('cbox-addon').reset();
Ext.getCmp('nfield-itm').reset();
},
failure: function(){
Ext.Msg.alert('Error', 'Error while saving.');
}
});
}}
}]
});

Can anyone help me to solve this case ? Thank you !

[skirtle]

I'd guess the problem is in the response data and that the fields containing the relevant numbers are missing or don't contain numbers. Could you post an example of the JSON response that comes back when you reload?

[Pacos]

That's what I thought at first. But here is the JSON sent by the server just after the reload :



{"dshDetail":[{"itm":"1000.0","name":"Anna","roi":"566.67","bi":"150.0"},{"itm":"2500.0","name":"Bob","roi":"986.96","bi":"230.0"},{"itm":"0.0","name":"Carl","roi":"-100","bi":"3060.0"},{"itm":"0.0","name":"Dave","roi":"-100","bi":"120.0"},{"itm":"10012.02","name":"Eve","roi":"6574.68","bi":"150.0"}]}

And here is the JSON sent by the server just after I get the previous one, when reloading the page - and this time it works perfectly, as it does anytime except for the situation described - :



{"dshDetail":[{"itm":"1000.0","name":"Anna","roi":"566.67","bi":"150.0"},{"itm":"2500.0","name":"Bob","roi":"986.96","bi":"230.0"},{"itm":"0.0","name":"Carl","roi":"-100","bi":"3060.0"},{"itm":"0.0","name":"Dave","roi":"-100","bi":"120.0"},{"itm":"10012.02","name":"Eve","roi":"6574.68","bi":"150.0"}]}

It's exactly the same :-|

[skirtle]

I think you're going to have to get out the debugger and attack it with stacktraces and breakpoints.

[Pacos]

I put a breakpoint on the store's load() call which is in my form. No error occured in this piece of code, it did after. It must be when the chart is refreshed after detecting a change in the datastore, but I don't know how to trace it. Plus, it's "only" a warning that is sent back by extjs, and I don't know how to track the origin of these warnings. Any idea would be very appreciated, thanks !

[skirtle]

Looks like the call to matrix is in the method toSvg. I'd start by putting a breakpoint there. If it gets hit too often I'd make it a conditional breakpoint to catch the NaN case. Once you've got it paused on that line you'll have access to the full stacktrace and all the local variables at that point. Then you have to work backwards to figure out where the NaNs can from.