Loading data from CSV File with Many Data Points - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

Loading data from CSV File with Many Data Points

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highchart Line Graph with Dates</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//  ww w . j  a v a 2  s. co m
function parseDate(dateStr) {
    var matches = dateStr.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})/)
    return Date.UTC(matches[3], matches[1] - 1, matches[2]);
}
var csv = 'Chart,11/1/2013|6,11/2/2013|4,11/3/2013|6,11/4/2013|3,11/5/2013|5,11/6/2013|5,11/7/2013|5,11/8/2013|6,11/9/2013|4,11/10/2013|13,11/11/2013|12,11/12/2013|3,11/13/2013|5,11/14/2013|7,11/15/2013|9,11/16/2013|0,11/17/2013|2,11/18/2013|3,11/19/2013|2,11/20/2013|16,11/21/2013|6,11/22/2013|9,11/23/2013|9,11/24/2013|20,11/25/2013|10,11/26/2013|10,11/27/2013|4,11/28/2013|9,11/29/2013|7,11/30/2013|7';
var options = {
    chart: {
        renderTo: 'chart',
        type: 'line'
    },
    title: {
        text: 'Sales'
    },
    xAxis: {
        type: 'datetime'
    },
    series: []
};
var lines = csv.split('\n');
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');
        var series = {
            data: []
        };
        $.each(items, function (itemNo, item) {
            if (itemNo == 0) {
                series.name = item;
            } else {
                var points = item.split('|');
                series.data.push([parseDate(points[0]), parseFloat(points[1])]);
            }
        });
        options.series.push(series);
    });
    var chart = new Highcharts.Chart(options);
    }

      </script> 
   </head> 
   <body> 
      <div id="chart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials