Multi Series Column Chart from External CSV - CanvasJS

Multi Series Column Chart from External CSV - CanvasJS

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 = [];
var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  title:{
    text: "Crude Oil Reserves vs Production, 2016"
  },	
  axisY: {
    title: "Billions of Barrels",
    titleFontColor: "#4F81BC",
    lineColor: "#4F81BC",
    labelFontColor: "#4F81BC",
    tickColor: "#4F81BC"
  },
  axisY2: {
    title: "Millions of Barrels/day",
    titleFontColor: "#C0504E",
    lineColor: "#C0504E",
    labelFontColor: "#C0504E",
    tickColor: "#C0504E"
  },	
  toolTip: {
    shared: true
  },
  legend: {
    cursor:"pointer",
    itemclick: toggleDataSeries
  },
  data: [
    {
      type: "column",
      name: "Proven Oil Reserves (bn)",
      legendText: "Proven Oil Reserves",
      showInLegend: true, 
      dataPoints: dps1
    },
    {
      type: "column",	
      name: "Oil Production (million/day)",
      legendText: "Oil Production",
      axisYType: "secondary",
      showInLegend: true,
      dataPoints: dps2
    }
  ]
});

function toggleDataSeries(e) {
  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
  }
  else {
    e.dataSeries.visible = true;
  }
  chart.render();
}

//CSV is stored in https://codepen.io/vishwas/pen/wxyJGm.js
$.get("https://codepen.io/vishwas/pen/wxyJGm.js", function(data) {
  var dataPoints, csvLines, points;
  dataPoints = csvLines = points = [];

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

      dps1.push({label: points[0], y: parseFloat(points[1])});
      dps2.push({label: points[0], y: parseFloat(points[2])});
    }
  chart.render();
});