Drupal Technical
[Drupal] Implementation of multiple graphs on single page in drupal using highchart
Highcharts is a charting library written in pure HTML5/JavaScript. Without generating the image we can display the graph. I had a requirement to generate a multiple graph on a single page in a Drupal site. Read on to know how to implement multiple graphs on single page in Drupal using highchart.
Javascript graphs allow interaction between the graph and elements in your html. It will also reduce the Server load. I have downloaded the high chart api, and include the js files. They give some sample graph, you can choose as per your requirement. To draw a graph we need to pass json value. And follow the steps given below.
Step 1:
Include the following js file.
drupal_add_js(drupal_get_path('module', 'module_name') . '/scripts/highcharts.js');
drupal_add_js(drupal_get_path('module', 'module_name') . '/scripts/exporting.js');
Step 2:
The sample format is given below.
function menu_call_back() {
// This is the sample format. You can also retrive from database, but the format is given below.
$data = Array ( [x_values] => Array ( [0] => 2013-01-01 [1] => 2013-02-24 [2] => 2013-03-04 [3] => 2013-04-01 [4] => 2013-04-30 [5] => 2013-05-06 [6] => 2013-09-29 [7] => 2013-10-06 [8] => 2013-10-14 [9] => 2013-11-01 ) [y_values] => Array ( [BMI] => Array ( [0] => 20 [1] => 20 [2] => 20 [3] => 20 [4] => 20 [5] => 20 [6] => 20 [7] => 20 [8] => 20 [9] => 20 ) [Weight] => Array ( [0] => 60 [1] => 60 [2] => 20 [3] => 20 [4] => 60 [5] => 60 [6] => 60 [7] => 20 [8] => 20 [9] => 20 ) ) );
$get_graph_data = get_graph_data($data);
$data = array(
'title' => $get_graph_data['title'],
'data' => $get_graph_data['data'],
'participant_name' => $get_graph_data['participant_name'],
);
drupal_add_js(array('graph_content' => array('data' => $data)), 'setting');
}
<p>In the below function, i have store the value in $output_json by differentiating each value using '@@@'. It will be split in js file to generate multiple graph on a single page.</p>
function get_graph_data($data) {
foreach ($data['y_values'] as $data_id => $data_value) {
$rows['name'] = $data_id;
$title[] = $data_id;
$final_save_data = array();
$final_output_data = array();
for ($i = 0; $i < count($data_value); $i++) {
$save_data = array();
if ($data_value[$i]) {
//Split data, month, year
list($year, $month, $day) = explode('-', $data['x_values'][$i]);
$utc_time = mktime(0, 0, 0, $month, $day, $year) * 1000;
$save_data[] = $utc_time;
$save_data[] = $data_value[$i];
$final_save_data[] = $save_data;
}
}
$rows['data'] = $final_save_data;
array_push($output, $rows);
$final_putput_data[] = json_encode($output, JSON_NUMERIC_CHECK);
$output_json .= json_encode($output, JSON_NUMERIC_CHECK) . "@@@";
$rows = array();
$output = array();
}
}
// Sample output of $output_json [{"name":"BMI","data":[[1356998400000,20],[1361664000000,20],[1362355200000,20],[1364774400000,20],[1367280000000,20],[1367798400000,20],[1380412800000,20],[1381017600000,20],[1381708800000,20],[1383264000000,20]]}]@@@[{"name":"Weight","data":[[1356998400000,60],[1361664000000,60],[1362355200000,20],[1364774400000,20],[1367280000000,60],[1367798400000,60],[1380412800000,60],[1381017600000,20],[1381708800000,20],[1383264000000,20]]}]@@@
$content_of_graph = array();
$content_of_graph['participant_name'] = 'TEST';
$content_of_graph['data'] = substr($output_json, 0, -3);
// Array ( [title] => Array ( [0] => Weight [1] => BMI ) [participant_name] => subin [data] => [{"name":"Weight","data":[[1356998400000,60],[1361664000000,60],[1362355200000,20],[1364774400000,20],[1367280000000,60],[1367798400000,60],[1380412800000,60],[1381017600000,20],[1381708800000,20],[1383264000000,60]]}]@@@[{"name":"BMI","data":[[1356998400000,20],[1361664000000,20],[1362355200000,20],[1364774400000,20],[1367280000000,20],[1367798400000,20],[1380412800000,20],[1381017600000,20],[1381708800000,20],[1383264000000,20]]}] )
return $content_of_graph;
}
Step 3:
Place the below code in a js file and include it.
(function ($) {
Drupal.behaviors.graph_content = {
attach: function(context) {
if (Drupal.settings.graph_content) {
var title = Drupal.settings.graph_content.data.title;
var plot_data = Drupal.settings.graph_content.data.data;
var participant_name = Drupal.settings.graph_content.data.participant_name;
var splited_data =plot_data.split('@@@');
var result = jQuery.makeArray(splited_data);
var title_array = jQuery.makeArray(title);
for (var i=0;i<result.length;i++)
{
$("#content-wrap").append("<div align=center id=title_report"+i+">"+title_array[i]+" change of "+participant_name+"</div>");
$("#title_report"+i).append("<div id=show_report"+i+">Graph will display here....</div>");
$('#show_report'+i).highcharts({
chart: {
type: 'spline'
},
title: {
text: title_array[i]
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%Y'
}
},
yAxis: {
title: {
text: title_array[i]
},
min: 0
},
tooltip: {
formatter: function() {
return ''+ this.series.name +'
'+
Highcharts.dateFormat('%e. %b %Y', this.x) +': '+ this.y;
}
},
series: $.parseJSON(result[i])
});
}
}
}
}
})(jQuery);
Follow the steps as given above, it will display the multiple-line graphs on the given div id. Thus i have implemente highchart on drupal site.
