Adding dataSeries from serverJSON - CanvasJS JavaScript Charts

Adding dataSeries from serverJSON - 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>
<button id="viewratings">Add Ratings</button>

JavaScript

$(document).ready(function() {

	var chart;
	
	$.getJSON("https://api.myjson.com/bins/1xcza", function(result) {

		chart = new CanvasJS.Chart("chartContainer", {
			title: {
				text: "Product Ratings"
			},

			animationEnabled: true,

			data: [{
					dataPoints: result
				}]
		});

		chart.render();
	});
	
	//Function to render the chart on button click

	var updateChart = function() {

		$.getJSON("https://api.myjson.com/bins/48y8m", function(result) {

			var data = {
					dataPoints: result
				};
			chart.options.data.push(data);
			chart.render();
		});

	};

	//Function for button click event

	document.getElementById("viewratings").onclick = function() {
		updateChart();
	}

});