Formatting JSON according to data format- CanvasJS HTML5 JavaScript Charts

Formatting JSON according to data format- CanvasJS HTML5 JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

$(document).ready(function() {
	
	$.getJSON("https://api.myjson.com/bins/os4a", function(result) {
	
	//Formatting JSON data
    var data = [];
    var dataPoints;
    for(var i = 0; i < result.length; i++){
    	dataPoints =[];
      for(var dataPoint in result[i]){
        dataPoints.push({label:dataPoint, y:result[i][dataPoint]});
      }
      data.push({dataPoints: dataPoints});
    }
    
    
	var chart = new CanvasJS.Chart("chartContainer", {
		title: {
			text: "Product Ratings"
		},

		animationEnabled: true,

		data: data
	});

	chart.render();
	});
	
});