How To Load More Than On Csv File In Highcharts?

I'm trying to make a plot in highcharts, incorporating variables from 2 CSV files. I made an attempt based on these examples: load multiple csv files (correct order) in one chart a

Solution 1:

Best way would be crating your own CSV parser. Example below:

Array.prototype.concatAll = function() {
  var results = [];
  this.forEach(function(subArray) {
    results.push.apply(results, subArray);
  });

  return results;
};

functioncsvToData(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))
          returnDate.UTC(2000 + a[2], a[1], a[0], a[3], a[4])
        } else {
          returnNumber(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)

Live example: https://jsfiddle.net/a9zocb40/

[EDIT] FOR LIVE DATA

const options = {
  chart: {
    events: {
      load: function() {
        const chart = thisconst data1 = csvToData(test1_csv)
        const data2 = csvToData(test2_csv)
        const mergedData = [...data1, ...data2].sort((a, b) => a[0] - b[0])
        console.log(data1, data2, mergedData)
        chart.series[0].setData(mergedData)
      }
    }
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: [],
    type: 'column'
  }]
}

const chart = Highcharts.chart('container', options);

Live example: https://jsfiddle.net/g8ocqwwr/