Column chart from Dynamic text file - CanvasJS JavaScript Charts

Column chart from Dynamic text file - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://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;
  var dps1= [], dps2 = [], dps3 = [];
  
  dpsList = dpsList.split("\n");
  
  // Empty the dataPoints of all series
  for(var i = 0; i < chart.options.data.length; i++) 
  	chart.options.data[i].dataPoints = [];
    
  for(var i = 0; i < dpsList.length; i++) {
  	dataPoint = parseFloat(dpsList[i].split(" ")[1]);
		var seriesIndex = parseInt(dpsList[i].split(" ")[2]);
    
    if(dpsList[i].split(" ")[0] === "neg") {
    	dataPoint *= -1;
    }
    chart.options.data[seriesIndex].dataPoints.push({y: dataPoint});  
  }
  chart.render();
}