LanguagesPHPHow To Create Bar Charts Using PHP/SWF

How To Create Bar Charts Using PHP/SWF

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Quarterly sales figures, industry contacts, profit margin trends… you name it. Data is the lifeblood of any company. All employees, from the intern preparing a Powerpoint presentation for the middle manager to the dogged sales representative trying to woo a major prospect, require easy and convenient access to all manner of corporate information. The first requirement, ease, has long since been resolved by the Internet. These days, corporate data can be accessed from practically anywhere, be it the company intranet, a laptop using a hotel wireless network, or from the back of a taxicab using a cell phone. However, the second requirement, convenience, isn’t so straightforward.

Convenient data access is a tougher problem to solve because users are able to do little with raw data alone. Rather, it needs to be aggregated and massaged in a coherent fashion. Users need to be able to grasp its context easily, and understand how it all relates to the bigger picture. One of the most successful approaches to doing so is by providing users with a way to visualize the data, typically by using spreadsheets or charting (or a combination of both). But, what if you wanted to relieve your users of some of the tedium involved in formatting this data by doing it for them?

In this tutorial, I’ll introduce you to PHP/SWF Charts, a great solution for building PHP- and Flash-driven charts. PHP/SWF supports a wide variety of charting formats, including bar, candlestick, 3D columns, pie, 3D pie, and advanced charts such as scatter, polar, and composites. See the maani.us PHP/SWF gallery for a great compilation of examples. I’ll base the examples found throughout this article on one particular charting format: the bar chart. Although simple, I think you’ll find PHP/SWF can produce particularly compelling bar charts nonetheless.

Although not technically open source, you’re nonetheless able to use and distribute a free version. Paid versions are also available; they grant you additional benefits, including support. See the official PHP/SWF site for more information about your licensing options.

Installing PHP/SWF Charts

Installing PHP/SWF Charts is easy. Just navigate to the official website and download the latest version: http://www.maani.us/charts/index.php?menu=Download. Three formats are available (TAR, ZIP, and SIT), allowing you to choose the archive format most suitable to your operating system (Unix/Linux, Windows, and OS X, respectively).

Next, decompress the download to a directory located somewhere within your web server’s root directory, for instance /usr/local/apache/htdocs/charting/. That’s it! You’re ready to begin using PHP/SWF.

Using PHP/SWF

To create charts using PHP/SWF, you’ll need to create two scripts. The first script is entirely responsible for building the chart. The second is responsible for displaying that chart within the browser. Although seemingly tedious, and certainly a point of confusion among PHP/SWF beginners, this approach results in a clean separation of often complex logic and the display markup used to format the web page and any corresponding charts. How this is done will become clear as you create your first PHP/SWF bar chart.

Building a Bar Chart

Suppose your company was home to a competitive sales team, and a contest was put together to award the quarter’s top sales representative with a trip to Las Vegas. To further ratchet up the pressure, the sales manager wants to make a real-time graph available to the entire company via the corporate intranet. By using PHP/SWF, you easily can create a bar chart displaying the results.

Because PHP/SWF creates charts based on data passed in using arrays, you can create a multi-dimensional array containing each sales representative’s results. In the following script (barchart.php), you’ll also see two other requisite tasks: including the charts.php file, and calling the SendChartData() function, passing in the array you’ve created:

<?php

   // Include the charts.php library
   include "charts.php";

   // Create the array
   $chart['chart_data'] = array ( 
           array ( "", "January", "February", "March" ),
           array ( "John Smith", 124198.42, 200088.34, 412128.99 ),
           array ( "Michael Rodgers", 119099.56, 247998.99,
                   476991.11 )
   );

   // Build the chart
   SendChartData($chart);

?>

Next, you’ll create the script (barchart-output.php) that will display the graph:

<?php

   // Include the charts.php library
   include "charts.php";

   // Display the chart
   echo InsertChart("charts.swf", "charts_library", "example1.php",
                    400, 350);

?>

Call barchart-output.php within your browser and you’ll see the following chart:

Figure 1: Tracking sales data with a vertical bar chart

Want to turn the chart into a horizontal bar chart? Just add the following line to barchart.php following the array:

$chart['chart_type'] = "bar";

Execute barchart-output.php anew and you’ll see the following chart:

Figure 2: Presenting the sales data using a horizontal bar chart

Building a 3D Column Chart

Bar charts are nice, but are lacking in excitement. To really spruce up things, you can add some dimension to the graphs. Modify barchart.php to turn the chart into a three-dimensional version:

<?php

   include "charts.php";

   $chart['chart_data'] = array ( array ( "", "January",
                                          "February", "March" ),
           array ( "John Smith", 124198.42, 200088.34,
                   412128.99 ),
           array ( "Michael Rodgers", 119099.56, 247998.99,
                   476991.11 )
   );

   // Set the chart type
   $chart['chart_type'] = "3d column";

   // Determine how much the chart should be rotated both
   // horizontally and vertically
   $chart['chart_pref'] = array (
          'rotation_x'=>25,
          'rotation_y'=>15 );

   // Set the chart offset, width and height, and shading
   $chart['chart_rect'] = array (
          'x'=>50, 'y'=>50,
          'width'=>300, 'height'=>250,
          'positive_alpha'=>55, 'negative_alpha'=>25 );

   SendChartData($chart);

?>

Load barchart-output.php anew and you’ll see the following chart:

Figure 3: Sprucing up charts by adding some dimension!

Automatically Refreshing the Chart

The quarter is rapidly coming to a close, and the corporate staff’s eyes are glued to the chart. To avoid a slowdown due to employees’ constant navigation to the chart, the sales manager has decided to project the chart onto the office wall. However, the chart won’t be updated unless somebody regularly refreshes the browser. To remedy this problem, you can use PHP/SWF’s “live update” feature, automatically updating the chart according to a specified time frame. For instance, to update barchart-output.php every 15 seconds, add the following array attribute to barchart.php:

$chart['live_update'] = array ( 'url'=>"barchart.php?time=".time(),
   'delay'=>15);

To prove this is working as expected, once the chart loads change one of the array values to something significantly different from its original value, and save the script. You’ll see that after 15 seconds the chart will reload with the new information.

Conclusion

PHP/SWF is an amazingly powerful charting library, and what I’ve demonstrated here only begins to scratch the surface of its capabilities. See the PHP/SWF reference documentation for a complete breakdown of what’s available to you. Regardless, I hope this brief tutorial gives you some ideas for incorporating charting into your own applications!

About the Author

W. Jason Gilmore is co-founder of IT Enlightenment. He’s the author of several books, including the best-selling Beginning PHP and MySQL 5: Novice to Professional, Second Edition (Apress, 2006. 913pp.). Jason loves receiving e-mail, so don’t hesitate to write him at wjATwjgilmore.com.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories