add post loading events to a highchart graph using a csv file - Javascript highcharts

Javascript examples for highcharts:Chart Event

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Event

Description

add post loading events to a highchart graph using a csv file

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(document).ready(function() {
  var options = {// w  w  w . j  ava 2 s. c om
    chart: {
      renderTo: 'container',
      type: 'line'
    },
    xAxis: {
      type: 'datetime'
    }
  };
  $.get('data.csv', function(data) {
    var lines = data.split('\n');
    var series = [],
      dynamic = [],
      chart;
    $.each(lines, function(lineNo, line) {
      var items = line.split(';');
      if (lineNo === 0) {
        $.each(items, function(itemNo, item) {
          if (itemNo !== 0) {
            series[itemNo - 1] = {
              name: item,
              data: []
            };
            dynamic[itemNo - 1] = {
              data: []
            };
          }
          //if (itemNo > 0) options.xAxis.categories.push(item);
        });
        options.series = series;
        // Create the chart
        chart = new Highcharts.Chart(options);
      }
      else {
        var date = 0;
        $.each(items, function(itemNo, item) {
          if (itemNo === 0) {
            date = Date.parse(item);
          } else {
            dynamic[itemNo - 1].data.push({
              x: date,
              y: parseFloat(item)
            });
          }
        });
      }
    });
    var len = dynamic.length,
      iter = 0,
      iterLen = dynamic[0].data.length;
    var addingDataDynamically = setInterval(function() {
      if (iter < iterLen) {
        for (var k = 0; k < len; k++) {
          chart.series[k].addPoint(dynamic[k].data[iter], false);
        }
        chart.redraw();
        iter++;
      } else {
        clearInterval(addingDataDynamically);
      }
    }, 1000)
  });
});
// Emulate get
$.get = function(id, fn) {
  fn(document.getElementById(id).innerHTML);
};

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 300px"></div> 
      <pre id="data.csv" style="display: none">Date;Input1;Input2;Input3;Input4
07.11.2014 01:20:28;0.15;0.16;0.19;0.15
07.11.2014 01:20:35;0.14;0.15;0.16;0.14
07.11.2014 01:20:36;0.15;0.14;0.19;0.17
07.11.2014 01:20:45;0.24;0.15;0.13;0.14
07.11.2014 01:20:56;0.15;0.24;0.11;0.14
</pre>  
   </body>
</html>

Related Tutorials