Render Multiple charts from different CSV data on button click - CanvasJS Javascript Charts

Render Multiple charts from different CSV data on button click - 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 -->
<button class="button" id="chart1">Click to Render Chart 1</button>
<button class="button" id="chart2">Click to Render Chart 2</button>
<br/>
<br/>
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>
<br/>
<div id="chartContainer2" style="height: 360px; width: 100%;"></div>

CSS

.button {
  background-color: #228C3A;
  border: none;
  color: white;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

JavaScript

/*
 // note : just for demo data is passed directly and not via ajax

$.ajax({
        type: "GET",
        url: "colopez.csv",
        dataType: "text",
        success: function (dataCsv) { processData(dataCsv); }
    });
*/

var data = [];
var dataCsv1 = '146,73972,2015/08/30/00\n148,23764,2015/08/30/01\n144,10564,2015/08/30/02\n218,1959,2015/08/30/03\n144,540,2015/08/30/04\n66,516,2015/08/30/05\n146,51782,2015/08/30/06\n148,22306,2015/08/30/07\n144,8910,2015/08/30/08\n218,1522,2015/08/30/09\n144,733,2015/08/30/10';

var dataCsv2 = '250,73972,2015/08/30/00\n214,23764,2015/08/30/01\n240,10564,2015/08/30/02\n182,1959,2015/08/30/03\n234,540,2015/08/30/04\n80,516,2015/08/30/05\n246,51782,2015/08/30/06\n184,22306,2015/08/30/07\n214,8910,2015/08/30/08\n180,1522,2015/08/30/09\n186,733,2015/08/30/10';

function addDataPoint(xValue, yValue) {
  var tempX = xValue.split("/");
  var xData = new Date(tempX[0], tempX[1], tempX[2], tempX[3]);
  var yData = parseInt(yValue);

  var dataFlag = false;
  for (var i = 0; i < data.length; i++) {
    data[i].dataPoints.push({
      x: xData,
      y: yData
    });
    dataFlag = true;
  }
  if (!dataFlag) {
    data.push({
      type: "line",
      dataPoints: [{
        x: xData,
        y: yData
      }]
    });
  }
}

function processData(allText) {
  var allLinesArray = allText.split('\n');
  if (allLinesArray.length > 0) {
    for (var i = 0; i <= allLinesArray.length - 1; i++) {
      var rowData = allLinesArray[i].split(',');
      addDataPoint(rowData[2], rowData[0]);
    }
  }
}

document.getElementById("chart1").onclick = function() {
  data = [];
  var chart1 = new CanvasJS.Chart("chartContainer1", {
    title: {
      text: "Chart 1"
    },
    axisX: {
      interval: 1,
      intervalType: "hour"
    },
    data: data
  });
  processData(dataCsv1);
  chart1.render();
}

document.getElementById("chart2").onclick = function() {
  data = [];
  var chart2 = new CanvasJS.Chart("chartContainer2", {
    theme: "theme2",
   ...