Hook yourself to CLOUD: 2015

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.

The above limitations of server side charts can be overcome by using client side components (JavaScript based). A browser will fetch the JSON or XML data from the server and render the charts locally. Client side components also have a greater scope of customization. They are often interactive, support animation and can easily blend into the design of your application.

Some charting libraries (like FusionCharts) provide wrappers which allow you to write your code in PHP only. Using the PHP wrapper you can generate the required JavaScript and HTML code as a string on the server. You can then output these strings in the page to generate charts.

With this in mind, let’s go through some options for charting that have PHP components.

Google Charts (Client Side)

Although it is JavaScript based, Google Charts has a couple of options to make your charts entirely in PHP. You can either use server-side code (in our case PHP) to get the data, or get one of the open-source wrappers to do it for you.

The good thing about Google Charts, apart from it being completely free, is the fact that they have lots ofcode 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:

I have plotted data from the SitePoint survey of most popular PHP frameworks in 2015. To see the live chart, go here and click ‘Run’.

Here’s the HTML code for the chart: (you can view the full code here.)

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
   
    // Load the Visualization API.
    google.load('visualization', '1', {'packages':['corechart']});
     
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
     
    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType:"json",
          async: false
          }).responseText;
         
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 800, height: 400});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the column chart-->
    <div id="chart_div"></div>
  </body>
</html>

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)

FusionCharts is primarily famous for its JavaScript or jQuery charts, but not many developers are aware of its official PHP wrapper. You can leverage FusionCharts’ exhaustive library of more than 90+ interactive charts and 965 maps through its PHP wrapper. Their charts are highly customizable and they have a pretty active support system in place.

They have a nice collection of dashboards (many of which are available for free download) and a huge chart fiddles gallery for inspiration.

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 theirdesigner 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 );
?>

Conclusion

I hope you find the above libraries useful, but if you want more options do check out PHPGraphLib andJpGraph. 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.

Hook yourself to CLOUD

Tuesday 29 December 2015

4 Best Chart Generation Options with PHP