How to use highcharts in Drupal 7

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:


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:


 array('height: 400px;'));

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