带有外部JSON输入的Google信息中心

时间:2014-06-26 11:21:29

标签: json google-visualization

我有带有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);

}    

提前致谢。

0 个答案:

没有答案