Home forums Using CanvasJS Chart is not displaying

This topic contains 1 reply, has 2 voices, and was last updated by  Priyanka M S 2 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #21265

    kirti
    Member

    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!

    #21322

    Priyanka M S
    Member

    @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.