You must be logged in to post your query.
Home › Forums › Chart Support › Chart is not displaying
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://canvasjs.com/assets/script/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!
@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
You must be logged in to reply to this topic. Login/Register