Build a Better Charting Engine Using Flash and XML

Implementation Methods
Now that your movie is Web-ready, you need to embed it into a HTML page, so people can see it! Use the following code:


<HTML>
... Other HTML Content ...
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="350" HEIGHT="280" id="FCChart" ALIGN="">
<PARAM NAME=movie VALUE="FCChart.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="FCChart.swf" quality=high bgcolor=#FFFFFF WIDTH="350" HEIGHT="280" NAME="FCChart" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
... Other HTML Content ...
</HTML>

To correctly display a Flash movie in a browser, your HTML page should contain two specific tags: <OBJECT> and <EMBED>. The <OBJECT> tag is used by Internet Explorer and the <EMBED> tag is used by Netscape Navigator. Using only one tag may cause browser incompatibility, so always use both. Place the <EMBED> tag within the <OBJECT> tag as shown in the example. ActiveX-enabled browsers will ignore the <EMBED> tag inside the <OBJECT> tag. Netscape and old Microsoft browsers will not recognize the <OBJECT> tag and will use only the <EMBED> tag to load the Macromedia Flash Player.

In the above code, the XML data required by the chart is missing. To include the XML data, use the FlashVars property, which you can find in the complete code for embedding the Flash Column Chart (Listing 7).

Charting with Dynamic Data
This involves using the Flash Column Chart with data pulled from a database. This example uses Microsoft Access as the database and ASP as the server-side script, however, any database and any scripting language will do as long as you're able to output proper XML.

The application you'll be creating will show the outputs of various factories of a company on a single chart distributed on the date factor. The user will select a factory from the list of factories as well as a date range, and receive a chart of the work done in that factory.

Figure 5. FactoryDB.mdb: Here's the structure for the database.

Figure 6. It works! This shows FactoryDB.mdb in working mode after it's been fed dummy data.

The Database
The database for this example is named FactoryDB.mdb. It's a very simple database with just two tables:

Factory_Master: the master table that contains an entry for each factory, represented by an Id and its name.
Factory_Output: the main data table (with a FK to Factory_Master on the field Id) that contains two other fields, the date and the number of output units for that particular date.

Figure 5 shows the database structure. Figure 6 shows the database in working mode after it's been fed dummy data.