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:
Create a new movie with the dimension 400x300 pixels. Dimension can be changed by going to
Modify > Document.
Rename the default layer given to Bar Chart. To rename a layer, simply double click on the layer
name and enter the new name.
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.
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.
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();
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.
