Skip to content

ColumnChart purely in ActionScript

June 23, 2008

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.

Advertisements

From → Uncategorized

4 Comments
  1. Hey man!!! Thanks!!!

    I’m looking for this for weeks …

    Thanks

  2. Kumar permalink

    Am i missing something here? can you please help me with this?

    package MyComponents
    {
    import mx.charts.CategoryAxis;
    import mx.charts.ColumnChart;
    import mx.charts.Legend;
    import mx.charts.series.ColumnSeries;
    import mx.collections.ArrayCollection;

    public class MyColumnChart
    {
    public function MyColumnChart()
    {
    super();
    }
    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);
    }

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

    MXML Code

  3. Kumar permalink

    MXML Code

  4. Kumar permalink

    got it…thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: