我们有生成json响应的现有rest web服务。现在我们想使用google图表来显示这些数据。google可视化api似乎希望有自己的json格式。是否有任何现有的js方法/库可以将常规json对象转换为google可视化类型的js对象?谢谢。
发布于 2011-07-20 03:04:59
这真的取决于你的目标和数据的样子,以及你想要使用的google图表。在处理REST数据和google图表时,我通常会执行以下操作。
在本例中,我使用了jQuery,但是您使用的js库并不那么重要。
假设你已经获得了以下数据集,以及在一个区域图中显示它的内容:
{"events":[{"event":{"timestamp":"1310926588423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926578423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926568423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926558423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926548423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926538423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926528423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926518423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926508423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}},{"event":{"timestamp":"1310926498423","service":"EsperEventProcessor.service","countAll3Sec_EsperEventProcessor":"0","server":"EsperServer"}}]}要使用JQuery和JSONQuery (它们可以帮助您轻松地选择JSON数据中的特定内容)实现这一点,可以这样做:
// use the getJSON jQuery operation to get the REST data
$.getJSON(restURL, function(data) {
// use jsonquery to get all the 'event's from the JSON data
var query1 = "..event";
var rootEvent = JSONQuery(query1,data);
// manually create a datatable and fill it in the required
// way for this chart
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Number of queries / per 10 seconds');
data2.addColumn('number', '# queries');
// each row is added based on information from the json event
// by simply iterating over the array
data2.addRows(rootEvent.length);
for (i = 0; i < rootEvent.length; i++) {
var date = new Date(parseInt(rootEvent[i]['timestamp']));
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var time = '';
if (hours < 10) time=time+'0'; time=time+hours+':';
if (minutes < 10) time=time+'0'; time=time+minutes+':';
if (seconds < 10) time=time+'0'; time=time+seconds;
data2.setCell(i,0,time);
data2.setCell(i,1,parseInt(rootEvent[i]['countAll3Sec_EsperEventProcessor']));
}
chart.draw(data2, {width: 400, height: 240, title: 'Requests per 10 seconds',
hAxis: {title: 'Time', titleTextStyle: {color: '#FF0000'}}
});
});https://stackoverflow.com/questions/6710835
复制相似问题