Pie Chart from external JSON - CanvasJS JavaScript Charts

Pie Chart from external JSON - CanvasJS 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

var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "Pie chart from JSON data"
	},
	data: [{
		type: "pie",
    indexLabel: "{label}, {y}",
		dataPoints: dataPoints
	}]
});

function addData(data) {
	for (var i = 0; i < data.length; i++) {
		dataPoints.push({
			label: data[i].name,
			y: data[i].count
		});
	}
	chart.render();

}

$.getJSON("https://api.myjson.com/bins/ps6fi", addData);