Tutorial 1: How it works.

In this tutorial we are going to try and get the following chart onto your web site:

1: Install files

Before we can start you should have downloaded the Open Flash Chart .zip file.

Open the .zip, look in version-2, copy the open-flash-chart.swf to the root folder of your web server.

You can move all the files to wherever you want on your webserver, but for this tutorial lets keep everything nice and simple. When you finish the tutorial and have a working example, then move the files to a better location. If anything stops working, you know what file you moved and so should be able to fix the paths.

2. The Code

Now we can start coding!

First create a new HTML file that will show a simple ‘hello world!’ page. Copy the following into a new file, save it as ‘chart.html‘ in the root of your website.

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>

Now browse to this web page, you should see example 1 [this will display an error message!].

Open Flash Chart has looked for chart data in a number of places, but it can not find any so displays an error message. This is exactly what we wanted to see!

The object and embed tags tell the browser to display a flash movie. The name of the Open Flash Chart movie is in both, so the browser downloads, and displays it. (The reason we use two tags is because IE uses one and every other browser uses the other *sigh*)

3. The Data

Next we need to provide it with some data. Open Flash Chart reads JSON data, if you haven’t heard of it don’t worry. JSON is the name of the format that the data takes, here is a simple chart in JSON:

Code:

{
  "title":{
    "text":  "Many data lines",
    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  },
 
  "y_legend":{
    "text": "Open Flash Chart",
    "style": "{color: #736AFF; font-size: 12px;}"
  },
 
  "elements":[
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [9,6,7,9,5,7,6,9,7]
    },
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#CC9933",
      "text":      "Page views 2",
      "font-size": 10,
      "values" :   [6,7,9,5,7,6,9,7,3]
    }
  ],
 
  "x_axis":{
    "stroke":1,
    "tick_height":10,
    "colour":"#d000d0",
    "grid_colour":"#00ff00",
    "labels": {
        "labels": ["January","February","March","April","May","June","July","August","Spetember"]
    }
   },
 
  "y_axis":{
    "stroke":      4,
    "tick_length": 3,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "offset":      0,
    "max":         20
  }
}
 

JSON isn’t supposed to be read and written by humans (we’ll get your server to do this later) but it isn’t too bad.

Next copy the above JSON data into a file and save this as “data.json” in the root of your web server.

Open Flash Chart looks in a number of places for data, one of them is the URL. It looks for a variable called ‘ofc‘ that contains the name of the data file. You have saved the data file to the root of your server so your data file name is ‘data.json‘.

Now browse to your web page. This should still show an error message. Next edit the URL and append ?ofc=data.json(your URL will look like http://example.com/chart.html?ofc=data.json)

You should see a chart like this example 2.

4. Congratulations!

That’s it!

For a giggle you can try editing the .json file, copy it and save is as ‘data-2.json‘, to display your own data edit the “values” : [9,6,7,9,5,7,6,9,7]. It is extremely easy to make a mistake with the data format, in tutorial 3 we will use the PHP library to write the JSON file.

5. Postamble

Note:

  • The ofc variable can be one of may variables, http://example.com/chart.html?x=1&ofc;=data.json&y;=2 will still work.
  • You can move the .json file anywhere and put the full path to it in the ofc variable, http://example.com/chart.html?ofc=../stuff/../data.json
  • The path and file name must be URL encoded. When typing the URL into the web browser, it takes care of this but this may cause you some minor problems if you plan on doing this via code.

A brief recap of what is going on:

  1. The bowser requests chart.html
  2. It finds the flash tags and requests the open-flash-chart.swf flash application. Downloads it.
  3. Open Flash Chart looks in the URL for the data file. It downloads it.
  4. Open Flash Chart reads the JSON and displays the chart.