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 file and 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.

So, once you have open-flash-chart.swf in the root directory of your web server, copy the folder ofc-library to the root directory. Set the permissions of this folder and the .php files inside it so they will run correctly.

2. The Code

Now we can start coding!

First create a new PHP file that will show a simple ‘hello world!’ page. Copy the following into a new file, save it as ‘chart.php

<html>
<head>
</head>
<body>
<?php

echo 'Hello World!';

?>
</body>
</html>

Test this page by browsing to it from Friefox: http://your.web.site.com/chart.php.

When that is working, insert the following code into chart.php:

Create the flash object
<?php
include_once 'ofc-library/open_flash_chart_object.php';
open_flash_chart_object( 500, 250, 'http://'. $_SERVER['SERVER_NAME'] .'/chart-data.php', false );
?>

This takes the width and height of the flash object, the last parmeter is the URL of your data file. Ignore these for now.

Save the file and browse to it, what you should see on your test page is this:

Something is working! Open Flash Chart has downloaded OK, but it can not find the data file.

Now, right click on the page and ‘view source’. You should see something similar to:

<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=”400″ height=”300″ id=”graph-2″ align=”middle”><param name=”allowScriptAccess” value=”sameDomain” /> <param name=”movie” value=”open-flash-chart.swf?width=500&height;=250&data;=https://www.teethgrinder.co.uk/open-flash-chart/data-2.php” /> <param name=”quality” value=”high” /><param name=”bgcolor” value=”#FFFFFF” /> <embed src=”open-flash-chart.swf?width=500&height;=250&data;=https://www.teethgrinder.co.uk/open-flash-chart/data-2.php” 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>

Ugh! Crazy! This is the HTML to insert Open Flash Chart into your HTML page.

3. The Data File

Open Flash Chart downloads a data file, reads it and then displays it as a chart. The data file has a very specific format, it is readable and possible to create by hand but we will use the PHP helper class to build it.

Create a new file in the root of your webserver called ‘chart-data.php‘.

Note in the PHP code you copied into your web page (chart.php), we passed the URL of the data file into the function:

open_flash_chart_object( 500, 250, 'http://'. $_SERVER['SERVER_NAME'] .'/chart-data.php', false );

This is the URL Open Flash Chart is going to download the data from.

We are going to copy the data file I used to create the chart at the top of this page. This file is located: https://www.teethgrinder.co.uk/open-flash-chart/data-2.php, click on the link to see the data file produced.

When the PHP file, data-2.php is accessed it outputs the chart data. The source of data-2.php looks like this:

data-2.php
<?php

// generate some random data:

srand((double)microtime()*1000000);

$max = 50;
$data = array();
for( $i=0; $i<12; $i++ )
{
$data[] = rand(0,$max);
}

// use the chart class to build the chart:
include_once( 'ofc-library/open-flash-chart.php' );
$g = new graph();

// Spoon sales, March 2007
$g->title( 'Spoon sales '. date("Y"), '{font-size: 26px;}' );

$g->set_data( $data );
// label each point with its value
$g->set_x_labels( array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec' ) );

// set the Y max
$g->set_y_max( 60 );
// label every 20 (0,20,40,60)
$g->y_label_steps( 6 );

// display the data
echo $g->render();
?>

To see the data produced : data-2.php, then ‘view source’.

Cut and paste this into your data file, chart-data.php, and save it. Now browse to http://your.web.site.com/chart-data.php file using Firefox (or IE) to check that your data looks like mine: https://www.teethgrinder.co.uk/open-flash-chart/data-2.php.

Your data file is now set up. Now browse to the first page you created: http://your.web.site.com/chart.php, this should now display a chart of ‘Spoon Sales’.

To show a different graph with different data you need to edit your chart-data.php page. All of the tutorials show different charts and the code that you need to put into your data file to make them work.

Of course you can move the .swf and .php files anywhere you want on your server. You will have to change all the include_once paths to reflect your changes. You may also have to edit the ‘ofc-library/open_flash_chart_object.php’file, because it assumes that open-flash-chart.swf is in the root directory.

But ultimately, I don’t want to over explain any of this. I hope the code examples show you how easy it is to make a chart. And if you have any questions drop me an email.

Help support the project: Support This Project

Adverts: