Rendering Chart from JSON Data - CanvasJS

Rendering Chart from JSON Data

by a_gov

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<br><br>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
       zoomEnabled: true,  
      data: [
      /* {
        type: "line",
        //indexLabel: theFile.name+": {y}",
        dataPoints: dataPoints
      } */
      ],
      
        legend:{
  cursor:"pointer",
  itemclick : function(e) {
  var content;
  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
/*      content = e.chart.data[e.dataSeriesIndex].toolTipContent;
         e.dataSeries.toolTipContent = null; */
    //chart.axisY2[1].set("maximum", null); 
  }
  else {
    e.dataSeries.visible = true;
/*      console.log(e)
         e.dataSeries.toolTipContent = content; */
 //   chart.axisY2[1].set("maximum", 250); 
}
chart.render();
}
}
    });


var json;

function handleFileSelect(evt) {
	var files = evt.target.files; // FileList object

	// files is a FileList of File objects. List some properties.

}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

function handleFileSelect(evt) {
	var files = evt.target.files; // FileList object

	// files is a FileList of File objects. List some properties.
	var output = [];
  
	for (var i = 0, f; f = files[i]; i++) {
		var reader = new FileReader();

		// Closure to capture the file information.
		reader.onload = (function (theFile) {
			return function (e) {
				console.log('e readAsText = ', e);
				console.log('e readAsText target = ', e.target);
				try {
					json = JSON.parse(e.target.result);
					//alert('json global var has been set to parsed json of this file here it is unevaled = \n' + JSON.stringify(json));
          
var dataPoints = [];          
for(key in json){
		
    dataPoints.push({y: json[key]["precipitation"]["value"], x: new Date(json[key]["observation_time"]["value"])});
    
}
var dataSeries = {
          type: "area",
          showInLegend: true,
          name: theFile.name.split('.')[0],
          dataPoints: dataPoints
        }
 ...