Charts and Drupal
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:
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.
- 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.