CODEWITHSUNDEEP
javascriptjsond3.js
Chenming Zhang
Chenming Zhang

Reputation: 2566

plotting json data in phant using d3 js

I am trying to use d3.js to visualize data stored in sparkfun cloud (an IOT cloud). There is example using google chart for visualizing sparkfun cloud, using the following script:

<!DOCTYPE html>
<html>
  <head>
    <!-- EXTERNAL LIBS-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://www.google.com/jsapi"></script>

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

      // onload callback
      function drawChart() {

        var public_key = 'dZ4EVmE8yGCRGx5XRX1W';

        // JSONP request
        var jsonData = $.ajax({
          url: 'https://data.sparkfun.com/output/' + public_key + '.json',
          data: {page: 1},
          dataType: 'jsonp',
        }).done(function (results) {

          var data = new google.visualization.DataTable();

          data.addColumn('datetime', 'Time');
          data.addColumn('number', 'Temp');
          data.addColumn('number', 'Wind Speed MPH');

          $.each(results, function (i, row) {
            data.addRow([
              (new Date(row.timestamp)),
              parseFloat(row.tempf),
              parseFloat(row.windspeedmph)
            ]);
          });

          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>

I wish to use d3.js to plot the data rather than using google chart as it provides more flexibility ( i was surprised how much effort needs to be taken to re-size the graph using google chart). To do so it may need to use d3.js json extractor to obtain the data from the website.I have tried below according to the question 1,2:

var data1;
var url = "https://data.sparkfun.com/output/dZ4EVmE8yGCRGx5XRX1W.json"

d3.json(url, function (json) {
         if (error) return console.warn(error);
     //data1 = json;
     data1=json;
     consol.log(data1)
             //code here
                     })

it didn't work. i may have some key information missing as i am new to d3.js and java. please provide me a direction so that i can follow. Thanks!

Upvotes: 2

Views: 153

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

Since you're trying to catch the error, you have to pass the error as the first argument in the anonymous function:

d3.json(url, function (error, json) {
    //first argument -----^
    if (error) return console.warn(error);
    data1=json;
    consol.log(data1)
    //code here
 })

Pay attention to this: in d3.json, "error" is the first argument, not the second.

An easier alternative is simply dropping the "error":

d3.json(url, function (json) {
    data1=json;
    consol.log(data1)
    //code here
 })

Upvotes: 1

Related Questions