This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!
Guest

how to create highcharts using data.csv file

By: a guest on Apr 4th, 2012  |  syntax: None  |  size: 2.39 KB  |  views: 1,110  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. 2011-08-01 00:00:00,155
  2.     2011-08-02 00:00:00,156
  3.     2011-08-03 00:00:00,157
  4.     2011-08-03 00:00:00,160
  5.        
  6. $(document).ready(function() {
  7.  
  8.     var options = {
  9.             chart: {
  10.                 renderTo: 'chart',
  11.                 defaultSeriesType: 'line',
  12.                 marginRight: 130,
  13.                 marginBottom: 25
  14.             },
  15.             title: {
  16.                 text: 'reading',
  17.                 x: -20      //center
  18.             },
  19.             xAxis: {
  20.                 title: {
  21.                     text: 'Date Measurement'
  22.                 },
  23.                 categories: []
  24.             },
  25.             yAxis: {
  26.                 title: {
  27.                     text: 'reading'
  28.                 }
  29.             },
  30.             series: []
  31.     };
  32.  
  33.     $.get('C:/Program Files (x86)/Zend/Apache2/htdocs/myproject/public/data.csv', function(data) {
  34.  
  35.         // Split the lines using newline 'n' as delimiter
  36.         var lines = data.split('n');
  37.  
  38.         $.each(lines, function(lineNo, line) {
  39.  
  40.             // split the line elements using comma ',' as delimiter
  41.             var items = line.split(',');
  42.  
  43.             $.each (items, function(itemNo, item) {
  44.                 if(itemNo == 0)
  45.                     options.xAxis.categories.push(item);
  46.                 else if(itemNo > 0) {
  47.                     var series = {
  48.                             data: []
  49.                     };
  50.                     series.data.push(parseFloat(item));
  51.                 };
  52.                 options.series.push(series);
  53.             });
  54.             var chart = new HighCharts.Chart(options);
  55.         });
  56.     });
  57.  
  58. });
  59.        
  60. $(document).ready(function() {          
  61.     var c = [];
  62.     var d = [];
  63.  
  64.     $.get('data.csv', function(data) {
  65.         var lines = data.split('n');
  66.         $.each(lines, function(lineNo, line) {
  67.             var items = line.split(',');
  68.             c.push(items[0]);
  69.             d.push(parseInt(items[1]));
  70.         });
  71.     });
  72.  
  73.     var options = {
  74.         chart: {
  75.             renderTo: 'chart',
  76.             defaultSeriesType: 'line'
  77.         },
  78.         title: {
  79.             text: 'reading'
  80.         },
  81.         xAxis: {
  82.             title: {
  83.                 text: 'Date Measurement'
  84.             },
  85.             categories: c
  86.         },
  87.         yAxis: {
  88.             title: {
  89.                 text: 'reading'
  90.             }
  91.         },
  92.         series: [{
  93.             data: d
  94.         }]
  95.     };
  96.  
  97.     var chart = new Highcharts.Chart(options);
  98.  
  99. });
clone this paste RAW Paste Data