Here is the dynamic chart example from my Singapore User group Seminar.
[cc lang=”actionscript3″]
Create a text file with the following text and name it chartData1.txt. I’m using &name= value& syntax instead of usual name1=value1&name2=value2 for better readability (LoadVars will ignore the extra ‘&’ and the line brakes)
&label=Singapore,US,India&
&value=1240,780,360&
&dataName=Page Views&
&ChartTitle=Stats for Arul's Blog&
&XAxisTitle=Country of origin&
&YAxisTitle=Number of Visits&
[/cc]
Drag and drop a Pie Chart component, name it myPieChart and increase the span to 2 frames in the time line
Add another layer on top and create a shape in the same color as the chart to hide it in the first frame (It will hide the chart until the dynamic chart data is loaded)
Add a static text in the same layer as the shape and type “Loading Chart Data…” to show while loading
Add another frame, name it actions and copy & paste the following code
[cc lang=”actionscript3″]
//Keep it in the first frame until chartData is loaded
stop();
_global.chartLoader = new LoadVars();
chartLoader.chartData = new DataProviderClass();
chartLoader.onLoad = parseChartData;
chartLoader.load(“chartData1.txt“);
function parseChartData(loadSuccess) {
if (loadSuccess) {
with (chartLoader) {
label = label.split(“,“);
value = value.split(“,“);
for (var i = 0; i<label.length; i++) {
var item = {value:(Number(value[i]))};
item[dataName] = label[i];
chartData.addItem(item);
}
}
}
//applyChartData(myLineChart);
//applyChartData(myBarChart);
applyChartData(myPieChart);
//Now go to frame 2 to show the chart
gotoAndStop(2);
}
function applyChartData(Chart) {
with (Chart) {
setDataProvider(chartLoader.chartData);
setLabelSource(chartLoader.dataName);
setChartTitle(chartLoader.ChartTitle);
setXAxisTitle(chartLoader.XAxisTitle);
setYAxisTitle(chartLoader.YAxisTitle);
}
}[/cc]
It will result in the following graph
Once it is up and running you can dynamically generate the data using server side scripting instead of static text file.
