Charts API - Prior Releases

The examples below can only be used in a site using a version of the Charts module that is a version prior to 7.x-2.x. Trying to use them with the 7.x-2.x version (or above), will typically lead to #2218941: Fatal error: Call to undefined function charts_chart() .

To actually use them, make sure to first complete the required installation and configuration steps as described in the Getting started documentation.

Example 1: Only specify required options

The example below is the simplest example possible, in which only the required options are specified, i.e.: plugin, type, height and #width.

$example = array(
  '#plugin'    => 'google', // Google Charts API will be used
  '#type'     => 'line2D', // To show a simple 2D line chart
  '#height'   => 100, // in pixels
  '#width'    => 200, // in pixels
  array(10, 20, 25, 35), // A simple list of values to create the chart's line
);

return charts_chart($example);

Example 2: Add some other chart options

Let's change the chart background color (using #color attribute, which has to be provided in a separate dimension) and insert a title (using the #title attribute). And let's use the #legend attribute to display two series, named Revenue and Profit.

$example = array(
  '#plugin'    => 'google', // Google Charts API will be used
  '#type'     => 'line2D', // To show a simple 2D line chart
  '#height'   => 100, // in pixels
  '#width'    => 200, // in pixels
  '#color'    => array('background' => '#f0f0f0'), // background color in RRGGBB fmt
  '#title'    => t('2015 Sales Projection'), // chart title
  array(
    '#legend' => t('Revenue'),
    100,200,250,350), // 1st series
  array(
    '#legend' => t('Profit'),
    10,20,25,35), // 2nd series
);

return charts_chart($example);

Example 3: Use charts default values

By completing the charts configuration via admin/settings/charts (within administration), some default values can be defined/tuned for any chart. Here are some suggested (default) options:

• Google Chart API should be selected as the plugin, but if it is not, then go ahead and select it since it is the simplest to work with.
• For the chart type, we can choose anything, but for this example let's choose a 2D pie chart.
• The other values such as width, height, and colors should be fine how they are, so just save the settings.

After you defined the default values for your charts, it is much easier (less work) to create charts. Just create some new content (for which it is allowed to use the PHP input format) and be sure to select php as the input format. Now all you need to do to create a basic chart, is to give it a title and include something in it that looks like this:

<?php
$example = array(
  array(5, 10, 25, 60), //Some basic data to test our chart
);

return charts_chart($example);
?>

When you preview the post, and assuming you completed the step to set default values for the chart settings (charts configuration options within administration), you should see a simple chart that matches some of the default values specified within the charts configuration options (administration).

Example 4: Replace some of the charts default values

If you want to make your chart look a little different or use some option(s) that are different from the default values, then you can define those values within your code. So to create a 3D pie chart with a light grey background and a title of "Example," just define a chart like this:

<?php
$example = array(
  '#type'     => 'pie3D', // Display a 3D pie chart
  '#color'    => array('background' => '#f0f0f0'), // background color in RRGGBB fmt
  '#title'    => t('Example'), // Chart title
  array(5, 10, 25, 60),
);

return charts_chart($example);
?>

Example 5: Add labels to chart data

If you also want the data to be labeled, then you can label them like so:

<?php
$example = array(
  '#type'     => 'pie3D', // Display a 3D pie chart
  '#color'    => array('background' => '#f0f0f0'), // background color in RRGGBB fmt
  '#title'    => t('Example'), // Chart title
  array(
    array('#value' => 60, '#label' => t('60%')),
    array('#value' => 25, '#label' => t('25%')),
    array('#value' => 10, '#label' => t('10%')),
    array('#value' => 5,  '#label' => t('5%')),
  ),
);

return charts_chart($example);
?>

You can define any of the other variables in the same way. And it is perfectly fine to redefine (overrule) some of the default options like #plugin, #type, #height, #width, etc.