How to Create Powerful Charts Using Highcharts and Visualization API

In the first part of this two part series, we looked at how to install the Visualization API module and we created a simple chart with just using Views and the Google Visualization API. We also saw how easy it is to create a chart without having to write any custom code.

In this video, we’ll look at integrating Highcharts library with Visualization API, and how to create charts programmatically.

Module

drush dl libraries

Resources

Code example:

/**
 * Implements hook_menu().
 */
function example_menu() {
  $items['example-charts'] = array(
    'title' => 'Example',
    'page callback' => 'example_page',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
  );
  return $items;
}
/**
 * Callback function for menu item.
 */
function example_page() {
  $data = array(
    array('fruit' => 'apple', 'votes' => 16),
    array('fruit' => 'mango', 'votes' => 10),
    array('fruit' => 'banana', 'votes' => 34),
    array('fruit' => 'peach', 'votes' => 20),
    array('fruit' => 'orange', 'votes' => 15),
  );
  $options = array(
    'title' => 'Favourite fruits',
    'fields' => array(
      'votes' => array(
        'label' => t('Votes'),
        'enabled' => TRUE,
      ),
    ),
    'xAxis' => array(
      'labelField' => 'fruit',
    ),
    'data' => $data,
    'type' => 'column',
  );
  $build['chart'] =  array(
    '#theme' => 'visualization',
    '#options' => $options,
  );
  return $build;
}