Open Flash Chart - Tutorials

In this tutorial we are going to use Javascript to display the flash application, this script is not essential, but is extremely useful. Trust me. (You can skip to tutorial 3 if you want)

In IE, when you mouse over the chart, you will see a message "Click to activate this control". For more information about this read the swfobject site.

Due to various stupid legal things, IE can not 'start' the chart without the user clicking on it. But don't worry, we can use a little bit of Javascript to do this for us.

The Javascript is already written by the nice people at swfobject! And it is included in the download .zip inside the 'js' folder.

Copy the folder js to the root directory of your webserver. Set the permissions of this folder so the Javascript files will download correctly.

This goes into the <head> of the page:

<html>
<head>
</head>
<body>
 
<p>Hello World</p>
 
 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
        width="500"
		height="250" id="graph-2" align="middle">
 
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="open-flash-chart.swf" />
	<param name="quality" value="high" />
	<embed src="open-flash-chart.swf"
		   quality="high"
		   bgcolor="#FFFFFF"
		   width="500"
		   height="250"
		   name="open-flash-chart"
		   align="middle"
		   allowScriptAccess="sameDomain"
		   type="application/x-shockwave-flash"
		   pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
</body>
</html>

This writes the chart into a div with id="my_chart", right click and view source to see it in action, [the tutorials have more details]

This is how you do the same thing, but using swfobject.js, the Javascript will write the same HTML as we did into the div marked 'my_chart'

This goes into the <head> of the page:

<html>
<head>
 
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "250", "200", "9.0.0");
</script>
 
</head>
<body>
 
<p>Hello World</p>
 
 
<div id="my_chart"></div>
 
 
</body>
</html>

This writes the chart into a div with id="my_chart", right click and view source to see it in action, [the tutorials have more details]

The next tutorial will show you how to pass the location of the data file to the chart without using the URL.

Tutorial 2

1: Install files