I always admired open source development and open source developers and their attitude to give their best to world in every way they can. One such effort is Open Flash Charts by John Glazebrook.
Open Flash Chart is a library that provides cool flash charts for your web pages. It supports different charts type like line charts, bar charts, pie charts and many more. The installation and usage is admirably simple. The site provides nice demos, wrapper classes and code samples that you can use as head start.
To use open flash chart you just need to follow below steps –
- Download the latest OFC library from site download section
- Unzip the files and put it under your websites document root.
- Add few lines of codes in to your web page.
- Prepare and provide proper data paths for charts to be render and your done.
When you will visit your web page you can see the charts is on and working.
Let’s see how the code is added and how it will look like:
"open-flash-chart.swf", "my_chart", "550", "200",
This is the code that you need to put in your web pages head element. This will render that chart in the element preferably DIV with id my_chart, and the data-file option to swfobject is the actual data for chart, you can see how the JSON data is generated using the helper classes available in the download section. You can see actual JSON data here
Here is some snippet of the code that generates JSON data. [Courtesy OFC Site]
$data_1 = array();
$data_2 = array();
$data_3 = array();
for( $i=0; $i<6.2; $i+=0.2 )
$data_1 = (sin($i) * 1.9) + 7;
$data_2 = (sin($i) * 1.9) + 10;
$data_3 = (sin($i) * 1.9) + 4;
$title = new title( date("D M d Y") );
$line_1 = new line_dot();
$line_1->set_values( $data_1 );
$y = new y_axis();
$y->set_range( 0, 15, 5 );
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $line_1 );
$chart->set_y_axis( $y );
Finally here is the end product –
This graph is click-able and it displays some nice tooltips when you take your mouse over the chart and data points.
P.S. If you don’t find the class graph in your downloaded files, please try searching this file in the previous version of the OFC because when I downloaded the charts library I couldn’t find the class graph, so I had to write my own wrapper and render classes. I will try and share those as time permits.