Multiple Charts from Single CSV File- CanvasJS JavaScript Charts

Multiple Charts from Single CSV File- 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="chartContainer1" style="height: 360px; width: 100%;"></div>
<br/>
<div id="chartContainer2" style="height: 360px; width: 100%;"></div>

JavaScript

var dataPoints1 = [];
var dataPoints2 = [];

var chart1 = new CanvasJS.Chart("chartContainer1", {
  title: {
    text: "Chart 1 from CSV",
  },
  data: [{
    type: "line",
    dataPoints: dataPoints1
  }]
});

var chart2 = new CanvasJS.Chart("chartContainer2", {
  title: {
    text: "Chart 2 from CSV",
  },
  data: [{
    type: "line",
    dataPoints: dataPoints2
  }]
});

var dps = [dataPoints1, dataPoints2];
var index = -1;

function getDataPointsFromCSV(csv) {
  var dataPoints = csvLines = points = [];
  csvLines = csv.split(/[\r?\n|\r|\n]+/);
  
  for (var i = 0; i < csvLines.length; i++)
    if (csvLines[i].length > 0) {
      if (csvLines[i].indexOf("chart") > -1)
        index++;
      else {
        points = csvLines[i].split(",");

        if (isNaN(points[0])) {
          dps[index].push({
            label: points[0],
            y: parseFloat(points[1])
          });
        } else {
          dps[index].push({
            x: parseFloat(points[0]),
            y: parseFloat(points[1])
          });
        }
      }
    }
}

//CSV data is stored in 'https://codepen.io/vishwas/pen/ORkZPw.js'
$.get("https://codepen.io/vishwas/pen/ORkZPw.js", function(data) {
  getDataPointsFromCSV(data);
  
  chart1.render();
  chart2.render();
});