Drupal and Google; BFF's - Google Charts

Charts and Drupal

Google Charts is one of the services that has fantastic documentation, allowing you to really dig into it and get the best possible result. With a wide variety of chart types available and,configurable options Google welcomes you to dive into its API and see what you can do.


The scenario

This one was rather easy to relate a real world scenario to it, as I've already done it, but with a different charting tool. myhealth London is a site that allows you to find and compare services and,data, and I'll be using a (very) slimmed down version for this demo. We'll have three GPs (IDs of pr123, pr456 and pr789 - each will always be unique), each GP has a set of data against it showing how well they perform in a particular score (i.e. patient ratification). For each GP we want to display the latest result as a pie chart and then the past three years of results to see if there is any increase or decrease in patient ratification.

The setup

The GPs data will all be displayed on one page next to each other. The data itself is updated yearly and kept in a separate database, I've included a phpMyAdmin screenshot of the data.? You can of course store the data within the Drupal database, as a table or in fields within a node. I've used the example of a separate database as I personally think large amounts of data are more easily dealt with if kept separate from nodes etc.

I've decided to use a Drupal module rather than going straight for the API itself simply because I've not used it before and wanted to play about with it (I'm easily pleased like that). The module I'm using is Google Chart Tools, there was another module available making use of Googles Image Chart API however this is sadly deprecated and will no longer be supported after 2015 (remember me talking about Google having their 'spring cleans'?)

The process

Once you have downloaded the module and installed it have a look at the example module, it'll help you get your head around how they are displayed on the page. So, first thing's first, let's collect the data. A menu hook to point to the page we want to display the charts on and a short little query has us what we need, making sure we switch to our 'data' database and back to our Drupal one after we're done.?

  1. $query = db_select('data', 'p');
  2. $data = $query
  3. ->fields('p')
  4. ->execute()
  5. ->fetchAllAssoc('OrgID');

Now we have our data we need to place it in an array that the charts module can then render:

  1. //Get the data into an array of values
  2. foreach ($data as $value) {
  3. //array for pie chart, displaying just the last year
  4. $pie_data['chart']['pie_' . $value->OrgID] = array(
  5. 'header' => 'Header',
  6. 'rows' => array(array($value->data1, 100 - $value->data1)), //the data to display
  7. 'columns' => array('Data'),
  8. 'chartType' => 'PieChart', //does what it says on the tin
  9. 'options' => array(
  10. 'title' => t($value->OrgID . ': ' . $value->data1 . '%'),
  11. 'forceIFrame' => FALSE,
  12. 'width' => 150,
  13. 'height' => 200,
  14. 'legend' => none, //no legend thanks
  15. 'pieSliceText' => none, //stop text from displaying on the pie slices
  16. 'fontSize' => 12,
  17. 'enableInteractivity' => FALSE, //stop mouse overs on pie charts
  18. 'backgroundColor' => 'transparent'
  19. )
  20. );
  21. //array for line chart, displaying all three years
  22. $line_data['chart']['line_' . $value->OrgID] = array(
  23. 'header' => array('Year 1', 'Year 2', 'Year 3'),
  24. 'rows' => array(array($value->data1, $value->data2, $value->data3)), //the data to display
  25. 'columns' => array('Data'),
  26. 'chartType' => 'LineChart', //does what it says on the tin
  27. 'options' => array(
  28. 'title' => t('Three year data for ' . $value->OrgID . '(All values are %)'),
  29. 'forceIFrame' => FALSE,
  30. 'width' => 556,
  31. 'height' => 250,
  32. 'legend' => none,
  33. 'fontSize' => 12,
  34. 'min' => 0,
  35. 'max' => 100,
  36. )
  37. );
  38. }
  39. //theme all the charts!
  40. return theme('chart_page', array('pie_data' => $pie_data, 'line_data' => $line_data));

A couple of points to note. The "'line_' . $value->OrgID" type values are used later to display them on the page, stating the obvious but make sure they're unique! You also have the option of setting a 'containerID', the chart will use this value rather than the OrgID in my example. I left it as the OrgID as that is my primary key in this instance as no two GPs will have the same ID.

Going through the usual hook_theme() brings us to our template page where we can then render the charts:

  1. /**
  2. * file
  3. */
  4. ?>
  5. <p>This is the demo page for Google Charts. If you haven't already you can read the blog post <?php echo l(t('here'), 'node/20');?>.</p>
  6. <h2> Loop and Print out our Pie Charts </h2>
  7. <p>This displays the latest data point. No interactivity here.</p>
  9. <div style="display:inline-block">
  10. <?php
  11. foreach ($pie_data['chart'] as $key => $data) {
  12. echo'<div id="' . $key . '" style="float:left";></div>';
  13. }
  14. draw_chart($pie_data); ?>
  15. </div>
  16. <h2> And the same for our line charts </h2>
  17. <p>This displays the last three years of data. You can hover over the points on these.</p>
  18. <?php
  19. foreach ($line_data['chart'] as $key => $data) {
  20. echo'<div id="' . $key . '" style="padding:10px"></div>';
  21. }
  22. draw_chart($line_data);

These will then look like:


The div tags contain the ID that will match to the charts. You can see them displaying on the demo page here. A list of different ways to configure the charts are available, for example the one for Pie Charts can be seen here.

That extra little bit

That was the short and sweet of how I did it, I'm sure there are other ways to achieve the same result, why not try it and let me know. There is much more you can do with Google Charts, there's a patch available to make them responsive, though I've not tried it. You can generate charts in the playground to get a feel of what you can do and as mentioned before they have forums and FAQs available to developers as well.

The end bit

So how does this compare with that I used? I used a php charting library called pCharts, examples of a pie and line chart can be seen below:

The main difference being that pCharts generate images, Google charts no longer supports this and it's all done in javascript. Google charts, being as flexible as it is, still feels a little rigid in places, in terms of what you can and can't display where and how. I've only spent a few days with them so I'm clearly no expert on the matter but for me personally, in this use case, it's not quite right. In some circumstances I'm sure they'll be brilliant, maybe I just want too much, or maybe the module is more restrictive than the charts actually are, but until I get to spend more hands on time with it I'll be sticking to pCharts for now and looking for Google charts use elsewhere.

Next time

Next time I'm planning to look at integrating Drive to make a Drupal/Google (Droogle?) powered document library. Until then!