flexr

ColumnChart purely in ActionScript

leave a comment »

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.

Written by Jester theFool

June 23, 2008 at 6:04 pm

Leave a Reply