В прошлый раз я обещал рассказать о том, как создавать графики для своих ресурсов и при этом не нагружать сервер.
Речь, конечно, пойдет о 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 это уже сделано.
В общем, если вы хотите использовать графики на своем сайте, то выбрать есть из чего.
До встречи!
