load more than on CSV file - Javascript highcharts

Javascript examples for highcharts:Chart CSV Data

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

Description

load more than on CSV file

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {// www  .  ja  v  a2s .  c om
   min-width: 300px;
   max-width: 800px;
   height: 300px;
   margin: 1em auto;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
Array.prototype.concatAll = function() {
  var results = [];
  this.forEach(function(subArray) {
    results.push.apply(results, subArray);
  });
  return results;
};
function csvToData(csv) {
  return csv.split('\n')
    .splice(1)
    .map((line) => line
      .split(',')
      .map((val, i) => {
        if (i === 0) {
          const a = val
            .split(' ')
            .map((s, i) => i === 0 ? s.split('-') : s.split(':')).concatAll().map(s => Number(s))
          return Date.UTC(2000 + a[2], a[1], a[0], a[3], a[4])
        } else {
          return Number(val)
        }
      })
    )
}
const test1_csv = `Date, Puren
18-07-16 0:00,152
18-07-16 2:00,175
18-07-16 4:00,188
18-07-16 6:00,209
18-07-16 8:00,241
18-07-16 10:00,254
18-07-16 12:00,262
18-07-16 14:00,267
18-07-16 16:00,290
18-07-16 18:00,324
18-07-16 20:00,341
18-07-16 22:00,343
19-07-16 0:00,344
19-07-16 2:00,346
19-07-16 4:00,348
19-07-16 6:00,353
19-07-16 8:00,362
19-07-16 10:00,374
19-07-16 12:00,375
19-07-16 14:00,373
19-07-16 16:00,376
19-07-16 18:00,379
19-07-16 20:00,376
19-07-16 22:00,367
21-07-16 0:00,347
21-07-16 2:00,322
21-07-16 4:00,306
21-07-16 6:00,278
21-07-16 8:00,237
21-07-16 10:00,216
21-07-16 12:00,204
21-07-16 14:00,198
21-07-16 16:00,174
21-07-16 18:00,140
21-07-16 20:00,123
21-07-16 22:00,120`
const test2_csv = `Date, Ferroviario
19-07-16 0:00,172
19-07-16 2:00,171
19-07-16 4:00,169
19-07-16 6:00,169
19-07-16 8:00,169
19-07-16 10:00,165
19-07-16 12:00,154
19-07-16 14:00,121
19-07-16 16:00,82
19-07-16 18:00,67
19-07-16 20:00,63
19-07-16 22:00,59
21-07-16 0:00,56
21-07-16 2:00,53
21-07-16 4:00,50
21-07-16 6:00,44
21-07-16 8:00,32
21-07-16 10:00,24
21-07-16 12:00,21
21-07-16 14:00,20
21-07-16 16:00,17
21-07-16 18:00,14
21-07-16 20:00,13
21-07-16 22:00,12
22-07-16 0:00,11
22-07-16 2:00,11
22-07-16 4:00,11
22-07-16 6:00,9
22-07-16 8:00,9
22-07-16 10:00,9
22-07-16 12:00,9
22-07-16 14:00,9
22-07-16 16:00,9
22-07-16 18:00,9
22-07-16 20:00,9
22-07-16 22:00,9`
const data1 = csvToData(test1_csv)
const data2 = csvToData(test2_csv)
const mergedData = [...data1, ...data2]
const options = {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: mergedData,
    type: 'column'
  }]
}
const chart = Highcharts.chart('container', options);
console.log(data1, data2, mergedData)
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials