Drupal Technical

[Drupal] Learn how to integrate Highcharts in Drupal?

Subin.manuvel | | 3 min read

Highcharts is a charting library written in pure HTML5/JavaScript. Without generating an image we can display a graph using the library. I have a requirement to generate a graph on one of my Drupal projects. In my situation, I have to generate a graph depend on user filtered data. So I choose javascript to generate graphs, it will increase the performance also. Otherw ise, it will increase the server load (if I generate a graph as an image.). Read on to know how to integrate Highcharts in Drupal

Javascript graphs allow interaction between the graph and elements in your HTML. It will also reduce the Server load. Download the high chart api, and include the js files. They give some sample graph, you choose as per your requirement. To draw a graph we need to pass json value. 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.
          $xy_data = Array ( [x_values] => Array ( [0] => 2013-09-29 [1] => 2013-10-06 [2] => 2013-10-14 [3] => 2013-11-01 ) [y_values] => Array ( [Test] => Array ( [0] => 20 [1] => 20 [2] => 20 [3] => 20 ) ) );
          $get_data_graph = get_graph_data($xy_data);
          $data = array( 
            'title' => $get_data_graph['title'],
            'data' => $get_data_graph['data'],
          );
          drupal_add_js(array('graph_content' => array('data' => $data)), 'setting');
        }

        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 ( [name] => Test [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":"TEST","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 graph on the given div id. Thus i have implemente highchart on drupal site.

Related Topics