CODEWITHSUNDEEP
javascripthtmljsonchart.js
Nikko
Nikko

Reputation: 57

Receiving json data from a server to display a chart.js graph not working

I am working on displaying weather data received from a weather station as a graph using charts.js. The weather data i.e. 'temperature' and 'humidity' is to be received from the weather station server as json data.

I am using XMLHttpRequest method to receive the json data from the server. But when I store the json response in a variable and use it in charts.js' Charts() method, it doesn't display anything.

I have followed few tutorials and I can't figure out a problem at least how I am using XmlHttpRequat method to receive json data from the weather station sever. Perhaps problem may be with using stored jason value in a variable and then how to use it Charts method's 'data'.

Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Weather Update</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <link rel="stylesheet" href="style.css">

    <script>

    function dspChrt() {

    var requestURL = 'http://api.holfuy.com/live/?s=101&m=JSON&tu=C&su=m/s'; //URL of the JSON data
    var request = new XMLHttpRequest();  // create http request
    request.open('GET', requestURL);  // open a new request
    request.responseType = 'json';  // setting response type to JSON type
    request.send(); // send the request                       
    request.onload = function() {
    if(request.readyState == 4 && request.status == 200){
        var wData = JSON.parse(request.responseText);
        var hum = wData.humidity;

    }  }        

    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'Humidity',
      data: [hum], // json value received used in method
      backgroundColor: "rgba(153,255,51,0.4)"
    }, {
      label: 'Temprature',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});
}
    </script>


  </head>


  <body onload="dspChrt();">

  <div class="container">

  <h2>Weather Update</h2>

  <div>
    <canvas id="myChart"></canvas>
  </div>

  </div>


  </body>
</html>

EDITED CODE:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Weather Update</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <link rel="stylesheet" href="style.css">

    <script>

    function dspChrt(hum) {

    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'Humidity',
      data: hum, // json value received used in method
      backgroundColor: "rgba(153,255,51,0.4)"
    }, {
      label: 'Temprature',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});
}
    </script>

<script>

 var myVar = setInterval(loadChart, 60000); // updates chart every one minute

 function loadChart()
 {

    var wData, hum;

    var requestURL = 'https://cors.io/?http://api.holfuy.com/live/?s=759&pw=h1u5l4kka&m=JSON&tu=C&su=m/s'; //URL of the JSON data
    var request = new XMLHttpRequest({mozSystem: true}); // create http request

    request.onreadystatechange = function() {
     if(request.readyState == 4 && request.status == 200) {
        wData = JSON.parse(request.responseText);
        hum = wData.humidity;

        console.log(wData);
        console.log(hum);

        dspChrt(hum);    
  }
}


    request.open('GET', requestURL);
    request.send(); // send the request

    //dspChrt(hum);

 }

</script>


  </head>


  <body onload="loadChart();">

  <div class="container">

  <h2>Weather Update</h2>

  <div>
    <canvas id="myChart"></canvas>
  </div>

  </div>


  </body>
</html>

Upvotes: 0

Views: 2396

Answers (1)

com
com

Reputation: 395

Use onreadystatechange instead of onload, don't use request.responseType = 'json'; and call open() and send() after declaring the onreadystatechange.

w3schools example

var requestURL = 'http://api.holfuy.com/live/?s=101&m=JSON&tu=C&su=m/s'; //URL of the JSON data
var wData, hum;

var request = new XMLHttpRequest(); // create http request

request.onreadystatechange = function() {
  if (request.readyState == 4 && request.status == 200) {
    wData = JSON.parse(request.responseText);
    hum = wData.humidity;

    console.log(wData);
    console.log(hum);
  }
}

request.open('GET', requestURL);
request.send(); // send the request

And by the way, you create the hum variable to store the data you received inside the callback function scope, so the variable hum does not exist when you are trying to create the chart. Create the variable before the ajax request and then populate it inside the callback, that way the variable will have value when you create your chart.

Upvotes: 1

Related Questions