Multi Series Chart from Multiple External CSV Files | CanvasJS JavaScript Charts

Multi Series Chart from Multiple External CSV Files | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dps1 = [], dps2 = [];
function getDataPointsFromCSV(data) {
  var dataPoints, csvLines, points;
  dataPoints = csvLines = points = [];
  var dps = [];
  csvLines = data.split(/[\r?\n|\r|\n]+/);
  for (var i = 0; i < csvLines.length; i++)
    if (csvLines[i].length > 0) {
      points = csvLines[i].split(",");

      dps.push({label: points[0], y: parseFloat(points[1])});
    }
  return dps;
}
//CSV is stored in https://codepen.io/anon/pen/QZPgwo.js and https://codepen.io/anon/pen/XxQgmm.js
$.when (
  $.get("https://docs.google.com/spreadsheets/d/e/2PACX-1vQiwONrBHJ5onL-NOSOjgxO7L9Lf7O5iRlA9NXIjE4-nSDoyBOyn9oEh5zOLJrHNyYGAD4EeLX0paTg/pub?output=csv",function(result){dps1 = getDataPointsFromCSV(result)}),
  $.get("https://docs.google.com/spreadsheets/d/e/2PACX-1vQiwONrBHJ5onL-NOSOjgxO7L9Lf7O5iRlA9NXIjE4-nSDoyBOyn9oEh5zOLJrHNyYGAD4EeLX0paTg/pub?output=csv",function(result){dps2 = getDataPointsFromCSV(result)})
).then(function(){
  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title:{
      text: "Multi Series Chart from External CSV Data"
    },
    data: [
      {
        type: "column",
        dataPoints: dps1
      },
      {
        type: "line",	
        dataPoints: dps2
      }
    ]
  });
  chart.render();
});