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)
    &dataName=Page Views&
    &ChartTitle=Stats for Arul's Blog&
    &XAxisTitle=Country of origin&
    &YAxisTitle=Number of Visits&


  • 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.