通常のjsonオブジェクトをjsオブジェクトのGoogle視覚化タイプに変換するための既存のjsメソッド/ライブラリはありますか？

Question

私たちはjsonレスポンスを生成する既存の残りのWebサービスを持っています。 Googleではこれらのデータを表示するためにGoogleグラフを使用したいと考えています。 Googleの視覚化APIは、独自のjson形式を期待しているようだ。通常のjsonオブジェクトをjsオブジェクトのGoogle視覚化タイプに変換するための既存のjsメソッド/ライブラリはありますか？ありがとう。

Answer 1

これは実際にあなたが目指しているものと、どのようなデータがどのようなものか、使用したいGoogleチャートに依存します。私は通常、RESTデータとGoogleグラフを操作するときに次のことを行います。

この例ではjQueryを使用しますが、使用するjsライブラリはそれほど関連性がありません。あなたのJSONデータで簡単に選択特定のコンテンツに助けることができるjQueryとJSONQuery（でこれを行うには

{"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"}}]} 

：

を使用すると、データとどのようなareachartでそれを表示するには、次のセットを持っていると言います）あなたは次のようなことができます：

// 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'}} 
    }); 
});