|
Речь, конечно, пойдет о web сервисе Google Chart. Этот сервис появился достаточно давно и на сегодняшний день существует множество библиотек для работы с ним. Но к сервису и библиотекам мы ещё вернемся, а сейчас обсудим варианты создания графиков для web страниц.
Главная проблема
На сегодняшний день нарисовать график, используя только HTML, нельзя. Поэтому приходится использовать обходные варианты.
- Создать рисунок с графиком и вставить его в страницу.
- Использовать Flash. По-идее, вместо Flash можно использовать Silverlight, но примеров я не видел.
- Еще одна 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
- Ваш серверный скрипт получает данные для отображения на графике.
- На основе этих данных формируется URL специального вида, который указывает на сервер Google (URL начинается с http://chart.apis.google.com/:). В параметрах передаются данные для построения графика.
- Этот URL вставляется в атрибут src тега img, в который вы хотите поместить график.
- Страница отправляется браузеру.
- Браузер отправляет запрос серверу google (используя ваш URL) и в ответ получает картинку с графиком.
Т.е. общий принцип достаточно простой. Но, естественно, google накладывает некоторые ограничения.
- Вы можете использовать только заранее оговоренный набор графиков. Правда возможности оформления есть и довольно широкие, но если, используя GD можно нарисовать практически что угодно, то здесь ограничения все-таки присутствуют.
- Вы зависите от стороннего сервиса. Интересный, кстати, вопрос, что надежнее Google Chart или ваш ресурс?
- Существует ограничение на количество запросов - 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 это уже сделано.
В общем, если вы хотите использовать графики на своем сайте, то выбрать есть из чего.
|
