on Expert

Simple charts with Open Flash Charts

0 comments
chart
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon

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:

<?php

include 'php-ofc-library/open-flash-chart.php';

// generate some random data
srand((double)microtime()*1000000);

$max = 20;
$tmp = array();
for( $i=0; $i<9; $i++ ) {
  $tmp[] = rand(0, $max);
}

$title = new title( date("D M d Y") );

$bar = new bar();
$bar->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();
?>

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:

{"elements":[
    {"type":"bar",
    "values":[11,3,14,4,17,11,14,17,0]}],
    "title":{"text":"Wed May 26 2010"}
}

Now the HTML and JavaScript part:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple charts with Open Flash Chart | Codeforest</title>
<link rel="stylesheet" type="text/css" href="my.css">
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
  "open-flash-chart.swf", "my_chart", "550", "200",
  "9.0.0", "expressInstall.swf",
  {"data-file":"data.php"}
  );
</script>
</head>
<body>
<div id="container">
    <p>Hello World</p>
    <div id="my_chart"></div>
</div>
</body>
</html>

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

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon



Comments are closed.