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‘
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:
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: http://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:
$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
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: http://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.