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

Get Your Charts in a Flash!, Part 3

By Pallav Nadhani


  • Read Part 1
  • Read Part 2

  • In Part 2 we examined how to create a simple chart using the Flash Charting Components. In this part we'll examine how to create dynamic charts.

    FlashCharts - The High-Level Objective
    Before we begin dissecting how to create dynamic charts with the Flash Charting Components, let's first take a moment to examine the objectives of the FlashCharts we will be creating. First, understand that FlashCharts will be a Flash MX movie that will accept an XML document from a server-side application with a pre-defined structure containing the graph parameters. This Flash MX movie will then parse the XML file and then render the graph based on those values. First, we will see how to use a static XML document to generate graphs. Following that, we'll move to having dynamic XML files built on the server-side, thereby allowing for dynamic graphs!

    The entire data communication model can be visualized as illustrated in the diagram below:

    The FlashCharts communication model.

    In words, this model can be described in the following steps:

    1. The HTML wrapper page in which FlashCharts is embedded sends the Data Source URL to FlashCharts via the Object/Embed method (i.e., by appending the Data Source URL as in a querystring to the end of the file name FlashCharts.swf - we'll soon cover this topic). For example, this feat could be accomplished by the following HTML content:

      <OBJECT ...
        <PARAM NAME=movie VALUE="FlashCharts.swf?dataUrl=Data.xml">
        ... 
      </OBJECT>
      

    2. FlashCharts receives the Data Source URL, and then sends a request to the URL to send the XML Content.
    3. The page at the Data Source URL receives the request to serve XML Content. It queries the database, does some processing, generates an XML Document, and sends it to the output stream.
    4. FlashCharts receives the XML Content from the page at Data Source URL, parses it and then displays the graph according to the parameters and data contained in the XML Document.

    While this may all seem a bit confusing right now, as we explore each of these pieces independently you will see how they all fit together. (If you have already read my first article, Real-time Animated Graphing using Flash MX, you will notice the similarity between FlashChart's communication model and FunkyChart's communication model. (FunkyChart was the name of the charting component in my first article.)

    Let's now delve into the structure of the XML file that is used to relay plotting information from the Web server to the Flash movie.

    The XML Structure
    Recall that the FlashCharts flash file, which executes on the client's machine, communicates with the Web server to obtain the data it needs to plot. This data is exchanged in a predefined XML format. An example of this format is given below:

    <graph chartType="PIE" caption="Hits for the first half (in thousands)" 
                  xaxisname="Month" yaxisname="Hits" >
       <set name="Jan" value="20" link="showBreakUp.asp?month=Jan"/> 
       <set name="Feb" value="9" link="showBreakUp.asp?month=Feb"/> 
       <set name="Mar" value="7" link="showBreakUp.asp?month=Mar"/> 
       <set name ="Apr" value="40" link="showBreakUp.asp?month=Apr"/> 
       <set name="May" value="23" link="showBreakUp.asp?month=May"/> 
       <set name="Jun" value="34" link="showBreakUp.asp?month=Jun"/> 
       <set name="Jul" value="19" link="showBreakUp.asp?month=Jul"/>
    </graph>
    

    As you can see, the root element, <graph>, has a number of attributes worth discussing:

    • chartType - The chartType attribute of the <graph> element tells the graph as to which graph (bar, pie or line) should be displayed by default. There are three values which this attribute can take: bar, line or pie. You can assign any of these three values to the chartType attribute to determine which type of graph would show up at the first instant. If no value is supplied for this attribute, the default value is taken as bar.
    • caption - specifies the caption (heading) of the graph, which is displayed on the top of the graph canvas.
    • xaxisname - specifies the x-axis caption of the graph
    • yaxisname - specifies the y-axis caption of the graph

    The <graph> node's attributes merely specify aesthetic settings. The actual plotted data for the graph is contained within individual <set> elements, which is a childnode of the root <graph> element. The attributes used to define the data are:

    • name - The value displayed on the x-axis for the particular data point
    • value - The value displayed on the y-axis for the particular data point
    • link - This attribute defines the hotspots in your graph. The hotspots are links over the data sets (Bars, Lines and Pie).

    Now that we've looked at the format of the data exchanged between the Web server and the Flash movie, let's look at the code needed in the Flash movie to actually render the graph from the XML data.

    Flashing FlashChart
    To create FlashChart, once again open Flash MX and follow the steps below:

    1. Create a new movie with the dimensions 400x300 pixels.
    2. Open the Scenes Panel for this movie (Modify > Scenes). Rename the existing scene to Loading and create a new scene Chart.

      The Loading scene will be used to render some loading sequences to the user while the movie is being downloaded to the client's machine. And, the chart scene will actually contains the Chart Objects and the script.

    3. In the Loading scene, render the loading sequence. There are different kind of loading sequences you could write. In my movie, I have written a simple clock type animation which will be shown to the user until the movie has been loaded. We wouldn't go into the detail of creating the loading scene. You could download the Flash movie and refer to it to check this part out.
    4. Switch back to the Chart scene.
    5. Create a layer and keyframe structure as under. Right now, don't worry about what you have created - we'll get to them soon.
    6. Name the frames of the Labels layer in the following sequence:

      FrameFrame NameDescription
      Frame 1 LoadXML This frame actually loads the XML data.
      Frame 2 LoadingXML This a recursing frame that displays a XML Loading message to the client.
      Frame 3 ParseXML In this frame, we'll parse the XML data received and store it in arrays and variables.
      Frame 4 SetDefaults In this frame, we'll determine which chart to show.
      Frame 5 BarChart The Bar Chart frame.
      Frame 6 LineChart Line Chart frame
      Frame 7 PieChart Pie Chart frame
      Frame 8 XMLError This frame would be shown to the user if the XML received by FlashCharts was malformed or contained an error.

    We are now ready with the basic setup for FlashCharts. Next, we'll see how to load and parse the XML document that would be responsible for rendering the chart. We'll examine how to accomplish this in Part 4.

  • Read Part 4!


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


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