Существует ли существующий метод / библиотека js для преобразования обычных объектов json в тип визуализации google объектов js?

Question

у нас есть остальные веб-сервисы, которые генерируют JSON-ответ. Теперь мы хотим использовать Google диаграммы, чтобы показать эти данные. API визуализации Google, кажется, ожидает свой собственный формат JSON. Есть ли какой-нибудь существующий метод / библиотека js для преобразования обычных объектов json в тип js-объектов для визуализации google? Благодарю.

Answer 1

Это действительно зависит от того, к чему вы стремитесь и как выглядят данные, а также от диаграммы 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'}}
    });
 });