Add Charts To Your Drupal Site

One of the best ways to display data is to use a visual representation of that data. Instead of long strings of boring numbers, a colorful chart can help explain statistics and spruce up your site along the way.

Google has made their Chart API available, and in Drupal there are two fairly simple to use moudules that let you get Google Charts on your site.

First, you'll need to get the data into some nodes. You can manually enter the data, or import the nodes en masse. I found the Node Import module to be very effective at adding a large amount of statistics, and then automatically creating nodes from that data. Node Import has replaced my previous workflow of using Table Wizard and Migrate to add rows of data. The simplest way is to create a .CSV (Comma Separated Value) file, and then upload it using the module's built-in upload function.

You should use CCK to customize your content type for your specific type of node. In this example, I mapped the title of the node to the field name and then the numerical value for each field as a CCK integer.

Once your date is in Drupal, you can use one of two modules to access the Google Chart API from within Drupal.

Charts is one module. It offers a little more fine-grained control over the display of your data. In addition to the Google Charts, this module also offers two other charting applications: Openflash Chart, and Fusioncharts.

Chart API is the second module. One note though, you will need to use the development version of the module if you want views integration.

Now that the module you chose is installed, it will appear on your modules page. Enable it and any dependency modules necessary. You will get a views style plugin that allows you to create a view displaying your chart. You can create any view display type for your chart.

Once you have selected the chart option as a style for your view, you will get a list of available charts to display along with options to set the size, grouping fields of your data, and the field to perform the analysis of your data on.

Both of these modules work very similarly in that they allow you to take data and then visually represent them on your site all the while google handles the processing and creation of the charts themselves. You get an almost instant image file that displays your data in graphical form.

One caveat when using the Chart API is if you have large standard deviations between sets of data. In the above chart for example, there are 10,257 thefts and only 17 murders. The resolution of the chart will graphically present this data a little skewed unless you allow the module to adjust for resolution.

Within your module directory, you will find a chart.module file. Open this and edit it.

The line that contains resolution:

'#adjust_resolution' => FALSE,

Locate this section:

// Merge with optional paramter defaults.
  $chart += array(
    '#title' => '',
    '#size' => '',
    '#legends' => array(),
    '#legend_position' => '',
    '#labels' => array(),
    '#adjust_resolution' => TRUE, ****CHANGE THIS****
    '#line_styles' => array(),
    '#grid_lines' => array(),
    '#shape_markers' => array(),
    '#data_colors' => array(),
    '#chart_fill' => array(),
    '#mixed_axis_labels' => array(),
    '#mixed_axis_label_styles' => array(),
    '#bar_size' => '',
    '#countries' => array(),
    '#georange' => '',

The module names are confusing because they are so alike. Charts and Chart would be helpful search terms on the Drupal Modules Page to locate each module.