Open Flash Chart
Support This Project :: Home - Tutorial 2
Info: Open Flash Chart 2 is out. Version 1.x and these pages will never disappear and the charts will continue working forever, but further development on 1.x has stopped. Take a look at version 2 here Open Flash Chart 2.

Click to activate this control

For this tutorial I need to talk about the mouse over events, so before you start take a look at the line with hollow dots. Change your data file so the line has hollow dots along it:


// generate some random data:


$max 50;
$data = array();
$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 );
$g->line_hollow24'0x80a033''Spoon sales'10 );

// 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_max60 );
// label every 20 (0,20,40,60)

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

To see the data produced : tutorial-data-2.php, then 'view source'.

Now you should have a chart that looks like this:

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 we have included it 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.

Take a look at how we created the Open Flash Chart object:

Create the flash object
include_once 'ofc-library/open_flash_chart_object.php';
open_flash_chart_object500250'http://'$_SERVER['SERVER_NAME'] .'/open-flash-chart/tutorial-data-2.php'false );

To use swfobject, remove the last parameter (false), so it now looks like:

Create the flash object
include_once 'ofc-library/open_flash_chart_object.php';
open_flash_chart_object500250'http://'$_SERVER['SERVER_NAME'] .'/open-flash-chart/tutorial-data-2.php' );

Note: The page will look for the js folder in the same path as it is. If your chart does not display, check the paths.

Now you should see the chart in IE and when you run the mouse over it the tooltips will show up:

Using swfobject is very anoying - I understand your pain. But there isn't much we can do about it, even need to use it. So there we go. Software patients are evil.

There are all sorts of technical opinions on whether to use swfobject. One is that is causes another request to your server for the .js file. This slows the page down a little and increases the load on your server.

If the user has javascript turned off in their browser, the chart will show, but they will have to click on it to activate it.

Help support the project: Support This Project