Графики своими руками – Open Flash Chart 2

Владимир | | PHP, Web разработка.

open_flash_chart_2

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

Интересно почитать

Аутсорсинг непрофильных операций. Логос-Аудит — ведение кадрового учёта для малого и среднего бизнеса.

  • Big_Shark

    Посмотрите на http://amcharts.com у них просто офигенные диаграммы и бесплатно.
    Хорошо бы кстати демо скрипта который вы написали в данной статье.

    Статья не плохая а библиотека не понравилась.

    • Спасибо за ссылку. Я не знал об этой библиотеке, первое впечатление отличное. Возможности явно шире чем у OpenFlashChart.

      Только она не совсем бесплатная. В бесплатном варианте будет ссылка.

      >> Хорошо бы кстати демо скрипта

      Учту. Кстати, картинка в начале статьи — скриншот графика из скрипта.

      >> а библиотека не понравилась

      Почему? Вполне нормально работает.

      • Big_Shark

        Только она не совсем бесплатная. В бесплатном варианте будет ссылка.

        Она бесплатная а ссылка это мелочи.
        Если для своего сайта то и ссылкой норма если для заказчика то просто взять у него денег на скрипт без ссылки и все.
        Статистика в основном нужна для администратора в админки а там все равно есть ссылка или нет.

        Почему? Вполне нормально работает.

        Очень мало настроек и не удобное использование.
        Ну и разные красивости.
        И видов вывода меньше чем у amCharts хотя по моему вес флешки больше.

        У меня на оффсайте не все примеры работают.

        • Флешка больше весит у Open Flash Chart, т.к. она у них одна на все типы графиков.

          У amCharts для разных графиков используются разные флешки. Суммарно они весят больше, но если на странице используются графики одного или двух видов, то выигрыш становится очевидным.

  • Big_Shark

    Посмотрите на http://amcharts.com у них просто офигенные диаграммы и бесплатно.
    Хорошо бы кстати демо скрипта который вы написали в данной статье.

    Статья не плохая а библиотека не понравилась.

    • Спасибо за ссылку. Я не знал об этой библиотеке, первое впечатление отличное. Возможности явно шире чем у OpenFlashChart.

      Только она не совсем бесплатная. В бесплатном варианте будет ссылка.

      >> Хорошо бы кстати демо скрипта

      Учту. Кстати, картинка в начале статьи — скриншот графика из скрипта.

      >> а библиотека не понравилась

      Почему? Вполне нормально работает.

      • Big_Shark

        Только она не совсем бесплатная. В бесплатном варианте будет ссылка.

        Она бесплатная а ссылка это мелочи.
        Если для своего сайта то и ссылкой норма если для заказчика то просто взять у него денег на скрипт без ссылки и все.
        Статистика в основном нужна для администратора в админки а там все равно есть ссылка или нет.

        Почему? Вполне нормально работает.

        Очень мало настроек и не удобное использование.
        Ну и разные красивости.
        И видов вывода меньше чем у amCharts хотя по моему вес флешки больше.

        У меня на оффсайте не все примеры работают.

        • Флешка больше весит у Open Flash Chart, т.к. она у них одна на все типы графиков.

          У amCharts для разных графиков используются разные флешки. Суммарно они весят больше, но если на странице используются графики одного или двух видов, то выигрыш становится очевидным.

  • Big_Shark

    В большинстве случаев не все типа графиков буду использоваться на страницы, а примечательно 1-2 типа.
    у amCharts больше различных типов графиков, по этому и суммарный вес больше.

    У amCharts минус это неудобное назначения «Заголовка» которое практически призывает для каждого отдельного графика писать отдельный конфиг.

    • для каждого отдельного графика писать отдельный конфиг

      В смысле для каждого типа графиков? Или именно для каждого графика?

      • Big_Shark

        Или именно для каждого графика?

        Для каждого графика.
        Если у вас 1 график показывает погоду а другой курс доллара.
        А вот если у вас оба графика показывают погоду просто в разных городах то можно обойтись и 1 конфигом.

        • Спасибо!
          Нужно будет поэкспериментировать с библиотекой. Если, например, заголовки графиков нужно менять в зависимости от данных, то конфиг — не очень удобный вариант.

  • Big_Shark

    В большинстве случаев не все типа графиков буду использоваться на страницы, а примечательно 1-2 типа.
    у amCharts больше различных типов графиков, по этому и суммарный вес больше.

    У amCharts минус это неудобное назначения «Заголовка» которое практически призывает для каждого отдельного графика писать отдельный конфиг.

    • для каждого отдельного графика писать отдельный конфиг

      В смысле для каждого типа графиков? Или именно для каждого графика?

      • Big_Shark

        Или именно для каждого графика?

        Для каждого графика.
        Если у вас 1 график показывает погоду а другой курс доллара.
        А вот если у вас оба графика показывают погоду просто в разных городах то можно обойтись и 1 конфигом.

        • Спасибо!
          Нужно будет поэкспериментировать с библиотекой. Если, например, заголовки графиков нужно менять в зависимости от данных, то конфиг — не очень удобный вариант.

  • А как open flash chart и php относятся к Java ? Статья просто находится в категории Java 🙂

    • Спасибо! Случайно указал не правильную категорию.