Render Chart from Microsoft Excel (xls) using SheetJS - CanvasJS JavaScript Chart

Render Chart from Microsoft Excel (xls) using SheetJS - CanvasJS JavaScript Chart

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.js"></script>
<input type="file" id="dataFile" />
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var oFileIn;
var dps = [];

var chart = new CanvasJS.Chart("chartContainer", {
  data: [
    {
      type: "column",
      dataPoints: dps
    }					
  ]
});

$(function() {
  oFileIn = document.getElementById('dataFile');
  if(oFileIn.addEventListener) {
    oFileIn.addEventListener('change', parseDataAndRenderChart, false);
  }
});

function parseDataAndRenderChart(oEvent) {
  
  var oFile = oEvent.target.files[0];
  var sFilename = oFile.name;
  var reader = new FileReader();

  reader.onload = function(e) {
    var data = e.target.result;
    var cfb = XLS.CFB.read(data, {type: 'binary'});
    var wb = XLS.parse_xlscfb(cfb);
    
    wb.SheetNames.forEach(function(sheetName) {    
      var sCSV = XLS.utils.make_csv(wb.Sheets[sheetName]);   
      var oJS = XLS.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
      
      for(var i = 0; i < oJS.length; i++) {
        dps.push({ x: parseFloat(oJS[i].x), y: parseFloat(oJS[i].y)});
      }
      
      chart.render();
    });
  };
  
  reader.readAsBinaryString(oFile);
}