Data is everywhere around us, but it is boring to deal with raw data alone. That’s where visualization comes into the picture.
If you take a look at the Google Trends plot below, you will realize that interest in Data Visualization has seen a steady growth over the years.
So, if you are dealing with data and are not already using some kind of charting component, there is a good chance that you are going to need one soon. That’s the reason I decided to make a list of libraries that will make the task of visualizing data easier for you.
But before we get started, you need to understand that there are two types of charting components: server side and client side. Both have their pros and cons, and what’s best for you completely depends on the objective of your project and the resources you have. I’ve covered client side charts in this post, but there is some overlap as you’ll see below.
Server Side vs Client Side Chart Generation
Server side components usually generate image charts. They employ algorithms to convert data into chart images and increase server overhead. Apart from using the server’s processing power, image based charts increase the bandwidth consumption. Sometimes large image sizes lead to slow downloads, which might be annoying to end users.
With this in mind, let’s go through some options for charting that have PHP components.
Google Charts (Client Side)
The good thing about Google Charts, apart from it being completely free, is the fact that they have lots of code examples to help you get started quickly.
One important point to keep in mind about Google Charts is that you are not allowed to host Google’s JS files on your server.
Creating Charts Using Google Charts:
Here’s the HTML code for the chart: (you can view the full code here.)
Here’s the getData.php file included in code above:
<?php // It reads a json formatted text file and outputs it. $string = file_get_contents("data.json"); echo $string; // Instead you can query your database and parse into JSON. ?>
FusionCharts (Client Side)
An important point to keep in mind about FusionCharts is that it’s a paid option. Although the wrapper is free, you will need a license to use the library in commercial applications. That should not be as big a deal as it sounds as you can always download the free trial which has no feature restrictions.
Creating Charts Using FusionCharts:
To see the chart live, go here and click ‘Run’.
Here is the PHP code to generate a column chart: (you can view the full code here)
<html> <head> // Including FusionCharts library files <script src="fusioncharts.js"></script> </head> <body> <?php // Example of how to draw a chart using FusionCharts and PHP. // fusioncharts.php functions to help us easily embed the charts. include("fusioncharts.php"); ?> <?php // Create the chart - Column 2D Chart with data given in constructor parameter // Syntax for the constructor - new FusionCharts("type of chart", "unique chart id", "width of chart", "height of chart", "div id to render the chart", "type of data", "actual data") $columnChart = new FusionCharts("Column2D", "myFirstChart" , 780, 400, "chart-1", "jsonurl", "data.json"); // Render the chart $columnChart->render(); ?> <div id="chart-1"><!-- FusionCharts will render here--></div> </body> </html>
pChart (Server Side)
pChart is one of the few native PHP charting libraries that is still under active development. But, as discussed above, there are both pros and cons to being a purely server side charting component.
The main advantage is that you don’t have to worry about cross-device and cross-browser compatibility as pChart will generate images for you. But you lose the interactivity that client side libraries like FusionCharts and Google Charts offer.
Creating Charts Using pChart:
If you are trying to get started with pChart, SitePoint has an excellent, if somewhat old tutorial for you: Charting with pChart.
Here is the PHP code for the plot (download source code from here):
<?php /* CAT:Bar Chart */ /* pChart library inclusions */ include("../class/pData.class.php"); include("../class/pDraw.class.php"); include("../class/pImage.class.php"); /* Create and populate the pData object */ $MyData = new pData(); /* This is the data to be plotted */ $MyData->addPoints(array(2112,1005,703,620,482,420,346,306,293,231),""); $MyData->setAxisName(0,"Votes"); /* These are the data labels */ $MyData->addPoints(array("Laravel","Symfony2","Nette","Yii 2","CodeIgniter","PHPixie","Zend 2","No Framework","Yii 1", "Phalcon"),"Frameworks"); $MyData->setSeriesDescription("Frameworks","Framework"); $MyData->setAbscissa("Frameworks"); /* Create the pChart object */ $myPicture = new pImage(700,230,$MyData); /* Turn off Antialiasing */ $myPicture->Antialias = FALSE; /* Add a border to the picture */ $myPicture->drawRectangle(0,0,699,229,array("R"=>0,"G"=>0,"B"=>0)); /* Set the default font */ $myPicture->setFontProperties(array("FontName"=>"../fonts/pf_arma_five.ttf","FontSize"=>6)); /* Define the chart area */ $myPicture->setGraphArea(60,40,650,200); /* Draw the scale */ $scaleSettings = array("GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE); $myPicture->drawScale($scaleSettings); /* Write the chart legend */ $myPicture->drawLegend(580,12,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL)); /* Turn on shadow computing */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); /* Draw the chart */ $myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); $settings = array("Gradient"=>TRUE,"GradientMode"=>GRADIENT_EFFECT_CAN,"DisplayPos"=>LABEL_POS_INSIDE,"DisplayValues"=>TRUE,"DisplayR"=>255,"DisplayG"=>255,"DisplayB"=>255,"DisplayShadow"=>TRUE,"Surrounding"=>10); $myPicture->drawBarChart(); /* Render the picture (choose the best way) */ $myPicture->autoOutput("pictures/example.drawBarChart.simple.png"); ?>
ChartLogix PHP Graphs (Server Side)
If you require only basic charts in your application, then ChartLogix PHP Graphs can be a good option. It has a limited collection that contains most commonly used charts like bar, pie, line etc., and is priced at just $44.99 for unlimited commercial use.
Although not in active development, it still provides personal support to all the buyers. It renders the output as an image and offers customisation of layouts, fonts, colour schemes & some visual effects.
Creating Charts Using ChartLogix PHP Graphs:
ChartLogix does not come with a free trial, but that’s not a big problem because you can always use their designer feature to get familiar with the code and design. In fact, this is going to save you a lot of time as you can evaluate it within minutes.
Below is the code to generate a bar chart and you can visit this page to play with it.
<?php include( 'chartlogix.inc.php' ); $bar = new BarChart(); //---- THE STYLE $bar->setBackground( 'EEEEEE', 'EEEEEE' ); $bar->setPadding( 20 ); $bar->setDefaultFont( 'arial.ttf' ); $bar->setTitleStyle( 'arial.ttf', 15, '000000' ); $bar->setTitlePosition( 0, 0 ); $bar->setLegendWidth( 40.00 ); $bar->setLegendTextStyle( 'arial.ttf', 10, '000000', 10 ); $bar->setLegendKeyStyle( 10, 10 ); $bar->setLegendBoxStyle( 'FFFFFF', '000000', 10 ); $bar->setLegendPosition( 1, 0 ); $bar->setXAxisTextStyle( 'arial.ttf', 10, '000000', 0 ); $bar->setYAxisTextStyle( 'arial.ttf', 10, '000000' ); $bar->setColumnSpacing( 25 ); $bar->setStackedBarSpacing( 0 ); //---- THE DATA $bar->setTitle( 'ChartLogix Bar & Line Graph' ); $bar->addColumns( array( '2002', '2003', '2004', '2005', '2006', '2007' ) ); $bar->doBarSeries( 'Bananas', 'FFFF00', 'FFCC00' ); $bar->setValueStyle(); $bar->addData( '2002', 1498 ); $bar->addData( '2003', 358 ); $bar->addData( '2004', 675 ); $bar->addData( '2005', 1449 ); $bar->addData( '2006', 1335 ); $bar->addData( '2007', 137 ); //---- DRAW PNG $bar->drawPNG( 500, 400 ); ?>
I hope you find the above libraries useful, but if you want more options do check out PHPGraphLib and JpGraph. PHPGraph is a lightweight server side library and completely free to use for all purposes. JpGraph on the other hand offers a trimmed down free version. Both of these libraries are not under active development now, but their current stable version still works well.
Charting is a crowded space and this is in no way a complete list of tools available for PHP charting. Instead, I’ve tried my best to list the tools that have a proven track record and would make the task of creating beautiful charts easier for you.
Do you use another PHP charting tool that I didn’t include here? Would love to learn about it in the comments section below.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well