Beyond the DataGrid Control: Better Data Visualization with Flex Charting Components

Creating the Chart

In your own applications you can use charts to display data you've loaded from one of the Flex network service components: WebService, HTTPService, or RemoteObject. For this tutorial, start your application by including an ActionScript file that will generate some dummy data:

1. Unzip the flex_charting_tutorials.zip file into the document root of your Flex 1.5 installation.
2. Create a new file and save it as ZingerChart.mxml in the flex_tutorials directory.

3. At the beginning of the file, insert a basic application skeleton with a reference to the ActionScript file that is part of this tutorial's sample files:

   <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" initialize="initDummyData();" width="100%" height="100%">
   
       <mx:Script source="zingerChartFunctions.as" />
   
       <mx:Panel title="sample chart" width="100%" height="100%">
       </mx:Panel>
   
   </mx:Application>

   Note: You can find the ActionScript file in the sample flex_charting_tutorials.zip file linked to in the "Requirements" section at the beginning of this article.

4. Add a simple ColumnChart control inside the panel and connect it to a simple dataProvider object. The chart dataProvider property should be the same format as that of the DataGrid control: an Array object or some other object implementing the simple dataProvider API:

   <mx:ColumnChart dataProvider="{zingerManufacturingData}" width="100%" height="100%" >
   </mx:ColumnChart>

   Note: zingerManufacturingData is defined in zingerChartFunctions.as.

5. Save your application and load it in the browser. Your chart should look similar to Figure 2.

   

   Figure 2. This is an empty, unstyled column chart

   That's a good start but it doesn't exactly look like a column chart yet. Unlike the DataGrid control, the charting components make no assumptions about which fields of the dataProvider object to render. You'll add the columns in a moment; for now, let's focus on getting those axes in shape.

Page 2 of 7

Previous Page

Next Page