PDA

View Full Version : Error Parsing XML Data for Area Chart



UpWorks
17 Oct 2012, 2:42 PM
I am receiving the following parsing error. I know the javascript code works because I have swapped out the xml integration with a static JsonStore. Can you spot what I am doing wrong?
Thank you in advance for any suggestions.

Error: Problem parsing d="L790,518.887301636L120,518.887301636Z" results-graph3.htm:1111
Error: Problem parsing d="Z"

The Xml File:

<?xml version="1.0" encoding="utf-8"?>
<fundGrowthData>
<growthData>
<Year>1991</Year>
<asOfDate>December 31, 1991</asOfDate>
<Dividends>10000</Dividends>
<Distribution>10000</Distribution>
</growthData>
<growthData>
<Year>1992</Year>
<asOfDate>December 31, 1992</asOfDate>
<Dividends>10655</Dividends>
<Distribution>10740</Distribution>
</growthData>
<growthData>
<Year>1993</Year>
<asOfDate>December 31, 1993</asOfDate>
<Dividends>12146</Dividends>
<Distribution>12297</Distribution>
</growthData>
</fundGrowthData>

The Javascript

var store = Ext.create('Ext.data.Store',{
autoLoad: true,
fields: ['Year','Dividends','Distribution'],
proxy: {
type: 'ajax',
url: 'pathtoXML',
reader: {
type: 'xml',
record: 'growthData'
}
}
});

Ext.onReady(function () {

Ext.create('Ext.chart.Chart', {
renderTo: Ext.get("js-chart"),
width: 800,
height: 600,
store: store,
axes: [
{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['Dividends', 'Distribution'],
title: 'Sample Values',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['Year'],
title: 'Sample Metrics',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}
],
series: [{
type: 'area',
highlight: true,
axis: 'left',
xField: 'Year',
yField: ['Dividends', 'Distribution'],
style: {
opacity: 0.93
}
}]
});

});

evant
17 Oct 2012, 2:47 PM
Moving to the appropriate forums.

Since all XML data is a string, you'll probably want to specify the field type so they get converted to numbers: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Field-cfg-type

UpWorks
17 Oct 2012, 3:58 PM
Changed to this:

var store = Ext.create('Ext.data.Store',{
autoLoad: true,
fields: [
{name : "Year", type: "int"},
{name : "Dividends", type: "int"},
{name : "Distribution", type: "int"}
],
proxy: {
type: 'ajax',
url: 'pathToXml',
reader: {
type: 'xml',
record: 'growthData'
}
}
}
);

No parsing error however there is still no data in the chart

evant
17 Oct 2012, 4:12 PM
Your data isn't valid for an area chart, look at the data inside the store in the example, compare it to what you have.

UpWorks
17 Oct 2012, 4:40 PM
Your data isn't valid for an area chart, look at the data inside the store in the example, compare it to what you have.

The same data in a JsonStore works:

var store = Ext.create('Ext.data.JsonStore', {
fields: ['Year','Dividends','Distribution'],
data: [
{ "Year": "1991", "Dividends":10000, "Distribution":10000 },
{ "Year": "1992", "Dividends":10655, "Distribution":10740 },
{ "Year": "1993", "Dividends":12146, "Distribution":12297 },
{ "Year": "1994", "Dividends":12071, "Distribution":12300 },
{ "Year": "1995", "Dividends":15528, "Distribution":15965 },
{ "Year": "1996", "Dividends":17721, "Distribution":18334 },
{ "Year": "1997", "Dividends":22338, "Distribution":23258 },
{ "Year": "1998", "Dividends":29328, "Distribution":30649 },
{ "Year": "1999", "Dividends":42667, "Distribution":44656 },
{ "Year": "2000", "Dividends":45649, "Distribution":47999 },
{ "Year": "2001", "Dividends":39968, "Distribution":42107 },
{ "Year": "2002", "Dividends":31135, "Distribution":32834 },
{ "Year": "2003", "Dividends":41367, "Distribution":43636 },
{ "Year": "2004", "Dividends":46154, "Distribution":48851 },
{ "Year": "2005", "Dividends":52400, "Distribution":55801 },
{ "Year": "2006", "Dividends":57672, "Distribution":61907 },
{ "Year": "2007", "Dividends":63346, "Distribution":68687 },
{ "Year": "2008", "Dividends":38145, "Distribution":41850 },
{ "Year": "2009", "Dividends":50904, "Distribution":56281 },
{ "Year": "2010", "Dividends":56696, "Distribution":63192 },
{ "Year": "2011", "Dividends":53511, "Distribution":60101 }
]});

UpWorks
18 Oct 2012, 9:33 AM
Your data isn't valid for an area chart, look at the data inside the store in the example, compare it to what you have.

You are correct, the data is not aggregated, meaning the data is not stacked. Each data start point should start at 10000 but Dividends is stack on top of the graph so it looks like Distributions started at 20000.

I am not clear on what is going on and or wrong here. Thank you in advance for any suggestions.