|
В начале этого месяца, большой брат открыл новый интересный сервис для генерации красивых диаграмм — Google Chart. Эти графики по своему оформлению и функциональности очень близки к тому, что мы уже видели в Spreadsheets, но теперь появилась возможность генерировать их автономно.
/2007/12/chart.png)
Программный интерфейс у сервиса достаточно прост: все параметры отрисовки диаграммы и данные для визуализации передаются на сервер Google в виде GET запроса (проще говоря, специального URL), а сервер в ответ отдает PNG с нарисованным графиком. По скорости процесс сравним с загрузкой статических файлов, кроме того правила его использования не накладывают никаких жестких ограничений на количество обращений с одного хоста. Все это позволяет очень легко интегрировать Chart в свои системы, да еще и бесплатно снять с собственного сервера дополнительную нагрузку по генерации графики.
Гибкость возможностей Chart API послужила причиной разростания количества параметров URL. Ниже будут приведены несколько примеров того, как с помощью серверных скриптов облегчить задачу по формированию запросов к сервису.
Упаковка данных
В Chart API предлагается три варианта представления данных, на основе которых будут строиться диаграммы. Самый простой из них — перечисление значений через запятую. Но для большей компактности URL, так же можно кодировать числа одним из двух способов, в результате чего объем передаваемых данных сократится.
Самым эффективным способом кодирования, который мы и будем использовать, является т.н. «extended encoding». Метод сводится к последовательной записи двузначных чисел в шестидесятичетырехразрядной (прости меня, русский язык) системе счисления. Динамический диапазон таких значений находится в интервале от 0 до 4095 (64² — 1). Для их представления в кодированном виде, согласно предписанию документации, необходимо использовать строчные и прописные английские буквы, цифровые символы, а так же тире и точку (всего набирается как раз 64 символа). В том случае, если значение не задано, оно будет обозначаться последовательностью из двух «_».
Следующая функция, написанная на PHP, выполняет преобразование десятичных чисел в extended encoding для Google Chart:
function google_ext_encode($dec) {
if($dec === false) return '__';
$e = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.
'abcdefghijklmnopqrstuvwxyz0123456789-.';
$m = strlen($e); // == 63
$res = '';
do {
$r = $dec % $m;
$dec = (int)($dec / $m);
$res = $e[$r].$res;
} while($dec > 0);
$res = sprintf("%'A2s", $res);
return $res;
}
Тест:
$test = array(0, 25, 26, 51, 4093, 4094, 4095);
echo '<pre>';
printr_r(array_map("google_ext_encode", $test));
echo '</pre>';
Программа выдаст несколько закодированных чисел, с аналогичными приведенным в документации значениями: AA, AZ, Aa, Az, .9, .-, ...
Поддержка русского языка
Еще до начала первых экспериментов с Google Chart, у меня было подозрение на тему того, что в нем может не оказаться поддержки русского алфавита (и вообще любых языков кроме английского). Как выяснилось, подозрения были напрасны: API прекрасно поддерживает UTF-8.
HTML код для вставки графика в веб страницу удобно генерировать с помощью специальной функции, пример реализации которой приведен далее. Внутри нее выполняется корректное преобразование текста для надписей:
function chart_html($type, $width,
$height, $data, $labels = false, $colors = false, $alt = '') {
$edata = implode('', (array_map("google_ext_encode", $data)));
$url = 'http://chart.apis.google.com/chart?cht='.$type.
'&chd=e:'.$edata.'&chs='.$width.'x'.$height;
if(is_array($colors) && count($colors))
$url .= '&chco='.implode(',', $colors);
if(is_array($labels) && count($labels))
$url .= '&chl='.implode('|', (array_map("urlencode", $labels)));
return '<img src="'.$url.'" width="'.$width.'" height="'.$height.
'" alt="'.$alt.'" />';
}
Стоит обратить внимание на две детали:
- Функция не задействует все параметры, доступные в Charts API, а работает только с наиболее актуальными. Она была написана для генерации круговых диаграмм под конкретную задачу. Для иных типов графиков логичным шагом будет корректировка набора аргументов.
- Файл с кодом сохранен в кодировке UTF-8. При хранении исходников и данных в 8-битной кодировке, понадобится дополнительное преобразование текста в UTF, чтобы не-английские буквы не отображались на диаграммах как вопросительные знаки.
Функция chart_html() будет выдавать XHTML теги img, в соответствии с заданными параметрами:
$type — условное обозначение типа диаграммы. Используемое в тестах значение p3, например, соответствует трехмерной круговой диаграмме. Описание других вариантов можно найти в официальной документации API.$width, $height — соответственно, ширина и высота генерируемого графического изображения в пикселях. Максимальное значение для каждой величины — 1000. При выборе размера, следует помнить о необходимости свободного пространства вокруг графика, т.к. при его недостатке надписи могут быть обрезаны границей картинки. Оптимальную величину для выбранного сочетания размера и типа диаграммы, проще всего подбирать методом «научного тыка».$data — массив с данными для визуализации на диаграмме.$labels — (необязательный параметр) массив с надписями для отображения на графике.$colors — (необязательный параметр) массив со значениями цветов, которые будут использованы для отрисовки элементов изображения (например, секторов круговой диаграммы). Если количество цветов в массиве будет меньше количества элементов, дополнительные, схожие по тональности цвета будут добавлены автоматически.$alt — (необязательный параметр) значение атрибута alt тега img. Если этот аргумент не задать, атрибуту alt будет задано пустое значение.
Тест:
$width = 300;
$height = 100;
$data = array(100, 128, 200, 38);
$labels = array('Одно', 'Другое', 'Третье', 'Четвертое');
echo chart_html('p3', 500, 150, $data, $labels, false,
'Google Chart Test').'<br />';
shuffle($data);
// задано значение альфа-канала
$colors = array('33dd66cc');
echo chart_html('p3', 500, 150, $data, $labels, $colors,
'Демография Хабрахабра').'<br />';
Функция chart_html() будет генерировать ссылки примерно такого вида:
http://chart.apis.google.com/chart? cht=p3 &chd=e:BkCADIAm &chs=500x150 &chl=%D0%9E%D0%B4%D0%BD%D0%BE |%D0%94%D1%80%D1%83%D0%B3%D0%BE%D0%B5 |%D0%A2%D1%80%D0%B5%D1%82%D1%8C%D0%B5 |%D0%A7%D0%B5%D1%82%D0%B2%D0
%B5%D1%80%D1%82%D0%BE%D0%B5
В результате получаем две диаграммы:
/2007/12/chart1.png)
Демография Хабрахабра:
/2007/12/chart2.png)
(благодаря заданному значению альфа-канала, диаграмма получилась полупрозрачной)
Написать комментарий
| 
# Kupuyc: (18 декабря, 2007 @ 02:18)
А вы не изучали возможность рисовать графики со смещенным началом координат? К примеру, когда область определения: [300, 400], а область значений: [120, 600] и чтобы не позволять графику “уезжать” вправо вверх начало координат смещают, например в (250, 100).
# admin: (18 декабря, 2007 @ 04:46)
Автоматической подстройки координатной сетки под график всегда можно добиться на этапе предобработки данных: ищем максимумы и задаем по ним размерность диаграммы. “Двигать” окно по координатной плосскости тоже не сложно, учитывая, что линии координат в Chart API носят очень условный характер. Для отметок на них можно задавать произвольные значения, и не обязательно нумеровать их начиная с 0.
# Kupuyc: (18 декабря, 2007 @ 08:00)
Это вы все верно сказали, но и ответили на другой вопрос ;).
# Anton Shevchuk: (18 декабря, 2007 @ 14:02)
Создал небольшой сервис для генерации URL: http://charts.hohli.com (пока альфа версия, постараюсь в дальнейшем перекрыть весь функционал Google Charts API), так что если необходимо единоразово построить график для блога – то милости прошу…
# ads: (18 декабря, 2007 @ 14:28)
Молодца!
# admin: (18 декабря, 2007 @ 14:52)
Anton Shevchuk: Удобная штука. Для разовой отрисовки диаграмм выглядит проще в обращении, чем спредшитс.
# Ненаучно о популярном » Blog Archive » Диаграммы в несколько строчек: (18 декабря, 2007 @ 14:56)
[...] такого графика, надо немного поколдовать. В блоге Paradigm подробно описано как приручить гугловский [...]
# Paradigm.ru » Blog Archive » : (19 декабря, 2007 @ 00:03)
[...] документацию по Google Chart API, во время подготовки посвященного ему поста, меня удивил немалый объем данных, который [...]
# Via_Lactea: (20 декабря, 2007 @ 00:36)
а есть эта функция кодирования для C#? очень надо.
# admin: (20 декабря, 2007 @ 01:30)
На C# – нет. А в чем проблема самостоятельно сделать? Переписать ее на C# можно за несколько минут.
# marmeladnoe: (24 октября, 2008 @ 15:48)
$e = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ’.
‘abcdefghijklmnopqrstuvwxyz0123456789-.’;
$m = strlen($e); // == 63
echo $m;
Выведет 64.
# marmeladnoe: (24 октября, 2008 @ 16:00)
…
printr_r(array_map(“google_ext_encode”, $test));
printr_r нет такой функции =)
$res = sprintf(“%’A2s”, $res);
return $res;
меняем на
return sprintf(“%’A2s”, $res);
# Serjio: (16 декабря, 2008 @ 19:10)
Не получается внедрить это в c#, помогите плиз!
# mstar: (17 февраля, 2009 @ 19:21)
Спасибо автору, поборол таки русский текст на графиках.
# Никита Балакирев: (24 апреля, 2010 @ 16:55)
По поводу генерации javasctipt кода написал небольшую программу на QT.
Возможно она вас заинтересует.
Программа на QT
Также рассмотрен небольшой пример взаимосвязи
PHP+MYSQL+Google chart API (javascript)
жду отзывов и предложений