Client Area

Do Drupal Right

Josh Estep's picture
Josh Estep  | Senior Drupal Developer, Themer
Nov
27
2012

Although table Views are typically used to express complex numeric data in Drupal, usability can be increased by displaying data graphically.  The shape and color of chart elements can be leveraged to make data easier to digest and patterns easier to recognize.  

In the example below, width is displayed graphically through the bar lengths and temperature is indicated with color:

Drupal and Charts

Luckily, exploring Drupal contrib modules is a great way to start and there's a wide array of solutions available.

One approach is to leverage the Charts and Graphs API module along with Views Charts module to render view data as a chart. This is pretty flexible since multiple libraries can be plugged in depending the need, including:

  • Flot - Real-time updates, interactive charts.
  • amCharts - Filterable charts and much more support and documentation but requires the purchase of a license.
  • Bluff  - This is a port of the Gruff library for Ruby which is free.

There are also several Flash-based tools, including FusionCharts and Open Flash Chart 2; however, Flash is quickly being replaced by HTML5 for a plethora of reasons including mobile support. 
The pChart API also has a Drupal project which allows more granular control without re-inventing the wheel.

On the other hand, a completely custom chart solution can be created via HTML5. The HTML5 canvas element generates primarily stateless bitmap image which can be manipulated via JavaScript commands. Therefore, view content can be displayed by translating numeric field output into JavaScript:

  • The first step is to iterate over row data to be displayed via PHP in a view preprocess hook and insert it into a JavaScript array.
  • Next, the JS propagates through the array, drawing associated data onto the canvas.  

Note that, although some draw history is retained, the canvas is primarily stateless so its data should be maintained in JS in order for additional manipulation to take place. During or after this process, the graph can be marked up with text along each axis.

It may also be useful to have some level of zoom. Luckily, canvas makes it easy to scale content; however, this is sometimes not enough. Imagine an attempt to output 50000 data points on a graph 500 pixels wide, although this could be rendered on a massively large bitmap, it is more efficient to avoid parsing that much data on the client side. Instead, segments of the content across an access can be grouped and averaged together.  If there is a need for dynamic zooming, exposed filter actions can trigger an ajax request for fresh data. For further performance, the initial data set as well as certain zoom levels can be cached to avoid excessive processing.

Ultimately, the increased adoption and browser support of HTML5 greatly simplifies charting which, in the past, would have required a lot of custom JavaScript + CSS or a Flash-based solution. In the future, expect to see the level of difficulty with these kinds of graphical activities continue to decrease as tools for integration continue to be created and refined.

Additional Resources:

Charts and HTML 5

The Power of Maps and Drupal

 

Share This Post