flexr

Same as the other charts I have posted here in Actionscript 3… we would need the data for the Column Chart to be generated.

private function getDataProvider():ArrayCollection {
   var arr:Array = [];
   arr.push({title: "Benefit 1", data: 2});
   arr.push({title: "Benefit 2", data: 5});
   arr.push({title: "Benefit 3", data: 6});
   arr.push({title: "Benefit 4", data: 3});
   return new ArrayCollection(arr);
}

Now for the Chart to be displayed… you’d need to call this function,

private function columnChart():void {
   var columnChart:ColumnChart = new ColumnChart();
       columnChart.dataProvider = getDataProvider();
       columnChart.percentWidth = 60;
       columnChart.percentHeight = 60;
       columnChart.x = 100;
       columnChart.y = 85;
       columnChart.dataTipFunction = tipFeedback;
       columnChart.showDataTips = true;
   var catAxis:CategoryAxis = new CategoryAxis();
       catAxis.categoryField = "title";
   columnChart.horizontalAxis = catAxis;
   var col:ColumnSeries = new ColumnSeries();
       col.yField = "data";
       col.xField = "title";
   columnChart.series = [col];
   // add a lengend
   var legendAnnualBen:Legend = new Legend();
       legendAnnualBen.dataProvider = columnChart;
       legendAnnualBen.x = 700;
       legendAnnualBen.y = 140;
   columnContainer.addChild(columnChart);
   columnContainer.addChild(legendAnnualBen);
}

In MXML, the columnContainer is the id of any container from a Canvas to a VBox, to a … any container you wish that has the id name “columnContainer”

enjoy.

Similar to last week, I gave the raw basis of a LineChart, this week I’ll post on how to render a pieChart, slightly different… here goes, same dataProvider

private function getDataProvider():ArrayCollection {
   var arr:Array = [];
   arr.push({title: “Benefit 1″, data: 2});
   arr.push({title: “Benefit 2″, data: 5});
   arr.push({title: “Benefit 3″, data: 6});
   arr.push({title: “Benefit 4″, data: 3});
   return new ArrayCollection(arr);
}

the pieChart is the following:

private function drawPieChart():void {
   var dummyData:ArrayCollection;
       dummyData = getDataProvider();
   var series:PieSeries;
       series = new PieSeries();
       series.nameField = "title";
       series.field = "data";
       series.filters = [];
   pieChart = new PieChart();
   pieChart.percentWidth = 60;
   pieChart.percentHeight = 60;
   pieChart.showDataTips = true;
   pieChart.dataProvider = dummyData;
   pieChart.series = [series];
   pieChart.y = 75;
   pieChart.x = 70;
   var legendPie = new Legend();  // add a legend to your chart
       legendPie.dataProvider = pieChart;
       legendPie.x = 516;
       legendPie.y = 134;
   chartContainer.addChild(pieChart);
   chartContainer.addChild(legendPie);
}

The ‘chartContainer’ is the id of a container say of, a canvas or any other sort of container you wish. Enjoy.

Hello Chaps,

Below you’ll find a quick and simple Line Chart in Actionscript. You need to instantiate an Array Collection of data, here’s my dummy data;

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 arr:ArrayCollection = new ArrayCollection;
       arr = getDataProvider();

   var lineChart:LineChart = new LineChart();
       lineChart.dataProvider = arr;
       lineChart.percentWidth = 60;
       lineChart.percentHeight = 60;
       lineChart.x = 100;
       lineChart.y = 85;
       lineChart.showDataTips = true;

   var lineSeries:LineSeries = new LineSeries();

       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);
}

Add lineContainer to the id of any container you want, and run/debug.