Get Your Charts in a Flash!, Part 2

In Part 1 we examined the software requirements for FlashCharts, as well as how to download the Flash Charting Components. In this part we'll look at using the Flash Charting Components to create a simple Flash chart.

Creating Your First Chart
To create your first chart, open Macromedia Flash MX and follow the steps below:

1. Create a new movie with the dimension 400x300 pixels. Dimension can be changed by going to Modify > Document.

2. Rename the default layer given to Bar Chart. To rename a layer, simply double click on the layer name and enter the new name.

3. Open the Components Panel (Window > Components or Ctrl+F7) and from the drop down select Flash Charting Components to see a list of components available under this category.
   

4. Drag the bar chart component from Components Panel on the stage and set its instance name to MovChart. Instance name can be set by using the Properties Inspector for a particular item. Also, set the size of this chart to 390x290 pixels.

5. It's now time to write some ActionScript to manipulate and bind this chart object. Create a new layer and name it as Actions. Open the Actions Panels (F9) for the first keyframe of this layer and enter the following script:

   //First, remove all the items present by default on the chart MovChart.removeAll(); //Set the chart title MovChart.setChartTitle("My First Chart"); //Set the x-axis title MovChart.setXAxisTitle("X-Axis Title"); //Set the y-axis title MovChart.setYAxisTitle("Y-Axis Title"); //Now, we'll add some data to it MovChart.addItem({label:"Jan",value:23}); MovChart.addItem({label:"Feb",value:54}); MovChart.addItem({label:"Mar",value:32}); MovChart.addItem({label:"Apr",value:75}); MovChart.addItem({label:"May",value:73}); MovChart.addItem({label:"Jun",value:34}); //Finally, stop stop();

6. Finally, export the movie (File > Export Movie). When you now see the exported movie, you'll get a chart as under:
   

Now that we have seen how to create a very basic chart, let's continue with our lesson and look at how to create dynamic charts. We'll tackle creating dynamic charts in Part 3.