Data visualization is an essential part of many web applications. Even large amounts of data (i.e. sales figures, website traffic, etc.) can be quickly analyzed and compared if displayed in the form of charts and graphs. The JpGraph library developed by Asial Corporation is designed just for these purposes. It can be used for creating graphs, charts, captcha images and even maps.
PHP version 4.3.1 and the GD library are the only requirements to use JpGraph. Both versions 1 and 2 of the GD library are supported. In order to install JpGraph, download the library archive and extract the "src" subdirectory (check that it contains a file named "jpgraph.php") in your project directory or a system PHP libraries directory, if you'd like to reuse it in several projects.
JpGraph developers don't recommend installing it in publicly available directories and I have to admit I do agree with them on this point.
Lastly, check if the GD library is properly installed by looking at the output of phpinfo().
With the library installed, we can try to create a simple graph.
/* Include JpGraph in your script. Note that jpgraph.php should reside in a directory that's present in your PHP INCLUDE_PATH, otherwise specify the full path yourself. */ require_once('jpgraph.php'); /* Include the module for creating line graph plots. */ require_once('jpgraph_line.php'); // Include the module for creating line graph plots. $ydata = array(6, 3, 8, 5, 15, 16, 19); /* We're not going to set the values for the X axis. */ $xdata = array(0, 1, 2, 3, 4, 5, 6); /* Let's create a Graph instance and set some variables (width, height, cache filename, cache timeout). If the last argument "inline" is true the image is streamed back to the browser, otherwise it's only created in the cache. */ $graph = new Graph(400, 300, 'auto', 10, true); // Setting what axises to use $graph->SetScale('textlin'); /* Next, we need to create a LinePlot with some example parameters. */ $lineplot = new LinePlot($ydata, $xdata); // Setting the LinePlot color $lineplot->SetColor('forestgreen'); // Adding LinePlot to graphic $graph->Add($lineplot); // Giving graphic a name $graph->title->Set('Simple graphic'); /* If the graph is going to have labels with international characters, make sure to use a TrueType font that includes the required characters, e.g. Arial. */ $graph->title->SetFont(FF_ARIAL, FS_NORMAL); $graph->xaxis->title->SetFont(FF_VERDANA, FS_ITALIC); $graph->yaxis->title->SetFont(FF_TIMES, FS_BOLD); // Naming axises $graph->xaxis->title->Set('Время'); $graph->yaxis->title->Set('Деньги'); // Coloring axises $graph->xaxis->SetColor('#СС0000'); $graph->yaxis->SetColor('#СС0000'); // Setting the LinePlot width $lineplot->SetWeight(3); // To define a marker type, we denote dots as asterisks $lineplot->mark->SetType(MARK_FILLEDCIRCLE); // Showing value above each dot $lineplot->value->Show(); // Filling background with a gradient $graph->SetBackgroundGradient('ivory', 'orange'); // Adding a shadow $graph->SetShadow(4); /* Showing image in browser. If, when creating an graph object, the last parameter is false, the image would be saved in cache and not showed in browser. */ $graph->Stroke();
Finally, we are going to send the graph to the browser. If the last argument to Graph constructor was false, the image will only be created in the cache and will not be sent to the user.
JpGraph is able to create many types of charts and graphs. Note that in the following examples I will not provide the complete scripts, only the relevant code.
// Adding file with classes to work with bars require_once('jpgraph_bar.php'); // Creating a new bar $bplot = new BarPlot($xdata); $bplot->SetLegend('Investments'); // Creating another bar $bplot2 = new BarPlot($ydata); $bplot2->SetLegend('Profit'); // Combining the bars $accbplot = new AccBarPlot(array($bplot, $bplot2)); $accbplot->SetColor('darkgray'); $accbplot->SetWeight(1); // Adding bars to the praphic $graph->Add($accbplot);
3D pie charts
JpGraph can create 3D plots as well. The next piece of code creates a pie chart to display browser usage share for a given date.
require_once ('jpgraph.php'); require_once ('jpgraph_pie.php'); require_once ('jpgraph_pie3d.php'); // Browser usage statistics, % $data = array(29, 21, 18, 18, 4, 10); $legends = array( 'Crome', 'IE', 'Firefox', 'Opera', 'Safari', ); // Creating a new graphic $graph = new PieGraph(600, 450); $graph->SetShadow(); // Naming the graphic $graph->title->Set('Browser usage statistics'); $graph->title->SetFont(FF_VERDANA, FS_BOLD, 14); // Legend positioning (%/100) $graph->legend->Pos(0.1, 0.2); // Creating a 3D pie graphic $p1 = new PiePlot3d($data); // Setting the graphic center (%/100) $p1->SetCenter(0.45, 0.5); // Setting the ancle $p1->SetAngle(30); // Choosing the type $p1->value->SetFont(FF_ARIAL, FS_NORMAL, 12); // Setting legends for graphic segments $p1->SetLegends($legends); // Adding the diagram to the graphic $graph->Add($p1); // Showing graphic $graph->Stroke();
To keep things simple, the above examples use hard-coded data. Of course, in production you may use any data source you like, be it a database or a CSV file.
JpGraph provides many other features for visualising data: combined graphs, custom images for backgrounds and control points, etc. It would take a lot more than one post to write about them all. If you have any specific question in mind, feel free to ask it here - I will be glad to help.