Статьи → Google → Приручаем Google Chart API

В начале этого месяца, большой брат открыл новый интересный сервис для генерации красивых диаграмм — Google Chart. Эти графики по своему оформлению и функциональности очень близки к тому, что мы уже видели в Spreadsheets, но теперь появилась возможность генерировать их автономно.

Программный интерфейс у сервиса достаточно прост: все параметры отрисовки диаграммы и данные для визуализации передаются на сервер 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.'" />';
}

Стоит обратить внимание на две детали:

1. Функция не задействует все параметры, доступные в Charts API, а работает только с наиболее актуальными. Она была написана для генерации круговых диаграмм под конкретную задачу. Для иных типов графиков логичным шагом будет корректировка набора аргументов.
2. Файл с кодом сохранен в кодировке 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

В результате получаем диаграмму:

Google, php

19 Декабря, Воскресенье