Подписаться на получение новых статей на почту:

Построение графика по данным из базы. AJAX, JSON. Шаг №69

Всем привет. Закончив рассматривать, в прошлой статье, технологию построения графиков и диаграмм используя технологию Google Charts, сегодня мы подвяжем этот график к базе данных. Т.е. используем динамические данные. Да друзья извлечем ранее занесенные данные в базу, где данный шаг был описан в статье №67.  Итак приступим.

Также как и в предыдущей статье ссылаемся на источник  Google Charts. Переходим по ссылке, где описан код примера подключения к базе данных и построения графика. https://developers. google. com /chart/ interactive/docs/php_example. В названии раздела How to connect Your Database изучаем пример и находим функцию по передаче данных. В отличие от предыдущей записи где использовались статические данные, т.е. заранее прописанные, здесь используется ajax-запрос. Ниже код функции.

 

function drawChart () {
          var jsonData = $.ajax ({   //запрос
          url: «getData.php»,          //файл — источник данных
          dataType: «json»,
          async: false  //важный параметр, отвечает за асинхронный или синхронный запрос, должен быть false
}).responseText;
// Create the data table.
var data = new google.visualization.DataTable (jsonData);

ajaxЧто ж давайте немного разберем ajax — запрос. AJAX (Asynchronous Javascript and XML) — технология, синтез Javascript, и XML. Используя  AJAX нет необходимости обновлять все  время страницу, что экономит время и деньги. Если Вы следите за проектом то увидите что мы начали использовать данную технологию начиная с интерактивная карта контроллера, загрузив библиотеку jquery.min.js для выделения кликабельных областей, вывода GET-параметров на экран и т.д. Работает AJAX двумя способами: 1-й -изменение Web-страницы не перезагружая её, что и использовалось в предыдущих статьях и 2-й вариант - динамическое обращение к серверу, что мы используем сегодня. Для осуществления этого используется объект XMLHttpRequest, который является своеобразным посредником между браузером пользователя и сервером. С помощью него можно отправить запрос на сервер, а также получить ответ в виде различного рода данных. Что мы и делаем используя свойство данного объекта - responseText — представление ответа сервера в виде обычного текста (строки).

jsonТак вернемся к источнику примера подключения к БД. The drawChart () function calls the jQuery ajax () function to send a query to a URL and get back a JSON string. Функция возвращает JSON string. Где JSON (JavaScript Object Notation) — текстовый формат обмена данными, основанный на JavaScript. Файлы JSON часто используются в Ajax вместо XML. JSON определяет небольшой набор правил форматирования для портативного представления структурированных данных и является легко читаемым. Формат JSON может быть реализован как набор пар ключ-значение (ассоциативный массив, объект или запись) или упорядоченный набор значений (массив или вектор). Мы изменим файл getData.php, где будем непосредственно обращаться к БД и преобразовывать их в json-формат. Ниже код

<?php  //обращаемся к БД 
        define («HOST», " ");   
        define («USER», " ");
        define («PASSWORD», " ");
        define («DB_NAME», « „);

        $db_connect = mysql_connect (HOST,USER,PASSWORD,TRUE);
        if (!$db_connect){
        die ('Ошибка подключени'.mysql_error ()); }

       mysql_select_db (DB_NAME, $db_connect);
       // mysql_set_charset ($db,“utf8»);

        function getDataString () {
              global $db_connect;
              //Преобразование в json-формат
              $query=mysql_query («SELECT T1, T2 FROM Log») or die (mysql_error ());
              $data= '{"cols":[';
              $data.='{"id":"","label":"t","type":"number"},';
              $data.='{"id":"","label":"t1","type":"number"}';
              $data.='],"rows":[';
              while($row=mysql_fetch_assoc($query)){
                     $data.='{"c":[{"v":'.$row['T1'].'},{"v":'.$row['T2'].'}]},';}
                     $data=rtrim ($data,',');
                     $data.=']}';
              return $data;
         }
    echo getDataString ();

Построение графика по БДНа рисунке слева — результат работы кода. У меня на странице web-интерфейса два графика. Один статический справа, второй слева — динамический. На рисунке изображена БД и график построенный по данным T1, T2.

В ходе наладки Вы можете столкнутся со следующими ошибками. У меня их было две: 1-ая -неправильное подключение БД. При выполнении скрипта PHP выдает такую ошибку:

Warning: mysql_query () expects parameter 2 to be resource, string given in........
Ошибка заключается в Соединение MySQL. Если идентификатор соединения не был указан, используется последнее соединение, открытое mysql_connect (). Если такое соединение не было найдено, функция попытается создать таковое, как если бы mysql_connect () была вызвана без параметров. Если соединение не было найдено и не смогло быть создано, генерируется ошибка уровня E_WARNING.
Т.е вместо стоки
mysql_connect ($server, $user, $pass) or die (mysql_error ());
Необходима
$connect = mysql_connect ($server, $user, $pass) or die (mysql_error ());

Вторая ошибка — простая  невнимательность. Достаточно в этих строка пропустить запятую или кавычку
$data= '{"cols":[';
$data.='{"id":"","label":"t","type":"number"},';...................................
Получим сообщение следующего вида
jsapi_compiled_format_module.js:114 Uncaught Error: Invalid JSON string: {"cols":[{"id":"","label":"t","type":"number"}{"id":"","label":"t1","type":"number"},],"rows":[{"c":[{"v":0.0},{"v":0.0},]}{"c":[{"v":2.0},{"v":3.0},]}{"c":[{"v":5.0},{"v":8.0},]}{"c":[{"v":22.0},{"v":5.0},]}]}

Выше мы рассмотрели пример построения графика, на технологии Google Charts (рассмотрели в прошлой статье), по данным из базы данных. Использование ajax-запроса и преобразование данных в json-формат. Рассмотрели возможные ошибки. В следующей статье продолжим работу с веб-интерфейсом. На этом сегодня и остановимся. Всем пока.

Просмотрено 4690 раз.

Я на Google+

Построение графика по данным из базы. AJAX, JSON. Шаг №69: Один комментарий

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting