2017-01-23 12 views
2

(IOTクラウド)に格納されたデータを表示するためにd3.jsを使用しようとしています。 There is example using google chart for visualizing sparkfun cloud、次のスクリプト使用:私はそれがより多くの柔軟性を提供してGoogleのチャートを使用するのではなく、データをプロットするd3.jsを使用したいd3 jsを使用してphantでjsonデータをプロットする

<!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> 

を(私がするために取られるように再サイズを必要とするどのくらいの努力驚きましたGoogleグラフを使用したグラフ)。行うにはそれがwebsite.Iからデータを取得するためにd3.js JSON抽出を使用する必要があります質問12に従って以下試してみました:

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 
        }) 

それは動作しませんでした。私はd3.jsとjavaを初めて使っているので、いくつかの重要な情報が失われているかもしれません。私の指示に従ってください。ありがとう!これに

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

ご注意:

+0

を?私はそれを削除し、再度試してみましょう:-) – FriendFX

答えて

1

あなたがerrorをキャッチしようとしているので、あなたは無名関数の最初の引数としてエラーを渡す必要がd3.jsonで、「エラー」はです最初の引数で、2番目の引数ではありません。

が容易に代替は、単純に「エラー」を落としている: `ERROR`コールバック関数で定義されている

d3.json(url, function (json) { 
    data1=json; 
    consol.log(data1) 
    //code here 
}) 
関連する問題