[Drupal] How to implement a multiple-line graph in Drupal using Highcharts
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY subin.manuvel
5 years ago
News
0 comments comment

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 ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
close

on 01st April 2007 / by webmaster
The project aims to open up the freelancing market for the Student Community and thereby give tre News Application Development Freelancing Leave a reply Your email address will not be published. Required fields are marked * Anonymous (not verified) access_time 15 Aug 2020 - 10:38 How can i join this project? what will be rewards and benefits? I am an MBA + BE webmaster access_time 15 Aug 2020 - 10:38 In reply to To know more by Anonymous (not verified) One of the main objectives of the project was to bring to the engineering students an opportunity to earn while they learn at school. In what capacity are you looking forward to joining the project? Cheers Anoop John Team Zyxware Add new comment
/themes/custom/zyxpro_light/images/placeholder.png
more_horiz
close

on 17th October 2007 / by webmaster
The release of the health monitoring system was well received by the media. It was covered in almost all the regional newspapers including Malayala Manorama, Mathrubhoomi, Deshabhimani, and some of the regional television channels like DD1 Malayalam, JaiHind, Kairali People, Manorama TV, Amruta TV. It was also taken well by the online media including Hindu, PTI etc. Although we didn't get hold of all the copies of the press releases published in the media we have collected some of the published content and are sharing it here. News Leave a reply Your email address will not be published. Required fields are marked * jeims wadson (not verified) access_time 15 Aug 2020 - 10:38 Very useful website, wants to see much more on it! Go on! Add new comment
Leave a reply
Your email address will not be published. Required fields are marked *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.