in detail
the centre for new media

Multipurpose Flash 6 Bar Chart

There can only be one version of this chart on an individual web page. As shown below if more than one appears the same data is shown on both charts. For users who want to make a simple extra alteration to the html link the multiChart version, which allows more than one chart per web page, may be used.

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 'data.xml' 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 with blue background:

Example with white background:

The 'data.xml' file has to be saved within the same directory as the html file that actually loads the 'chart.swf' file, for the actionscript in the file 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 'chart.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 a 'data.xml' file with 100 entries:

<?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 html for including the chart in your web page (the Flash movie must be called chart.swf for this to work, or you may change both its name and the values shown below if you want to use a different name):

<p align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=",0,29,0" width="620" height="180">
<param name="movie" value="chart.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<embed src="chart.swf" 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:

chart.swf - with blue background (20KB)

chart.swf - with white background (20KB)

data.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