Article: 4 Best Chart Generation Options with PHP Components

An excerpt fromhttp://www.sitepoint.com/4-best-chart-generation-options-php-components/, by Vaibhav Singhal

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.

http://www.google.co.in/trends/explore?hl=en-US#q=/m/04fzr5d&date=1/2007+99m&cmpt=q&tz&tz

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 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:

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.
 
?>

Continue reading this article on SitePoint!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.