Warning this is an old version.

Take me to the latest version

Tutorial 2

1: Install files

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.

Remember how we used this HTML to display the chart?

Code:
<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 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'

Code:
<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>

Check that this worked, chart-2.html?ofc=data.json.

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

Tutorial 3

Support This Project
Adverts:


Open Flash Chart logo by numb.me.uk. | Syntax highlights are by GeSHi