Bubble Chart from JSON with reference dataPoint - CanvasJS JavaScript Charts

Bubble Chart from JSON with reference dataPoint - 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 chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2",
	title: {
		text: "Bubble chart From JSON"
	},
	data: [{
		type: "bubble",
		dataPoints: [
    	{x: 5, y: 200, z: 0, name: "US", color: "transparent", toolTipContent: null} // Dummy dataPoint to set the reference
    ]
	}]
});
chart.render();

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

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