Column chart from Dynamic text file - CanvasJS JavaScript Charts

Column chart from Dynamic text file - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<input type="file" id="input">
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "theme2",
  title: {
    text: "Live Chart from Text File"
  },
  data: [
    {
      type: "column",
      dataPoints: []
    },
    {
      type: "column",
      dataPoints: []
    },
    {
      type: "column",
      dataPoints: []
    }
  ]
}); 

//-- Event handler for the input tag
var inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);

function handleFiles() {
  var fileList = this.files;
  var reader = new FileReader();

  setInterval(function() {
    reader.readAsText(fileList[0]);
    reader.onload = function() {
      renderChart(reader);
    }
  }, 1000);
}

function renderChart(reader) {
  var dpsList = reader.result;  
  var dataPoint;

  dpsList = dpsList.split("\n");
  for(var i = 0; i < chart.options.data.length; i++) 
    chart.options.data[i].dataPoints = [];

  for(var i = 0; i < dpsList.length; i++) {
		var dpsRow = dpsList[i].split(" ");
    if(dpsRow[0] === "Neg") 
      chart.options.data[0].dataPoints.push({y: parseFloat(dpsRow[1]) * -1});
    else 
      chart.options.data[0].dataPoints.push({y: parseFloat(dpsRow[1])});

    if(dpsList[i].split(" ")[2] === "Neg") 
      chart.options.data[1].dataPoints.push({y: parseFloat(dpsRow[3]) * -1});
    else 
      chart.options.data[1].dataPoints.push({y: parseFloat(dpsRow[3])});

    if(dpsList[i].split(" ")[4] === "Neg") 
      chart.options.data[2].dataPoints.push({y: parseFloat(dpsRow[5]) * -1});
    else 
      chart.options.data[2].dataPoints.push({y: parseFloat(dpsRow[5])});

  }
  chart.render();
}