FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Chart is not displaying

Chart is not displaying

Viewing 2 posts - 1 through 2 (of 2 total)
  • June 27, 2018 at 12:49 pm #21265

    kirti

    I am trying to create a line chat by reading a .json file.
    The following code I am trying :

    <!DOCTYPE HTML>
<html>
<head>
<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>
<script type="text/javascript">
window.onload = function () {
var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer",{
	title:{
		text:"Rendering Chart with dataPoints from External JSON"
	},
	data: [{
		type: "line",
		dataPoints : dataPoints,
	}]
});
$.getJSON("C:\Users\snehmani\Desktop\kumarchart.json", function(data) {  
	$.each(data, function(key, value){
		dataPoints.push({x: value[0], y: parseInt(value[1])});
	});	
	chart.render();
});
}
</script>

</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

    FORMAT OF .JSON FILE IS :

    {
		"Date & Time": "",
		"Station": "",
		"AP": "(mBar)",
		"AT_Avg": "(°C)",
		"AT_Max": "(°C)",
		"AT_Min": "(°C)",
		"BTY": "(Volt)",
		"RadIn": "(W/m^2)",
		"RadOut": "(W/m^2)",
		"RH": "(%)",
		"SD": "(mtr)",
		"SDur": "(min)",
		"SST": "(°C)",
		"WS": "(m/s)"
	}

    PLEASE HELP ME OUT!

    June 28, 2018 at 11:58 am #21322

    Priyanka M S

    @kirti,

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

    In order to load a local JSON file on browser, you need to have a local server running in your system to avoid cross origin requests which most of the browsers doesn’t support. Here is a tutorial on setting up a local server, which might be of help.
    Please take a look at this jsfiddle that creates a line chart from external JSON data.

    __
    Priyanka M S
    Team CanvasJS

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

You must be logged in to reply to this topic.