When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips

Sections:
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
XML Info
Information:
Feedback
Author an Article
ASP ASP.NET ASP FAQs Message Board Feedback
Print this page.
Published: Wednesday, March 26, 2003

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.

    - continued -

    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!


  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article