dimanche 28 juin 2015

Google chart local json file loading issue

I am new to google chart. I tried to load a json data file but somehow my script does not recognize it. First, I got this code, which works fine.

<!DOCTYPE html>
<html>
  <head>
    <!-- EXTERNAL LIBS-->
    <script src="http://ift.tt/1qRgvOJ"></script>
    <script src="http://ift.tt/JuZcy0"></script>

    <!-- EXAMPLE SCRIPT -->
    <script>

      // onload callback
      function drawChart() {

        var public_key = 'dZ4EVmE8yGCRGx5XRX1W';

        // JSONP request
        var jsonData = $.ajax({
          url: 'http://ift.tt/XQ3ZTg' + public_key + '.json',
          //This json local file is in the same directory of this html file. It was downloaded from the sparkfun.
          //url: 'stream_dZ4EVmE8yGCRGx5XRX1W.json'
          data: {page: 1},
          dataType: 'json',
        }).done(function (results) {
          var data = new google.visualization.DataTable();
          console.log(data);
          data.addColumn('datetime', 'Time');
          data.addColumn('number', 'Temp');

          $.each(results, function (i, row) {
            data.addRow([
              (new Date(row.timestamp)),
               parseFloat(row.tempf),
            ]);
          });
          var chart = new google.visualization.LineChart($('#chart').get(0));

          chart.draw(data, {
            title: 'Wimp Weather Station'
          });

        });

      }

      // load chart lib
      google.load('visualization', '1', {
        packages: ['corechart']
      });

      // call drawChart once google charts is loaded
      google.setOnLoadCallback(drawChart);

    </script>

  </head>
  <body>
    <div id="chart" style="width: 100%;"></div>
  </body>
</html>

But, if I uncomment the line "url:stream-...." and comment the line "url:'https://data...", the script somehow does not work. It must be the same json file but depending on "url", the code does not work. I don't know how to resolve this. Thank you.

Aucun commentaire:

Enregistrer un commentaire