Достижение перезагрузки диаграммы визуализации Google с помощью ajax - PullRequest
Новая
       7

Достижение перезагрузки диаграммы визуализации Google с помощью ajax

0 голосов
/ 01 июня 2011

Бродил по сети, но пока ничего не нашел ... может кто-нибудь помочь?

Я создал простую HTML-страницу, которая содержит список значений, который при выборе вызывает отдельный phpскрипт для запуска запроса к базе данных и распечатки html-страницы структуры.Это было реализовано с использованием вызовов ajax, и это приводит к перезагрузке страницы, когда пользователь изменяет значение в списке.

Теперь я хотел бы отойти от создания таблицы с использованием HTML-тегов и распечатки состояний и перейти к чему-то более удобному и открытому API визуализации Google.Я просмотрел многие страницы сайта и использовал игровую площадку с кодом, но не смог найти информацию, которая бы помогла мне понять, как я могу использовать API визуализации для генерации таблицы и передать ее обратно на главную страницу в теге div,используя тот же скрипт php.

Есть ли у кого-нибудь какие-нибудь указатели или опыт в этом?

Спасибо.

1 Ответ

7 голосов
/ 01 июня 2011

Этого можно добиться, используя jQuery AJAX и некоторые массивы, сгенерированные вашим php.Это довольно простой, но простой подход - вы можете поискать клиентские библиотеки php, которые генерируют код gviz для вас на вашем php, если этого окажется недостаточно.

Вот рабочий пример:

HTML-файл 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1.6.1");
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">

    function drawVisualization(dataFromAjax) {
      var data = google.visualization.arrayToDataTable(dataFromAjax);
      visualization = new google.visualization.Table(document.getElementById('table'));
      visualization.draw(data);
    }

    function makeAjaxCall() {
      $.ajax({url:'test.php',
              data: {},
              success: function(responseData) {
                         // eval just for testing - make safer
                         var arrayForGviz = eval("(" + responseData + ")");
                         drawVisualization(arrayForGviz);
                       }
        });
    }
    </script>
  </head>
  <body>
    <input type="button" onclick="makeAjaxCall();return false;" value="Click to get data"></input>
    <div id="table"></div>
  </body>
</html>
​

PHP-файл 

<?php
echo "[['Country','City','Value'],
       ['Ireland','Dublin','10'],
       ['France','Paris','15']]"
?>

Очевидно, мой php-файл статичен, но каждый раз, когда пользователь взаимодействуетсо страницей и триггерами makeAjaxCall () вы можете отправлять разные параметры и возвращать разные ответы массива.

...