Графики от Google и PHP библиотеки для работы с ними

Владимир | | HTML, PHP, Web разработка.

google_chart_logo

В прошлый раз я обещал рассказать о том, как создавать графики для своих ресурсов и при этом не нагружать сервер.

Речь, конечно, пойдет о web сервисе Google Chart. Этот сервис появился достаточно давно и на сегодняшний день существует множество библиотек для работы с ним. Но к сервису и библиотекам мы ещё вернемся, а сейчас обсудим варианты создания графиков для web страниц.

Главная проблема

На сегодняшний день нарисовать график, используя только HTML, нельзя. Поэтому приходится использовать обходные варианты.

1) Создать рисунок с графиком и вставить его в страницу.

2) Использовать Flash. Об этом варианте я рассказывал в статье Графики своими руками – Open Flash Chart 2. По-идее, вместо Flash можно использовать Silverlight, но примеров я не видел.

Примечание. Big_Shark подсказал еще одну flash библиотеку для создания графиков — amCharts. Очень советую посмотреть. Возможно вам она понравится больше чем Open Flash Chart.

Рассмотрим подробнее первый вариант. Рисунок с графиком может быть статическим или динамическим.

Статические создаются заранее и при открытии посетителем страницы просто отсылаются ему.

Динамические создаются каждый раз заново. Обычно с помощью библиотек GD или ImageMagick. Точнее в большинстве случаев используются специальные библиотеки для создания графиков (например, GraPHPite или pChart), которые используют GD или ImageMagick.

Естественно, с точки зрения нагрузки на сервер статические графики гораздо выгоднее. Но если на графике нужно показать данные, которые постоянно изменяются, например, данные о посещаемости, то этот вариант не подойдет.

Использование Flash выглядит гораздо интереснее. График создается на стороне клиента, Flash плеером. Вам нужно только передать ему нужные данные.

Но и тут есть проблема. Flash ролик, который используется для создания графика довольно объемный. Например, в библиотеке Open Flash Chart он занимает 264кБ.

Конечно, этот недостаток становится преимуществом, если нужно разместить несколько десятков графиков на странице. Т.к. суммарный объем рисунков с графиками будет больше чем объем ролика, который загружается браузером только один раз.

Но если вам нужно показать только один график, то как-то не правильно грузить посетителю 260 кБ вместо 10-20 кБ, которые будет занимать график в png формате.

Т.е. в этом случае нужно создавать графики динамически. И при этом было бы очень неплохо избежать разногласий с хостером по поводу нагрузки на сервер.

Примечание. Речь, конечно, идет о shared хостинге. Если у вас выделенный сервер, то ваши проблемы с нагрузкой хостера интересовать не будут 🙂

В таких случаях есть смысл использовать сторонний сервис. Т.е. картинка с графиком будет создаваться не вашим, а чужим сервером.

Принцип работы Google Chart

1) Ваш серверный скрипт получает данные для отображения на графике.

2) На основе этих данных формируется URL специального вида, который указывает на сервер Google (URL начинается с http://chart.apis.google.com/…). В параметрах передаются данные для построения графика.

3) Этот URL вставляется в атрибут src тега img, в который вы хотите поместить график.

4) Страница отправляется браузеру.

5) Браузер отправляет запрос серверу google (используя ваш URL) и в ответ получает картинку с графиком.

Т.е. общий принцип достаточно простой.

Но, естественно, google накладывает некоторые ограничения.

1) Вы можете использовать только заранее оговоренный набор графиков. Правда возможности оформления есть и довольно широкие, но если, используя GD можно нарисовать практически что угодно, то здесь ограничения все-таки присутствуют.

2) Вы зависите от стороннего сервиса. Интересный, кстати, вопрос, что надежнее Google Chart или ваш ресурс? 😉

3) Существует ограничение на количество запросов — 50 000 на пользователя в сутки. Не думаю, что это серьезное ограничение для большинства ресурсов.

Теперь самое интересное. Создание URL.

Первая часть URL постоянная.

http://chart.apis.google.com/chart?

После неё идут параметры в виде имя=значение.

Т.к. существуют определенные ограничения на длину URL, то разработчики Google Chart предлагают использовать специальное кодирование данных.

Цель здесь простая – максимально сократить длину URL.

Естественно, кодировать данные вручную никому не понравится. Поэтому появилась куча библиотек.

Пример использования одной из них я хочу показать.

Библиотека называется GphpChart.

Создадим простую страничку.

<?php

include 'GphpChart.class.php';

$data = array('10' => 4.5, '20'=> 3.8, '30'=>5.5, '40'=>8.0, '50'=>2);;
$GphpChart = new GphpChart('lc');
$GphpChart->title = 'Мой график';
$GphpChart->add_data(array_values($data));
$GphpChart->add_labels('x', array_keys($data));
$GphpChart->add_labels('y',array(0,2.5,5,7.5,10));
?>
<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>
<!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" xml:lang="en" lang="en">

<head>
	<title>GphpChart</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>

<p>
<?php echo $GphpChart->get_Image_String(); ?>
</p>

</body>
</html>

Комментировать тут, в общем-то, нечего. Названия методов говорят сами за себя.

Библиотека состоит из одного файла, который мы подключили в 3 строке. При создании объекта GphpChart нужно указать тип графика. Используются сокращения принятые в Google Chart API.

После этого указываем массивы с точками графика и подписями по осям.

А с помощью метода get_Image_String() формируем строку с тегом img.

В результате получим график.

Мой график

К сожалению, все библиотеки с которыми я имел дело не поддерживают в полной мере возможностей Google Chart. Например, я не нашел ни одной, которая бы поддерживала создания графиков типа Radar.

В таких случаях вам придется полагаться на себя и писать код ручками 😉 Справедливости ради, хочу сказать, что это совсем не сложно.

Самая сложная операция – кодирование данных. Но в документации приведен пример JavaScript функции, которая выполняет такое преобразование.

И переписать её на другом языке будет совсем не сложно. Кстати, для PHP это уже сделано.

В общем, если вы хотите использовать графики на своем сайте, то выбрать есть из чего.

До встречи!

  • Big_Shark

    Хорошая статья.
    Google Chart знал но вот о том что есть php class для работы с ним не знал)
    Как я смотрю он очень облегчает работу.
    P.S. Спасибо за Примечание по поводу amCharts

    • Спасибо за Примечание

      Это вам спасибо за полезные комментарии.

      • Александр

        Владимир, я использую графики amCharts, сразу заметил такую проблему: браузер кэшироует flash и при изменении данных, график не меняется (было замечено в Мазиле). Вроде получалось обходить эту проблему добавлением к адресной строке случайным значением типа ?rtf=567, что бы браузер думал что все время загружает новую страницу, но тогда появляются проблемы с нормальной индексацией поисковиками. Может знаете решение?

        • С amCharts я практически не работал, поэтому в моем ответе могут быть не точности. Тем не менее, думаю, общая идея правильная.

          Возьмем пример из документации. Исходные данные передаются в массиве chartData. В примере этот массив создан прямо на странице внутри тега script. Но мы можем вынести этот массив в отдельный файл — my_data.php (расширение php, т.к. данные могут изменяться динамически, т.е. этот скрипт получает данные, например, из базы и формирует JS-массив).

          И подключить его

          Чтобы заблокировать кеширование добавляем GET параметр

  • Big_Shark

    Хорошая статья.
    Google Chart знал но вот о том что есть php class для работы с ним не знал)
    Как я смотрю он очень облегчает работу.
    P.S. Спасибо за Примечание по поводу amCharts

    • Спасибо за Примечание

      Это вам спасибо за полезные комментарии.

  • Ney

    Владимир, спасибо за интересный обзор!

    Хотелось услышать Ваше мнение по поводу графиков средствами Javascript.

    Например, есть библиотека JS Charts и jqplot.

    • Спасибо за ссылки!
      Я раньше этими библиотеками не пользовался.
      Выглядит красиво, но, конечно, нужно посмотреть скорость их работы, возможности, поддержку браузерами.
      В плане поддержки браузерами flash выигрывает, т.к. флешка отображается плеером, который только не зависит от разработчиков браузера.
      В общем, нужно тестировать.

      • qnikst

        Флэш, кстати, тоже может использоваться далеко не везде (на unix x86_64 так нормально и не работает). Или быть не установленым по каким либо причинам (корпоративным хотя бы).

        В принципе зависит от задачи, если график динамики развития экономики за год, то проще 1 раз нарисовать на пхп.
        Если много и часто меняющихся то другой вариант.

        • График динамики развития экономики за 1 год можно нарисовать в excel, оформить в Photoshop'е и выложить как картинку.
          Это, конечно, ручная работа, но получиться должно красиво 😉

          на unix x86_64 так нормально и не работает

          Кстати, да. Если ещё вспомнить о мобильных устройствах, то лучшим вариантом, наверное, будут рисунки.

    • Такое ощущение, что графики на JS являются самым оптимальным решением! Хорошо было бы услышать рассказ об опыте работы с ними…

      • услышать рассказ об опыте работы с ними

        Хорошо было бы этот опыт приобрести 🙂
        Если серьезно, вы правы. Статья о JS графиках неплохо дополнила бы эту и предыдущую. Постараюсь найти время и поэкспериментировать с ними.

  • Ney

    Владимир, спасибо за интересный обзор!

    Хотелось услышать Ваше мнение по поводу графиков средствами Javascript.

    Например, есть библиотека JS Charts и jqplot.

    • Спасибо за ссылки!
      Я раньше этими библиотеками не пользовался.
      Выглядит красиво, но, конечно, нужно посмотреть скорость их работы, возможности, поддержку браузерами.
      В плане поддержки браузерами flash выигрывает, т.к. флешка отображается плеером, который только не зависит от разработчиков браузера.
      В общем, нужно тестировать.

      • qnikst

        Флэш, кстати, тоже может использоваться далеко не везде (на unix x86_64 так нормально и не работает). Или быть не установленым по каким либо причинам (корпоративным хотя бы).

        В принципе зависит от задачи, если график динамики развития экономики за год, то проще 1 раз нарисовать на пхп.
        Если много и часто меняющихся то другой вариант.

        • График динамики развития экономики за 1 год можно нарисовать в excel, оформить в Photoshop'е и выложить как картинку.
          Это, конечно, ручная работа, но получиться должно красиво 😉

          на unix x86_64 так нормально и не работает

          Кстати, да. Если ещё вспомнить о мобильных устройствах, то лучшим вариантом, наверное, будут рисунки.

    • Такое ощущение, что графики на JS являются самым оптимальным решением! Хорошо было бы услышать рассказ об опыте работы с ними…

      • услышать рассказ об опыте работы с ними

        Хорошо было бы этот опыт приобрести 🙂
        Если серьезно, вы правы. Статья о JS графиках неплохо дополнила бы эту и предыдущую. Постараюсь найти время и поэкспериментировать с ними.

  • Денис Чистяков

    В свое время на временно.нет было два поста про графики: «JavaScript решения для построения графиков» и «Графики на ваших сайтах»
    Достаточно хорошие обзоры и PHP, и Flash и JS решений.
    Лично я в свое время воспользовался pChart'ом, он предоставляет и удобное API, и большое колличество стилей оформления и с кешированием там все в порядке ) И документация достаточно понятная, что бы через пару часов уже «своять» что-то желаемое.
    Для шаредов наверно не покатит, но для меня к счастью это не проблема.

    • Я почему-то эти обзоры пропустил… а жаль, сэкономил бы немного времени.

  • Денис Чистяков

    В свое время на временно.нет было два поста про графики: «JavaScript решения для построения графиков» и «Графики на ваших сайтах»
    Достаточно хорошие обзоры и PHP, и Flash и JS решений.
    Лично я в свое время воспользовался pChart'ом, он предоставляет и удобное API, и большое колличество стилей оформления и с кешированием там все в порядке ) И документация достаточно понятная, что бы через пару часов уже «своять» что-то желаемое.
    Для шаредов наверно не покатит, но для меня к счастью это не проблема.

    • Я почему-то эти обзоры пропустил… а жаль, сэкономил бы немного времени.

  • Владимир!
    Объясните, пожалуйста такую вещь:
    У вас данные указаны
    $data = array('10' => 4.5, '20'=> 3.8, '30'=>5.5, '40'=>8.0, '50'=>2);
    На графике видно, что при значении x=10 значение y~5, те же неточности с отображением и при x=40 и 50
    С чем это связано?

    • Спасибо, что написали, я поэкспериментирую.

  • Владимир!
    Объясните, пожалуйста такую вещь:
    У вас данные указаны
    $data = array('10' => 4.5, '20'=> 3.8, '30'=>5.5, '40'=>8.0, '50'=>2);
    На графике видно, что при значении x=10 значение y~5, те же неточности с отображением и при x=40 и 50
    С чем это связано?

    • Спасибо, что написали, я поэкспериментирую.

  • rolph

    Не знал о уже готовых библиотеках, спасибо — выручили!

  • rolph

    Не знал о уже готовых библиотеках, спасибо — выручили!

  • rolph

    Владимир, у вас получилось работать с add_grid?

    • В смысле сетку на график добавить?
      По-моему, да, как-то делал график с сеткой. Может какие-то проблемы в процессе и были, но сейчас мне сложно вспомнить.

    • Что-то не работает?

  • rolph

    Владимир, у вас получилось работать с add_grid?

    • В смысле сетку на график добавить?
      По-моему, да, как-то делал график с сеткой. Может какие-то проблемы в процессе и были, но сейчас мне сложно вспомнить.

    • Что-то не работает?