Об этой библиотеке я раньше рассказывал (Open Flash Chart – строим графики). Но с тех пор прошло почти 8 месяцев и за это время многое изменилось.
Вышла новая версия библиотеки Open Flash Chart 2 и она довольно серьезно отличается от первой версии. Объяснять причины введения изменений я не буду, просто процитирую автора.
Open Flash Chart 1.x была отличной и хорошо работала. Но я сделал несколько маленьких ошибок, которые со временем выросли, стали раздражать меня и сделали исходный код жутким. Поэтому я решил, что настало время переработать код и снова сделать его красивым. Теперь в качестве формата данных используется JSON. Это привело к значительным изменениям и позволило реализовать несколько новых возможностей.
Выход новой версии не сделал V 1.x устаревшей. Вы можете использовать обе версии одновременно. Поэтому не трогайте ваш работающий с V 1.x код, а для новых графиков используйте ту версию которой вам удобнее (проще) пользоваться.
Думаю, ситуация более-менее ясна, поэтому сразу приведу пример использования второй версии.
Как и в первой версии нужно внимательно следить за размещением библиотеки и правильно указывать пути к файлам.
Структура сайта.
Допустим у нас есть домен http://localhost/
Библиотека находится в папке tests/ofc/lib/ и имеет такую структуру
tests/ofc/lib open-flash-chart.swf php-ofc-library/ ... (все файлы из папки php-ofc-library)
Примечание. Из дистрибутива я скопировал только флеш-ролик для создания графика и PHP версию библиотеки.
Страница, на которой мы будем показывать графики — http://localhost/tests/ofc/mygraphs.php.
Источники данных.
Данные можно брать откуда угодно, из базы, текстового файла, рассчитывать. Для этого примера мы создадим 2 php скрипта (data1.php и data2.php), которые будут формировать массивы с данными для построения графиков и преобразовывать их в формат JSON. Оба файла разместим в папке datasrc.
Т.к. источников данных у нас два, а график будет один, то нам нужно как-то указать какой из них необходимо использовать.
Имя скрипта – источника данных можно передать вместе с URL (в параметре ofc).
Т.е., на странице
http://localhost/tests/ofc/mygraphs.php?ofc=datasrc/data1.php
мы увидим график с данными сформированными скриптом data1.php.
А на странице
http://localhost/tests/ofc/mygraphs.php?ofc=datasrc/data2.php
график с данными из data2.php.
Обратите внимание. При указании источника данных мы указываем путь к файлу (относительно данной страницы).
Теперь рассмотрим сами скрипты.
mygraphs.php
<?php
if (!isset($_GET['ofc'])) {
Header('Location: mygraphs.php?ofc=datasrc/data1.php');
}
?>
<?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>Open Flash Chart 2</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>Графики</h1>
<ul>
<li><a href="mygraphs.php?ofc=datasrc/data1.php">Первый график (data1.php)</a></li>
<li><a href="mygraphs.php?ofc=datasrc/data2.php">Второй график (data2.php)</a></li>
</ul>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="500"
height="250" id="graph-2" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="lib/open-flash-chart.swf" />
<param name="quality" value="high" />
<embed src="lib/open-flash-chart.swf"
quality="high"
bgcolor="#FFFFFF"
width="500"
height="250"
name="open-flash-chart"
align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
Принцип работы здесь следующий. Сначала проверяем указан ли параметр ofc и если нет, отправляем посетителя на mygraphs.php?ofc=datasrc/data1.php. Т.е. на страницу с графиком, построенным по данным из скрипта data1.php.
На самой странице мы создаем список со ссылками на оба наших графика (строки 20-23) и размещаем flash ролик, с помощью которого и будет показан график (строки 25-43).
Код вставки ролика в основном остается без изменений. Нас, прежде всего, интересуют параметры width и height (задают размер графика в пикселях, строки 27, 28, 36, 37), id и align (строки 28, 39).
И, самое главное, атрибут value в параметре movie (строки 31 и 33). В нем указываем размещение ролика (lib/open-flash-chart.swf). Здесь также путь указан относительно данной страницы.
Теперь рассмотрим PHP скрипты, которые формируют данные для графиков.
data1.php
<?php
include '../lib/php-ofc-library/open-flash-chart.php';
$tmp = array();
for( $i=0; $i<9; $i++ )
{
$tmp[] = abs($i - 5);
}
$title = new title("Данные получены из файла data1.php");
$bar = new bar();
$bar->set_values($tmp);
$chart = new open_flash_chart();
$chart->set_title($title);
$chart->add_element($bar);
echo $chart->toString();
?>
Здесь мы загружаем библиотеку open-flash-chart.php (обратите внимание на то, как указано её размещение).
Затем формируем массив с данными $tmp (строки 4-8). Здесь я использовал не сложную функцию.
После этого создаём объект типа bar. Думаю, не сложно догадаться, что он используется для создания гистограмм. И с помощью метода set_values указываем массив с исходными данными.
Второй объект, который нам понадобиться — open_flash_chart. Его метод set_title используется для установки заголовка графика, а add_element – добавляет нашу гистограмму.
Последний шаг. Формируем строку в формате JSON с данными нашего графика (метод toString()).
Скрипт data2.php практически не отличается. Я только изменил функцию, формирующую массив с данными и тип графика.
data2.php
<?php
include '../lib/php-ofc-library/open-flash-chart.php';
$tmp = array();
for( $i=0; $i<9; $i++ )
{
$tmp[] = abs($i - 2);
}
$title = new title("Данные получены из файла data2.php");
$line = new line();
$line->set_values($tmp);
$chart = new open_flash_chart();
$chart->set_title($title);
$chart->add_element($line);
echo $chart->toString();
?>
Как видите, принцип работы библиотеки достаточно простой. А на официальном сайте вы найдете множество других интересных примеров.
В заключение хочу сказать пару слов об эффективности этой библиотеки.
Т.к. картинка с графиком формируется на стороне клиента (с помощью Flash), то нагрузка на сервер будет минимальной. Получение данных и преобразование их в JSON формат потребует значительно меньше ресурсов, чем получение данных и создание графика, например, с помощью библиотеки GD.
Но в тоже время посетителю будет отправлен flash ролик (open-flash-chart.swf) объемом 264кБ. Для сравнения аналогичный png файл с изображением графика будет занимать 10-30кБ.
Отсюда простой вывод. Если ваше приложение напоминает Google Analytics, то с помощью Open Flash Chart вы не только снизите нагрузку на свой сервер, но и сэкономите трафик пользователей, т.к. flash ролик грузится только один раз. Но если вам нужно показать всего один или два графика, то вряд ли эта библиотека будет самым удачным выбором.
Если вы не согласны или хотите что-то спросить, не стесняйтесь, комментарии открыты 😉
P.S. В следующий раз я продолжу тему графиков и расскажу об использовании сторонних сервисов для этих целей.
Интересно почитать
Аутсорсинг непрофильных операций. Логос-Аудит — ведение кадрового учёта для малого и среднего бизнеса.
