PDA

View Full Version : Chart breaks when using brackets or dots in the store field



usavahe
10 Sep 2014, 3:51 PM
This is the code that you can test on https://fiddle.sencha.com/#home (Set extjs 4.2.1 Neptune)


Ext.application({
name : 'Fiddle',


launch : function() {
var line_chart = Ext.create('Ext.chart.Chart',
{
width: 500,
height: 300,
margin: 50,
store: Ext.create('Ext.data.JsonStore',
{
fields: ['name', 'data'],
data: [
{'name':1, 'data':Math.floor(Math.random()*100)},
{'name':2, 'data':Math.floor(Math.random()*100)},
{'name':3, 'data':Math.floor(Math.random()*100)},
{'name':4, 'data':Math.floor(Math.random()*100)},
{'name':5, 'data':Math.floor(Math.random()*100)},
{'name':6, 'data':Math.floor(Math.random()*100)}
]
}),
shadow: false,
renderTo: Ext.getBody(),
axes:
[
{
type: 'Numeric',
title: 'Values',
position: 'left',
fields: ['data'],
grid: true
},
{
type: 'Category',
title: 'Time',
position: 'bottom',
fields: ['name']
}
],
series:
[
{
type: 'line',
axis: 'left',
xField: ['name'],
yField: ['data']
}
]
});
}
});


So let me explain so that you can see it yourself on the actual demo.

Chart store has 2 fields: name and data.

If you replace the "data" in the fields with "foo [foo] (cpu: )" the chart breaks.
Firebug gives me:

SyntaxError: missing ) after argument list
value = source.foo [foo] (cpu: );
-----------------------------------^

It also breaks if you replace "data" with "blahblah (foo.na.foo.com)" or "blah (Intel[R] PRO_1000)"

I am not sure what is it? Something about spaces, square brackets, dots, and some other chars that I have not encountered yet, break the chart (code).

Thanks

usavahe
11 Sep 2014, 11:39 AM
I found a solution:


proxy:
{
type: 'ajax',
url: '',
reader:
{
type: 'json',
useSimpleAccessors: true
}
}


Sine my data was dynamically fed to the store, I did not configure proxy. Now I just added above code to fix the field name formatting issue.

If there is a simper solution, please let me know.

Thanks
Brian