To read the article online, visit http://www.4GuysFromRolla.com/webtech/032603-1.2.shtml

Get Your Charts in a Flash!, Part 2

By Pallav Nadhani


  • Read Part 1

  • 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. Set the movie dimensions to 400x300 pixels.

    3. Rename the default layer given to Bar Chart. To rename a layer, simply double click on the layer name and enter the new name.
    4. Specify the name of the first layer.

    5. 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.

      Select the Flash Charting Component.

    6. 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.
    7. 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();
      

    8. 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.

  • Read Part 3!


  • Article Information
    Article Title: 4GuysFromRolla.com - Get Your Charts in a Flash!, Part 2
    Article Author: Pallav Nadhani
    Published Date: Wednesday, March 26, 2003
    Article URL: http://www.4GuysFromRolla.com/webtech/032603-1.2.shtml


    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers