in detail
the centre for new media

Multipurpose Flash 6 Bar multiChart

Flash multiChart allows multiple charts on one web page displaying different data. (This is similar to the single use chart but requires a simple addition to the html code that loads the Flash).

This is an example of a multipurpose bar chart written with Flash MX. It can be used to simply create a personalized bar chart, graphically displaying 'positive numbers' with any number of individual entries, to help make the information more assessable to the viewer. The chart can be scrolled if there are more bars than will fit on the screen at once.
The captions and chart data are loaded into the Flash from a separate XML file named 'data1.xml' (or 'data2.xml' etc. see below) created with a simple text editor. The Flash sorts the data and displays the individual bars to the correct height in proportion to each other.
The highest bar shown is automatically scaled to the highest value from the data, with the value at the base of the chart set by the author of the XML (i.e. it doesn't have to be zero). For example, say the highest value is 200 and the author sets the 'lowest' attribute in the XML file to 50, the bars would be drawn in proportion from 200 the highest bar, to 50 the base of the chart.

A text box beneath each individual bar indicator is controlled with the 'label' attribute and can show one of two types of information. Either the data figure for that bar in numerals, or a simple sequential count.

The captions are dynamic and written by the author of the XML file.

Example using the information from the xml file data1.xml:

Example using information from the xml file data2.xml:

The xml files have to be saved within the same directory as the html file that actually loads the 'chart.swf' file, for the actionscript in the Flash movie to find it (in this example, in the same directory as this html file you are viewing now 'index.html', as it is the file that loads the 'multichart.swf' file).
The individual data items (named 1, 2, 3 etc. in the example shown below) do not have to be numerically or sequentially named, but the caption's attribute names do have to be as shown although of course the content can be the author's own, i.e. 'title' must remain title but any text can be inserted between the " " marks.
The 'lowest' attribute is normally 0. It is not displayed but is used by the Flash to determine the 'base line' value of the chart, it must be either 0, or equal or lower than the lowest data number for the chart to display properly.
The 'label' attribute controls what will be displayed in the text field beneath each bar. It should be set to "1" to display the data figure for each individual bar in numerals, or to "0" to display a simple sequential count.

Shown below is an example listing of the 'data1.xml' file which has 100 entries. For each chart on a web page a separate xml file is created and named to link it to an individual chart (i.e. data2.xml, data3.xml etc.).

<?xml version="1.0"?>
< item title="My Incredible Expenses" side="Outgoings" high="£1000s" low="£0" caption="Showing Six Month's Expenses" left="Scroll to January 2003" right="Scroll to July 2003" lowest="0" label="1">
<data 1="150" 2="100" 3="50" 4="25" 5="12" 6="6" 7="3" 8="1" 9="5" 10="50" 11="5" 12="5" 13="5" 14="5" 15="5" 16="5" 17="10" 18="5" 19="5" 20="30" 21="5" 22="5" 23="5" 24="50" 25="10" 26="0" 27="0" 28="5" 29="5" 30="25" 31="0" 32="10" 33="20" 34="15" 35="0" 36="30" 37="15" 38="0" 39="5" 40="10" 41="5" 42="5" 43="70" 44="20" 45="10" 46="15" 47="5" 48="100" 49="5" 50="100" 51="5" 52="10" 53="5" 54="5" 55="5" 56="75" 57="20" 58="5" 59="5" 60="50" 61="5" 62="5" 63="5" 64="5" 65="5" 66="5" 67="10" 68="5" 69="5" 70="30" 71="0" 72="0" 73="0" 74="0" 75="10" 76="0" 77="0" 78="5" 79="5" 80="25" 81="0" 82="10" 83="20" 84="15" 85="0" 86="30" 87="15" 88="0" 89="5" 90="10" 91="5" 92="5" 93="70" 94="20" 95="10" 96="15" 97="5" 98="100" 99="100" 100="5"/>
< /item>

Shown below is an example of the standard html to include a Flash movie in your web page. Each chart would have all the code below. The part that 'links' each individual chart with its own data file is ?id=1 directly after the name of the Flash movie (in this case multichart.swf). This complete piece of code needs to be duplicated and changed in both places as shown in red, for each separate chart ( e.g. ?id=1, ?id=2, ?id=3 etc.). Note: unless you want to use charts with different backgrounds, you only need the one swf file - just load it with the different code that parses it a unique id number to match the xml file.

<p align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=",0,29,0" width="620" height="180">
<param name="movie" value="multichart.swf?id=1">
<param name="quality" value="high">
<param name="menu" value="false">
<embed src="multichart.swf?id=1" width="620" height="180" quality="high" pluginspage="" type="application/x-shockwave-flash" menu="false"></embed>

DOWNLOADS - note right click on the link and choose to save/download to disk:

multichart.swf - with blue background (20KB)

multichart.swf - with white background (20KB)

data1.xml - example of the XML file that you can change for your own use (2KB)



the vault
The Vault



go to the k m i web site