FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Live Updating Charts from JSON API & AJAX

Live Updating Charts from JSON API & AJAX

Viewing 2 posts - 1 through 2 (of 2 total)

Tagged: 

  • September 6, 2019 at 12:14 am #26677

    gmulligan

    I’m using the example copied directly from the web page: “Live Updating Charts from JSON API & AJAX”

    I’ve put it on my apache server.

    It doesn’t seem to work.

    I just get a blank page.

    I cut and copied the text below directly from the example on the page. i’ve even tried setting CORS. HELP!!!

    —–

    <!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
	var dataPoints = [];
	var chart;
	$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json", function(data) {  
		$.each(data, function(key, value){
			dataPoints.push({x: value[0], y: parseInt(value[1])});
		});
		chart = new CanvasJS.Chart("chartContainer",{
			title:{
				text:"Live Chart with dataPoints from External JSON"
			},
			data: [{
				type: "line",
				dataPoints : dataPoints,
			}]
		});
		chart.render();
		updateChart();
	});
	function updateChart() {
	$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=" + (dataPoints.length + 1) + "&ystart=" + (dataPoints[dataPoints.length - 1].y) + "&length=1&type=json", function(data) {
		$.each(data, function(key, value) {
			dataPoints.push({
			x: parseInt(value[0]),
			y: parseInt(value[1])
			});
		});
		chart.render();
		setTimeout(function(){updateChart()}, 1000);
	});
	}
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
    September 6, 2019 at 3:52 pm #26682

    Manoj Mohan

    @gmulligan

    For security reasons, cross-origin requests are restricted by browsers. JSONP allows you to sidestep the cross-origin requests. To access JSON from a different domain, you can refer to JSONP. Please take a look at this JSFiddle that creates a line chart from AJAX & JSONP.

    —-
    Manoj Mohan
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

Tagged: 

You must be logged in to reply to this topic.