Articles


How to use highcharts in Drupal 7

How to use highcharts in Drupal 7



Posted byvarghese.t,11th Jan 2017

Highcharts  is a JavaScript charting library, used to enhance the web application. Like other applications, Drupal also has modules and functions to implement Highcharts in our web application.

There is one primary function, `highcharts_render()` (returns HTML for a highcharts container and renders a highcharts options object within it). Modules may create highchart options objects (check http://api.highcharts.com/highcharts), leveraging anything available in the Highcharts API. Additionally, modules may implement `hook_highcharts_methods_alter()` to define additional options that should be evaluated as methods. Example options object:



/**
 * Pie-basic highcharts options object.
 *
 * @see highcharts_render()
 */
function custom_pie_basic_options() {
  $options = new stdClass();

  // Chart.
  $options--->chart = (object)array(
    'renderTo' => 'container',
    'plotBackgroundColor' => NULL,
    'plotBorderWidth' => NULL,
    'plotShadow' => FALSE,
  );

  // Title.
  $options->title->text = t('Pies');

  // Tooltip.
  // Normally formatter is a function callback. For now we'll make it a string.
  // @todo whenever this is user defined (views config, etc) be sure to sanitize
  // this string before passing to highcharts_render().
  $options->tooltip->formatter = "function() {return ''+ this.point.name +': '+ this.percentage +' %';}";

  // Plot options.
  $options->plotOptions->pie = (object)array(
    'allowPointSelect' => TRUE,
    'cursor' => 'pointer',
    'dataLabels' => array(
      'enabled' => FALSE,
    ),
    'showInLegend' => TRUE,
  );

  // Series.
  $options->series = array();
  $series = new StdClass();
  $series->type = 'pie';
  $series->name = 'Slices';
  $series->data = array();
  $series->data[] = array('Banana creme', 45.0);
  $series->data[] = array('Pumpkin', 26.8);

  // Selected item is an object.
  $selected = new stdClass();
  $selected->name = 'Apple';
  $selected->y = 12.8;
  $selected->sliced = TRUE;
  $selected->selected = TRUE;
  $series->data[] = $selected;

  $series->data[] = array('Lemon merengue', 8.5);
  $series->data[] = array('Mincemeat', 6.2);
  $series->data[] = array('Others', 0.7);

  $options->series[] = $series;

  // Diable credits.
  $options->credits->enabled = FALSE;

  return $options;
}

Example implementation of new Drupal Highcharts API functions:



/**
 * Pie-basic highcharts block.
 *
 * @return hook_block_view() definition.
 */
function _custom_block_view_pie_basic() {
  $options = custom_pie_basic_options();
  if (is_object($options)) {
    // Optionally add styles or any other valid attributes, suitable for
    // drupal_attributes().
    $attributes = array('style' =--> array('height: 400px;'));

    // Return block definition.
    return array(
      'subject' => check_plain($options->title->text),
      'content' => highcharts_render($options, $attributes),
    );
  }
}
Categories