matchoo
01-06-2009, 12:27 AM
Hi.
I've got the following XML coming in from an http service (XML at bottom)
I want to draw a line chart that has anywhere from 1 to 10 LineSeries, depending on the number of unique <id>n</id> that come back.
I know I would have to do this in actionscript - found an example of building a chart here (http://flexr.wordpress.com/2008/06/10/piechart-purely-in-actionscript-3/):
It looks pretty interesting, but still a bit perplexed about how to refine this based on my data structure.
Any ideas?
Here's the AS3 example of a piechart (I want a linechart - with N lineSeries)
private function getDataProvider():ArrayCollection {
var arr:Array = [];
arr.push({month: 2, data: 3});
arr.push({month: 4, data: 5});
arr.push({month: 6, data: 9});
arr.push({month: 11, data: 23});
return new ArrayCollection(arr);
}
}
/* Call this function below by some mean, or simply through initialize=”pieChartF()” in your header MXML… and voila, you’ve got yourself a pie Chart and it’s Legend.*/
private function lineChartF():void {
var lineChart:LineChart = new LineChart();
var legendLine:Legend = new Legend();
var arr:ArrayCollection = new ArrayCollection;
var lineSeries:LineSeries = new LineSeries;
arr = getDataProvider();
lineChart.dataProvider = arr;
lineChart.percentWidth = 60;
lineChart.percentHeight = 60;
lineChart.x = 100;
lineChart.y = 85;
lineChart.showDataTips = true;
lineSeries.xField = “month”;
lineSeries.yField = “data”;
var arr2:Array = new Array();
arr2.push(lineSeries);
lineChart.series = arr2;
legendLine.dataProvider = lineChart;
legendLine.x = 700;
legendLine.y = 140;
lineContainer.addChild(lineChart);
lineContainer.addChild(legendLine);
}
Here's the XML...
<?xml version="1.0"?>
<data>
<result week='10/05'>
<id>146
</id>
<ending_on>10/05
</ending_on>
<views>22733
</views>
</result>
<result week='10/12'>
<id>146
</id>
<ending_on>10/12
</ending_on>
<views>39992
</views>
</result>
<result week='10/19'>
<id>146
</id>
<ending_on>10/19
</ending_on>
<views>50150
</views>
</result>
<result week='10/26'>
<id>146
</id>
<ending_on>10/26
</ending_on>
<views>82935
</views>
</result>
<result week='11/02'>
<id>146
</id>
<ending_on>11/02
</ending_on>
<views>262504
</views>
</result>
<result week='11/09'>
<id>146
</id>
<ending_on>11/09
</ending_on>
<views>554339
</views>
</result>
<result week='11/16'>
<id>146
</id>
<ending_on>11/16
</ending_on>
<views>738405
</views>
</result>
<result week='11/23'>
<id>146
</id>
<ending_on>11/23
</ending_on>
<views>882321
</views>
</result>
<result week='11/30'>
<id>146
</id>
<ending_on>11/30
</ending_on>
<views>996504
</views>
</result>
<result week='12/07'>
<id>146
</id>
<ending_on>12/07
</ending_on>
<views>1092037
</views>
</result>
<result week='12/14'>
<id>146
</id>
<ending_on>12/14
</ending_on>
<views>1197778
</views>
</result>
<result week='12/21'>
<id>146
</id>
<ending_on>12/21
</ending_on>
<views>1286417
</views>
</result>
<result week='10/05'>
<id>159
</id>
<ending_on>10/05
</ending_on>
<views>22176
</views>
</result>
<result week='10/12'>
<id>159
</id>
<ending_on>10/12
</ending_on>
<views>32783
</views>
</result>
<result week='10/19'>
<id>159
</id>
<ending_on>10/19
</ending_on>
<views>55406
</views>
</result>
<result week='10/26'>
<id>159
</id>
<ending_on>10/26
</ending_on>
<views>90644
</views>
</result>
<result week='11/02'>
<id>159
</id>
<ending_on>11/02
</ending_on>
<views>125215
</views>
</result>
<result week='11/09'>
<id>159
</id>
<ending_on>11/09
</ending_on>
<views>171682
</views>
</result>
<result week='11/16'>
<id>159
</id>
<ending_on>11/16
</ending_on>
<views>309980
</views>
</result>
<result week='11/23'>
<id>159
</id>
<ending_on>11/23
</ending_on>
<views>414823
</views>
</result>
<result week='11/30'>
<id>159
</id>
<ending_on>11/30
</ending_on>
<views>488454
</views>
</result>
<result week='12/07'>
<id>159
</id>
<ending_on>12/07
</ending_on>
<views>531334
</views>
</result>
<result week='12/14'>
<id>159
</id>
<ending_on>12/14
</ending_on>
<views>590864
</views>
</result>
<result week='10/05'>
<id>163
</id>
<ending_on>10/05
</ending_on>
<views>13750
</views>
</result>
<result week='10/12'>
<id>163
</id>
<ending_on>10/12
</ending_on>
<views>22993
</views>
</result>
<result week='10/19'>
<id>163
</id>
<ending_on>10/19
</ending_on>
<views>31696
</views>
</result>
<result week='10/26'>
<id>163
</id>
<ending_on>10/26
</ending_on>
<views>43283
</views>
</result>
<result week='11/02'>
<id>163
</id>
<ending_on>11/02
</ending_on>
<views>56752
</views>
</result>
<result week='11/09'>
<id>163
</id>
<ending_on>11/09
</ending_on>
<views>86052
</views>
</result>
<result week='11/16'>
<id>163
</id>
<ending_on>11/16
</ending_on>
<views>115071
</views>
</result>
<result week='11/23'>
<id>163
</id>
<ending_on>11/23
</ending_on>
<views>155127
</views>
</result>
<result week='11/30'>
<id>163
</id>
<ending_on>11/30
</ending_on>
<views>362583
</views>
</result>
<result week='12/07'>
<id>163
</id>
<ending_on>12/07
</ending_on>
<views>498857
</views>
</result>
<result week='12/14'>
<id>163
</id>
<ending_on>12/14
</ending_on>
<views>757191
</views>
</result>
</data>
I've got the following XML coming in from an http service (XML at bottom)
I want to draw a line chart that has anywhere from 1 to 10 LineSeries, depending on the number of unique <id>n</id> that come back.
I know I would have to do this in actionscript - found an example of building a chart here (http://flexr.wordpress.com/2008/06/10/piechart-purely-in-actionscript-3/):
It looks pretty interesting, but still a bit perplexed about how to refine this based on my data structure.
Any ideas?
Here's the AS3 example of a piechart (I want a linechart - with N lineSeries)
private function getDataProvider():ArrayCollection {
var arr:Array = [];
arr.push({month: 2, data: 3});
arr.push({month: 4, data: 5});
arr.push({month: 6, data: 9});
arr.push({month: 11, data: 23});
return new ArrayCollection(arr);
}
}
/* Call this function below by some mean, or simply through initialize=”pieChartF()” in your header MXML… and voila, you’ve got yourself a pie Chart and it’s Legend.*/
private function lineChartF():void {
var lineChart:LineChart = new LineChart();
var legendLine:Legend = new Legend();
var arr:ArrayCollection = new ArrayCollection;
var lineSeries:LineSeries = new LineSeries;
arr = getDataProvider();
lineChart.dataProvider = arr;
lineChart.percentWidth = 60;
lineChart.percentHeight = 60;
lineChart.x = 100;
lineChart.y = 85;
lineChart.showDataTips = true;
lineSeries.xField = “month”;
lineSeries.yField = “data”;
var arr2:Array = new Array();
arr2.push(lineSeries);
lineChart.series = arr2;
legendLine.dataProvider = lineChart;
legendLine.x = 700;
legendLine.y = 140;
lineContainer.addChild(lineChart);
lineContainer.addChild(legendLine);
}
Here's the XML...
<?xml version="1.0"?>
<data>
<result week='10/05'>
<id>146
</id>
<ending_on>10/05
</ending_on>
<views>22733
</views>
</result>
<result week='10/12'>
<id>146
</id>
<ending_on>10/12
</ending_on>
<views>39992
</views>
</result>
<result week='10/19'>
<id>146
</id>
<ending_on>10/19
</ending_on>
<views>50150
</views>
</result>
<result week='10/26'>
<id>146
</id>
<ending_on>10/26
</ending_on>
<views>82935
</views>
</result>
<result week='11/02'>
<id>146
</id>
<ending_on>11/02
</ending_on>
<views>262504
</views>
</result>
<result week='11/09'>
<id>146
</id>
<ending_on>11/09
</ending_on>
<views>554339
</views>
</result>
<result week='11/16'>
<id>146
</id>
<ending_on>11/16
</ending_on>
<views>738405
</views>
</result>
<result week='11/23'>
<id>146
</id>
<ending_on>11/23
</ending_on>
<views>882321
</views>
</result>
<result week='11/30'>
<id>146
</id>
<ending_on>11/30
</ending_on>
<views>996504
</views>
</result>
<result week='12/07'>
<id>146
</id>
<ending_on>12/07
</ending_on>
<views>1092037
</views>
</result>
<result week='12/14'>
<id>146
</id>
<ending_on>12/14
</ending_on>
<views>1197778
</views>
</result>
<result week='12/21'>
<id>146
</id>
<ending_on>12/21
</ending_on>
<views>1286417
</views>
</result>
<result week='10/05'>
<id>159
</id>
<ending_on>10/05
</ending_on>
<views>22176
</views>
</result>
<result week='10/12'>
<id>159
</id>
<ending_on>10/12
</ending_on>
<views>32783
</views>
</result>
<result week='10/19'>
<id>159
</id>
<ending_on>10/19
</ending_on>
<views>55406
</views>
</result>
<result week='10/26'>
<id>159
</id>
<ending_on>10/26
</ending_on>
<views>90644
</views>
</result>
<result week='11/02'>
<id>159
</id>
<ending_on>11/02
</ending_on>
<views>125215
</views>
</result>
<result week='11/09'>
<id>159
</id>
<ending_on>11/09
</ending_on>
<views>171682
</views>
</result>
<result week='11/16'>
<id>159
</id>
<ending_on>11/16
</ending_on>
<views>309980
</views>
</result>
<result week='11/23'>
<id>159
</id>
<ending_on>11/23
</ending_on>
<views>414823
</views>
</result>
<result week='11/30'>
<id>159
</id>
<ending_on>11/30
</ending_on>
<views>488454
</views>
</result>
<result week='12/07'>
<id>159
</id>
<ending_on>12/07
</ending_on>
<views>531334
</views>
</result>
<result week='12/14'>
<id>159
</id>
<ending_on>12/14
</ending_on>
<views>590864
</views>
</result>
<result week='10/05'>
<id>163
</id>
<ending_on>10/05
</ending_on>
<views>13750
</views>
</result>
<result week='10/12'>
<id>163
</id>
<ending_on>10/12
</ending_on>
<views>22993
</views>
</result>
<result week='10/19'>
<id>163
</id>
<ending_on>10/19
</ending_on>
<views>31696
</views>
</result>
<result week='10/26'>
<id>163
</id>
<ending_on>10/26
</ending_on>
<views>43283
</views>
</result>
<result week='11/02'>
<id>163
</id>
<ending_on>11/02
</ending_on>
<views>56752
</views>
</result>
<result week='11/09'>
<id>163
</id>
<ending_on>11/09
</ending_on>
<views>86052
</views>
</result>
<result week='11/16'>
<id>163
</id>
<ending_on>11/16
</ending_on>
<views>115071
</views>
</result>
<result week='11/23'>
<id>163
</id>
<ending_on>11/23
</ending_on>
<views>155127
</views>
</result>
<result week='11/30'>
<id>163
</id>
<ending_on>11/30
</ending_on>
<views>362583
</views>
</result>
<result week='12/07'>
<id>163
</id>
<ending_on>12/07
</ending_on>
<views>498857
</views>
</result>
<result week='12/14'>
<id>163
</id>
<ending_on>12/14
</ending_on>
<views>757191
</views>
</result>
</data>