News

[Drupal] How to implement a multiple-line graph in Drupal using Highcharts

Subin.manuvel | | 3 min read

Highcharts is a charting library written in pure HTML5/JavaScript. Without generating the image we can display the graph. Download highcharts library from http://www.highcharts.com/. I have a requirement to generate a multiple-line graph. In my situation , I have to generate multiple-line graphs. So I choose javascript to generate multiple-line graphs, it will increase the performance also. Otherwise, it will increase the server load (if I generate a graph as an image). 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.


//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-09-18 [1] => 2013-09-29 [2] => 2013-10-06 [3] => 2013-10-14 [4] => 2013-10-18 [5] => 2013-11-01 ) [y_values] => Array ( [Test1] => Array ( [0] => 15 [1] => [2] => [3] => [4] => 18 [5] => ) [Test2] => Array ( [0] => [1] => 20 [2] => 20 [3] => 20 [4] => [5] => 20 ) ) );
  $get_graph_data = get_graph_data($data);
  $data = array(
    'title' => $get_graph_data['title'],
    'data' => $get_graph_data['data'],
  );
  drupal_add_js(array('graph_content' => array('data' => $data)), 'setting');
}
//This function will convert the array into json.
function get_graph_data($data) {
  foreach ($data['y_values'] as $data_id => $data_value) {
    $rows['name'] = $data_id;
    $final_save_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);
  }

  // $output format Array ( [0] => Array ( [name] => Test1 [data] => Array ( [0] => Array ( [0] => 1379462400000 [1] => 15 ) [1] => Array ( [0] => 1382054400000 [1] => 18 ) ) ) [1] => Array ( [name] => Test2 [data] => Array ( [0] => Array ( [0] => 1380412800000 [1] => 20 ) [1] => Array ( [0] => 1381017600000 [1] => 20 ) [2] => Array ( [0] => 1381708800000 [1] => 20 ) [3] => Array ( [0] => 1383264000000 [1] => 20 ) ) ) ).

  $content_of_graph = array();
  $content_of_graph['title'] = 'Tittle of graph';
  $content_of_graph['data'] = json_encode($output, JSON_NUMERIC_CHECK);
  // Array ( [title] => BMI [data] => [{"name":"Test1","data":[[1379462400000,15],[1382054400000,18]]},{"name":"Test2","data":[[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 data = Drupal.settings.graph_content.data.data;
        var title = Drupal.settings.graph_content.data.title;
        // Place a div name correcly.
        $("#show_graph_div").append("<div id='show_report'>Graph will display here.....</div>");
        $('#show_report').highcharts({
          chart: {
            type: 'spline'
          },
          title: {
            text: title
          },
          subtitle: {
            text: ''
          },
          xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
              month: '%e. %b',
              year: '%Y'
            }
          },
          yAxis: {
            title: {
              text: title
             },
             min: 0
          },
          tooltip: {
            formatter: function() {
              return ''+ this.series.name +'
'+ Highcharts.dateFormat('%e. %b %Y', this.x) +': '+ this.y;
            }
          },
                      
          series: $.parseJSON(data)
        });
      }
    }
  }
})(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.

 

 

Related Topics