我有带有JSON数据的外部文件,当我尝试生成不同的图表时,它可以正常工作。现在,我希望数据以交互方式显示在仪表板中,我尝试使用Google Visualization中的Control功能。现在图表没有显示出来。可能是什么错误?我在一个非常简单的仪表板中测试它如下:
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', {'packages':['controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var json3 = (function () {
var json3 = [];
$.ajax({
'async': false,
'global': false,
'url': "Geo.json",
'dataType': "json",
'success': function (data3) {
json3 = data3.rows;
}
});
console.log("Number of message rows: " + json3.length);
return json3;
})();
var readings3 = [];
if (json3.length > 0)
var readings3 = json3;
else
readings3=[
{"Time":"10:00:00 CEST 2013","Lat":58.02794563,"Long":5.45527353,"Speed":12, ...},
{"Time":"13:40:52 CEST 2013","Lat":58.16435456,"Long":5.98108809, "Speed":12, ...}
]
var data3 = new google.visualization.DataTable();
data3.addColumn('string', 'Time');
data3.addColumn('number', 'Lat');
data3.addColumn('number', 'Long');
data3.addColumn('number', 'Speed');
...
...
...
for (var i = 0; i < 1000; i++) {
data3.addRow([
readings3[i].Time,
readings3[i].Lat,
readings3[i].Long,
readings3[i].Speed,
...
...
...
]);
}
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var sensordataRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Time'
}
});
var lineChart1 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'visualization1',
'dataTable': 'data3',
'options': {
'width': 300,
'height': 300,
'legend': 'right'
},
'view': {'columns': [0, 5]}
});
dashboard.bind(sensordataRangeSlider, lineChart1);
dashboard.draw(data3);
}
提前致谢。