April 5, 2006

Create Flash charts with PHP/SWF Charts

Author: Mayank Sharma

PHP/SWF Charts brings interactive eye candy to your charts and graphs. This PHP tool generates 20 types of charts, including line, column, 3-D column, pie, 3-D pie, bar, scatter, and polar charts.

Rather than creating simple images, PHP/SWF Charts outputs Flash movies, which you can view in a browser that's running at least version 6 of Adobe Flash Player. You can click and drill down on the charts, which feature animated transitions and present values on mouse hover. You can update the charts with live data without reloading the page.

PHP/SWF Charts isn't an open source tool, but you can download it for free and use it with certain restrictions. Simply download one of the three archives (around 164KB each), unzip it, and place charts.swf, charts.php, and the charts_library/ directory on your Web server.

Now you're ready to start charting. Say you want to create a chart that plots users' display resolution according to W3Schools' browser statistics. Use this code to generate the chart:

//browser_chart.php -- Creates the chart

<?php
include "charts.php";

//setting the chart's attributes
$chart[ 'axis_value' ] = array ( 'max'=>60, 'font'=>"arial", 'bold'=>true, 'size'=>10 );


$chart[ 'draw' ] = array ( array ( 'type'=>"text", 'rotation'=>-90, 'bold'=>true, size=> '22', 'x'=>10, 'y'=>230, 'width'=>300, 'height'=>200, 'text'=>"Display Resolutions", 'h_align'=>"left", 'v_align'=>"top" ),
array ( 'type'=>"text", 'color'=>"000033", 'alpha'=>50, 'font'=>"arial", 'rotation'=>-90, 'bold'=>true, 'size'=>12, 'x'=>7, 'y'=>210, 'width'=>300, 'height'=>55, 'text'=>"(per 100 visits)", 'h_align'=>"center", 'v_align'=>"middle" ) );

//throwing in the data
$chart ['chart_data'] = array ( array ( "",         "2003", "2004", "2005", "2006" ),
                                  array ( "640x480",     2,     1,     0,     0  ),
                                  array ( "800x600",   47,     37,     30,     20  ),
                                  array ( "1024x768",    40,     47,      53,     57  ),
                                  array ( "Higher",     6,      10,     12,     17 ),
                                  array ("Unknown",     5,      5,      5,      6),
                                );

//send the data to charts.swf
SendChartData ( $chart );
?>

In this file, you specify the data you need the chart to plot. The chart can take data through PHP variables, as shown, or from a database. You also specify the various attributes of the chart, including its type, color, and axis information. The Tutorial and Reference sections on the project's Web site explain the attributes in detail.

Now create a file that displays the chart inside a Web page:

//display_chart.php -- Displays the chart

<HTML>
<BODY bgcolor="#FFFFFF">

<?php

//include charts.php to access the InsertChart function
include "charts.php";


//include the flash file, the charts library and the php file that has the chart details
echo InsertChart ( "charts.swf", "charts_library", "browser_chart.php" );


//footer information

echo "<p><font size=-10>source: <a href=\"http://www.w3schools.com/browsers/browsers_stats.asp\">W3C Browser Statistics</a></font></p>";

?>

</BODY>
</HTML>

This file can also be an HTML document if you've configured your server to process PHP inside HTML pages.

That's all there is to it. If you still aren't impressed, take a look at the gallery of charts you can create using PHP/SWF Charts.

Click Here!