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: []
    }
  ]
}); 

//-- 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 dps = [], dataPoint;
  
  dpsList = dpsList.split("\n");
  
  for(var i = 0; i < dpsList.length; i++) {
  	dataPoint = parseFloat(dpsList[i].split(" ")[1]);
    if(dpsList[i].split(" ")[0] === "neg") {
    	dataPoint *= -1;
    }
    dps.push({ y: dataPoint });
  }
  chart.options.data[0].dataPoints = dps;
  chart.render();
}