谷歌可视化使用JSON输入 [英] Google Visualization with json input

问题描述

作为一个初学者我挣扎与谷歌可视化从JSON文件输入使得图表。我寻觅类似的问题，但我不知道它帮助。

As a beginner I'm struggling with Google Visualization for making charts from the JSON file inputs. I have searched similar questions but I wasn't sure it helps.

我有一组JSON格式的数据。目前它是静态数据和本地存储。我要加载的数据，并使用谷歌的可视化进行查看。我的数据是这样的：

I have a set of data in JSON format. Currently it is static data and is stored locally. I want to load the data and visualize it using Google visualization. My data is like this:

     "rows":[{"Time":10:00:00,"Lat":53.02900044,"Long":7.44578671,"Altitude":57,"Speed":0,...}, {"Time": 11:00:00,"Lat":52.06000044,"Long":7.54578671,"Altitude":53,"Speed":12,...]}

我试图用这样的方式：

I try to use this way:

    function init () {

var json3 = (function () {
    var json3 = [];
    $.ajax({
        'async': false,
        'global': false,
        'url': "Person3.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 ","Lat":66.02794563,"Long":7.45527353,.....},
        {"Time":"13:40:52 ","Lat":66.16435456,"Long":7.98108809,......}
        ]
var data3 = new google.visualization.DataTable(readings3);

var graphview = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'visualization1',

    dataTable: data3,
options: {
        // chart options
    }
});

graphview.draw();    
}
google.load('visualization', '1', {packages:  ['corechart'], callback: init});

有人可以帮助我缺什么位置，或者如果你看到正在解决类似的问题。 在此先感谢...

Can someone help me what is missing here, or if you see similar problems being solved. Thanks in advance...

推荐答案

该数据表的构造不会接受一个对象与结构;你将不得不解析对象为手动一个数据表：

The DataTable constructor will not accept an object with that structure; you will have to parse that object into a DataTable manually:

var data3 = new google.visualization.DataTable();
data3.addColumn('timeofday', 'Time');
data3.addColumn('number', 'Lat');
data3.addColumn('number', 'Long');
//...
for (var i = 0; i < readings3.length; i++) {
    var match = readings3[i].Time.match(/(\d{2}):(\d{2}):(\d{2})/);
    var hours = parseInt(match[1], 10);
    var minutes = parseInt(match[2], 10);
    var seconds = parseInt(match[3], 10);
    data.addRow([[hours, minutes, seconds, 0], readings3[i].Lat, readings3[i].Long, /* ... */]);
}

此外，在事件它不是一个复制/粘贴错误，在JSON字符串的时候需要加引号，因为时代：10：00：00 是无效的。

这篇关于谷歌可视化使用JSON输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！