Is there an exiting js method/library to convert regular json objects to google visualization type of js objects? - google-visualization

Question

we have existing rest web services that generates json response. now we want to use google charts to show those data. google visualization api seems to expect its own json format. Is there any exiting js method/library to convert regular json objects to google visualization type of js objects? Thanks.

Answer 1

It really depends on what you're aiming for and what data looks like, and the google chart you want to use. I usually do the following when working with REST data and google charts.
In this example I use jQuery, but the js library you use isn't that relevant.
Say you've got the following set of data and what to show it in an areachart:
{"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"}}]}
To do this with JQuery and JSONQuery (which can help in easy selecting specific content in your JSON data) you can do something like this:
// 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'}}
});
});