Google Chart Tools for Drupal

Google Chart Tools API is a tool for developers to facilitate the use of Google Chart Tools and the Google Visualization API within the context of a Drupal site. It provides PHP and Javascript wrappers for all features of the Visualization API, and is built to reduce the common limitations of using a wrapper class.

Note: the following is only a brief summary of available classes and methods. In truth, the API is much larger than this as it aims to integrate as many features of the Visualization API as possible. Please see the module code for more information.

Creating a chart

Create a chart using new GoogleChartsChartWrapper([array $options]).

$chart_wrapper = new GoogleChartsChartWrapper(array(
  // Note that chart type must match a chart class available
  // in the google.visualization object.
  'chartType' => 'BarChart',
  'chartName' => 'bar_1',
  'containerId' => 'bar-1',
  'options' => array(
    'chartArea' => array(
      'width' => 600,
      'height' => 600,
    ),
  ),
));

Here's the Javascript API equivalent of the preceeding:

var chart_wrapper = new Drupal.GoogleCharts.Chart('BarChart', 'bar-1', {chartArea: {width: 600, height: 600}});

There are multiple ways to set options on the chart after the chart wrapper has been created. Note that each of the following methods are interpreted in exactly the same way internally - setting the chartArea.width option to 800.

// Using the GoogleChartsChartWrapper::setOption(string|array $key, mixed $value).
// method.
// Note that the following will *not* override the chartArea.height
// option that we set in the constructor.
$chart_wrapper->setOption('chartArea', array('width' => 800));

// Directly access the chart wrapper's options object. Here
// we will denote the hierarchical structure of 
$chart_wrapper->options->set('chartArea.width', 800);

// Alternatively, we can use an array in the key parameter as well.
// The internally representation of each of these options is the
// exact same.
$chart_wrapper->options->set(array('chartArea' => array('width')), 800);

Creating a control

Google Chart Tools API also supports the Visualization API's control and dashboard features, allowing multiple charts and controls to be linked together in a single display. Create a new control using new GoogleChartsControlWrapper([array $options]).

$control_wrapper = new GoogleChartsControlWrapper(array(
  'controlType' => 'StringFilter',
  'containerId' => 'control-1',
));

Creating a data table

The GoogleChartsDataTable class closely resembles its Visualization API Javascript counterpart. However, one significant difference is that both the PHP GoogleChartsDataTable class and the Javascript Drupal.GoogleCharts.DataTable support named columns.

// Create a new data table.
$data_table = new GoogleChartsDataTable();

// Add columns to the table.
// GoogleChartsDataTable::addColumn(string $name [, string $type [, string $label [, string $role]]])
// Note that we could also use the GoogleChartsDataTable::addColumns() method.
$data_table->addColumn('name', 'string', t('Name'));
$data_table->addColumn('pieces', 'number', t('Pieces of pizza eaten'));

// Add rows to the table.
$data_table->addRow(array(
  'name' => 'Mike',
  'pieces' => 5,
));
$data_table->addRow(array(
  'name' => 'Jill',
  'pieces' => 7,
));

The module also has a data table wrapper. To build a google.visualization.DataTable object identical to the one outlines previously, use the following code:

var data = new Drupal.GoogleCharts.DataTable();

// Note that we could also use data.addColumns(Object columns).
data.addColumn('name', {type: 'string', label: 'Name'})
  .addColumn('pieces', {type: 'number', label: 'Pieces of pizza eaten'});

// Note that we could also use data.addRows(Array rows).
data.addRow({name: 'Mike', pieces: 5})
  .addRow({name: 'Jill', pieces: 7});

// Build the actual google.visualization.DataTable object.
var dataTable = data.build();

In addition to these features of the data table wrappers, Google Chart Tools supports grouping, data formatting, and more. To see the format in which all this data is passed to the Drupal.GoogleCharts classes look at the GoogleChartsDashboard::draw() method, which aggregates information from data tables, charts, and controls, and passes them in a large array with drupal_add_js().

Creating a dashboard

Finally, Google Chart Tools API supports rendering charts and controls in a dashboard.

// Create the dashboard, passing the container ID.
$dashboard = new GoogleChartsDashboard('dashboard-1');

// Bind the chart and control together.
// GoogleChartsDashboard::bind(GoogleChartsControlWrapper|array $controls, GoogleChartsChartWrapper|array $charts).
$dashboard->bind($control_wrapper, $chart_wrapper);

// Finally, we have our data table, dashboard, controls, and charts.
// Time to draw the dashboard.

// Add the dashboard div.
$output = '<div id="dashboard-1">';
// Control div.
$output .= '<div id="control-1"></div>';
// Bar chart div.
$output .= '<div id="bar-1"></div>';
$output .= '</div>';

// Draw the dashboard.
$dashboard->draw($data_table);

Using google_charts_add_js()

Finally, developers can directly use the Javascript settings that Google Chart Tools uses with google_charts_add_js([string $type [, string $container [, array $settings]]]).

$settings = array(
  'container' => 'dashboard-1',
  'columns' => array(),
  'rows' => array(),
  'groups' => array(),
);

$settings['columns'] = array(
  'name' => array('type' => 'string', 'label' => t('Name')),
  'pieces' => array('type' => 'number', 'label' => t('Pieces of pizza eaten')),
);

$settings['rows'][] = array(
  'name' => 'Mike',
  'pieces' => 5,
);
$settings['rows'][] = array(
  'name' => 'Jill',
  'pieces' => 7,
);

// Finally, add the settings. This will load and execute
// google_charts.js.
google_charts_add_js('dashboard', 'dashboard-1', $settings);

Development and maintenance of this module is sponsored by Blankstyle