Skip to content

Simple charts with Open Flash Charts

Open Flash Chart is Open Source project which helps developers to add beautiful charts to their web pages or applications. It is available under LGPL license. Open Flash Chart (http://teethgrinder.co.uk/open-flash-chart-2/) is a collection of Flash applets that you embed in your web page, and which fetch data from the web server to display.

New version (2) uses JSON data and ActionScript 3 for generating charts. As the name says, you just generate some JSON encoded data and with a touch of JavaScript you got yourself a great chart.

I will show you a simple example of using the script to create a small chart. We will use included PHP library (it also has Perl, Python, Ruby, .NET, Google Web Toolkit and JAVA libraries). So go to http://teethgrinder.co.uk/open-flash-chart-2/ and download the code, unzip it somewhere.

Let us generate some dummy JSON data:

[code lang=”php”]
set_values( array(1,2,3,4,5,6,7,8,9) );

$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $bar );

echo $chart->toString();
?>
[/code]

Save this as data.php in same folder as you unzipped the script.

This PHP code will generate JSON data that looks something like this:

[code lang=”php”]
{“elements”:[
{“type”:”bar”,
“values”:[11,3,14,4,17,11,14,17,0]}],
“title”:{“text”:”Wed May 26 2010″}
}
[/code]

Now the HTML and JavaScript part:

[code lang=”html”]




Simple charts with Open Flash Chart | Codeforest


Hello World



[/code]

As you can see, we are embedding the chart using swfobject (it is also included) so IE will not bother us with messages. We are giving SWFobject some parameters like width and height and id of element in which the chart will be generated.

Save this file as index.php in the same folder where you unzipped the library.

The demo for this is available here

Pretty neat. The biggest advantage of Open Flash Chart is speed and ease of implementation.

You can see a more complex example here

Tags: