Presentation of the JpGraph library, which is used to generate images with all kinds of data graphs in PHP.
A task that sooner or later we are going to have to face throughout our career as web professionals is the creation of graphs from data. When I talk about graphs, I mean all kinds of images that are used to represent data, such as bar graphs, progress lines, pie charts, etc.
Obviously, the creation of graphs is not a trivial subject, but it will require a great deal of dedication and effort. Graphs, which are usually displayed in images, can be of many different types and just trying to draw lines, bars, or even 3-dimensional pie charts on an image can be overly complicated.
However, there are systems like JpGraph, which can facilitate the task in a very interesting way, since they offer a series of mechanisms for generating images with graphs, so that we only have to focus on loading the data to be represented. and choose the type of graph we want to display.
What is JpGraph
It is a library that includes a series of classes -object-oriented code- that are used to create images with all kinds of graphics, dynamically from PHP pages.
The system is very refined and supports a multitude of functionalities, so we will surely find a solution to almost any need in the field of graph creation. Also, most chart setups come with default options, so it’s pretty easy to get results quickly.
Some of the features of the system are:
- Reduced weight in bytes of the result images. Usually a few KB.
- Support for GD1 or GD2 libraries.
- Use of Mathematical Interpolation to obtain curves from a few values.
- Various types of 2D or 3D graphs, such as points, lines, pie, bars, boxes…
- Flexible scales both on the X and Y axis, which adjust to the set of data that has to be represented.
- Support to generate graphs with several sets of values at the same time.
- Configurable with different types of colors, legends, fonts, background images, etc.
How to use JpGraph
This set of libraries has extensive documentation and tutorials to learn how to use it. In the documentation there are also numerous examples of its use, from which we can start to solve our needs.
The way of working to use this library is very simple, it is about creating an image with the label of HTML, in whose src attribute we will place the path to the PHP script that will be in charge of generating the graph.
In the PHP file that will generate the graph, we will have to include the appropriate libraries for the type of graph we want to make, we will also have to instantiate the corresponding JpGraph object, load the data to be displayed and call the appropriate methods to display the image. A fairly simple mechanism that we will see in a couple of examples below.
Example 1: a line graph.
In this example we are going to create a line graph in which we will show the working hours of a person over 10 days.
The generation of the graph in this example is done in a file that we have called grafico_linea.php, therefore, the call to this file within an image will be the following:
The PHP code of the file grafico_linea.php is the following:
include(“jpgraph/jpgraph.php”);
include(“jpgraph/jpgraph_line.php”);
// Some data
$ydata = array(11.5,3,8,12,5,1,9,13,5,7);
// Create the graph. These two calls are always required
$graph = new Graph(450,250,”auto”);
$graph->SetScale(“textlin”);
$graph->img->SetAntiAliasing();
$graph->xgrid->Show();
// Create the linear plot
$lineplot=new LinePlot($ydata);
$lineplot->SetColor(“black”);
$lineplot->SetWeight(2);
$lineplot->SetLegend(“Hours”);
// Setup margin and titles
$graph->img->SetMargin(40,20,20,40);
$graph->title->Set(“Example: Working Hours”);
$graph->xaxis->title->Set(“Days”);
$graph->yaxis->title->Set(“Work Hours”);
$graph->ygrid->SetFill(true,’#EFEFEF@0.5′,’#F9BB64@0.5′);
//$graph->SetShadow();
// Add the plot to the graph
$graph->Add($lineplot);
// Display the graph
$graph->Stroke();
?>
Example 2: a 3D pie chart
On the other hand, we are going to make an example of a pie graph, in which the hours worked by each of the employees and the percentage with respect to the totals appear. In this case, the cake will be presented in a 3-dimensional drawing.
The file where the graph is generated is called grafico_tarta.php. We would call it inside an image with this HTML code.
The PHP code of the grafico_tarta.php file will be the following:
include(“jpgraph/jpgraph.php”);
include(“jpgraph/jpgraph_pie.php”);
include(“jpgraph/jpgraph_pie3d.php”);
$data = array(40,60,21,33);
$graph = new PieGraph(450,200,”auto”);
$graph->img->SetAntiAliasing();
$graph->SetMarginColor(‘gray’);
//$graph->SetShadow();
// Setup margin and titles
$graph->title->Set(“Example: Working Hours”);
$p1 = new PiePlot3D($data);
$p1->SetSize(0.35);
$p1->SetCenter(0.5);
// Setup slice labels and move them into the plot
$p1->value->SetFont(FF_FONT1,FS_BOLD);
$p1->value->SetColor(“black”);
$p1->SetLabelPos(0.2);
$names=array(“pepe”,”luis”,”miguel”,”alberto”);
$p1->SetLegends($names);
// Explode all slices
$p1->ExplodeAll();
$graph->Add($p1);
$graph->Stroke();
?>
conclusion
JpGraph is a very powerful tool for generating graphics on our web page and thanks to its use we realize its many benefits:
- It is a free library (for non-commercial use), easy to install and easy to use.
- It includes complete documentation with a multitude of examples of the different graphics that can be generated.
- In addition to generating many types of graphics, it allows you to ‘customise’ almost everything you see, which is very useful for perfectly integrating the graphic into the design of your website.
- The way to integrate the graphic is very simple: it is only necessary to include an image (label
) whose src is the PHP script that will generate our graph (see examples).
We have found few defects in the library, only the following could be improved:
- Error messages are rather rare, and most of the time when something goes wrong we don’t get any explanation.
- Some definition is missing in the graphs, especially in the pie charts.
Facebook Comments
Disqus