Add Graphs To Your PHP Web App With pChart

Add Graphs To Your PHP Web App With pChart:

pChart is a remarkably advanced graphing toolkit for PHP. It’s free under GPL licence, highly customisable, fully object oriented, and more than capable of handling any data you throw at it. Let me show you how to get started with using it for your web app.

This tutorial assumes a basic knowledge of PHP.

Features – At a Glance

• Easy to get started with tons of example code.


• Anti-Aliasing for beautiful graphs.


• Every kind of graph you could possibly imagine, as well as native drawing routines to customise the display even further. (3D graphs are limited to pie charts though)


• Best-fit line calculation – just give it the data points and let it do the work.


• Can also create Barcodes, as if graphing wasn’t enough. (Not QR Codes though, only standard 1-dimensional ones)


• Conditional formatting, to create really visually appealing graphs.


• Comprehensive caching class to speed up your graphing in a production environment.

Getting Started

Download the latest pChart package and upload it to the root of your web server. Rename the direct to pChart. You can test it out right away by navigating to this directory which will load the example graphs.

Try it Yourself

To learn the basic method of drawing a graph, create a new PHP file in the root of your server called test.php. Add these lines to the top (assuming the directory you upload pChart to named just pChart):

/* Include all the classes */
include("pChart/class/pDraw.class.php");
include("pChart/class/pImage.class.php");
include("pChart/class/pData.class.php");

The next step is to create a dataset, and use the addPoints method.

/* Create your dataset object */
$myData = new pData();
/* Add data in your dataset */
$myData->addPoints(array(VOID,3,4,3,5));

Notice that you can use a VOID keyword if data is missing. You could also connect to a MySQL data source and pull an array of data from there, or load a CSV file from somewhere. We’re going to be drawing a very simplistic graph ofcourse, but you can also add multiple datasets, adjust ticks etc at this point.

Next you need to create the image object, set the graphing area, and choose a font.

$myPicture = new pImage(700,230,$myData); // width, height, dataset
$myPicture->setGraphArea(60,40,670,190); // x,y,width,height
$myPicture->setFontProperties(array("FontName"=>"pChart/fonts/verdana.ttf","FontSize"=>11));

The scale must then be computed before output – but this can be done automatically – then draw the graph, like this:

$myPicture->drawScale();
$myPicture->drawSplineChart();

In this case, we’re drawing a spline chart – basically a curved line chart – but there’s a huge list of other charts you can draw just by changing this function. The very last step is to output the resulting PNG file to the browser. Use the Stroke() function to do this:

$myPicture->Stroke();

You’d use this in cases where you’re either displaying directly to the user, or embedding the PHP as file as an image, like:

<img src="test.php">

If you load the test.php in your browser now, you should see something similar to this:

Another option is to render the graph to a file if you’re generating them through some kind of automated CRON job, for instance. In that case, use (where the path of the image is relative to the test.php and in a writeable folder):

$myPicture->render("mypic.png");

Alternatives

Though pChart is the most comprehensive charting toolbox for PHP by far, there are some alternatives:

• SparkLine PHP is an implementation of the distinctive tiny graphs so named by Edward Tuffte.


• JqPlot is a jQuery based graphing solution, which would shift the graphing computation to the users browser rather than your server, ideal if you’re trying to plot mathematical functions.


• PHPMyGraph isn’t as comprehensive, customisable, or attractive as pChart, but it’s also a lot simpler.


• EasyChart Builder is a simple WordPress plugin, but this requires your dataset to be added manually.


• Google Image Chart creator has a wide selection of graphs and can be easily embedded, but also requires you to manually enter your dataset.

That’s it from me this time, I do hope you have a play with pChart in web apps you’re making. I’ve just started working it into the web side of my Egg Counter iPhone application, so I’m certainly no expert on it yet. I’ll try to point you in the right direction if you have any questions, but there’s also extensive documentation available. Do you have a better way of graphing data in your web apps? Let us know!