Browse DevX
Sign up for e-mail newsletters from DevX


Build a Better Charting Engine Using Flash and XML : Page 7

When you need to display data as charts in a Web app, forget about precompiled DLLs, assemblies, and expensive third-party components. This article will teach you how to use Flash MX to take data from any server-side script and render it in sleek-looking, animated charts.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Exporting the Movie
Now that you're finished building the actual chart, you've want to make it Web-ready. Exporting the file converts your movie into a .swf file for use in Web pages. To do this, simply go to File—>Export Movie.

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.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date