(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抽出を使用する必要があります質問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
})
それは動作しませんでした。私はd3.jsとjavaを初めて使っているので、いくつかの重要な情報が失われているかもしれません。私の指示に従ってください。ありがとう!これに
d3.json(url, function (error, json) {
//first argument -----^
if (error) return console.warn(error);
data1=json;
consol.log(data1)
//code here
})
ご注意:
を?私はそれを削除し、再度試してみましょう:-) – FriendFX