Open Flash Chart – строим графики
Создание изображений – довольно сложная и трудоемкая задача. Если не использовать специальных библиотек.
Об одной из них я и хочу рассказать.
Open Flash Chart. Уже по названию становится ясно, что:
1) библиотека распространяется с открытыми исходниками и бесплатно;
2) предназначена для создания графиков;
3) использует технологию Flash.
Сразу остановлюсь на третьем пункте. Flash обладает одним недостатком. Если у посетителя не установлен Flash player, то график он не увидит.
Зато достоинств гораздо больше:
1) Интерактивность. При наведении указателя мыши на график появляется подсказка с данными выбранной точки.
2) Снижение нагрузки на сервер. Если использовать графики в виде картинок, то серверу придется создавать изображение при каждом запросе, а это довольно ресурсоемкая операция. В данном случае используется один и тот же Flash ролик, который входит в состав дистрибутива библиотеки. Серверный скрипт должен только создать текстовую строку с данными для построения графика.
3) Увеличение скорости загрузки, экономия трафика. Flash ролик грузится только один раз, занимает 63 кБ. При этом график может быть размером с экран браузера.
Но это все теория. Переходим практической части.
Из дистрибутива библиотеки нам нужны:
1) Flash ролик - open-flash-chart.swf;
2) файлы open_flash_chart_object.php и open-flash-chart.php из папки php-ofc-library.
При этом файл open_flash_chart_object.php используется для создания html кода вставки графика на страницу. А open-flash-chart.php содержит вспомогательные функции для работы с данными.
Примечание. Для создания файла с данными не обязательно использовать PHP. В библиотеку входят готовые решения для .Net, Java, Ruby, Perl. Вообще-то можно использовать любой скриптовый язык или просто записать данные в обычный текстовый файл. Но формат данных довольно сложный и без вспомогательных функций работать с ним не удобно.
Копируем эти три файла в папку с сайтом.
Создаем файл index.php со следующим содержимым.
-
<body>
-
<?php
-
include_once 'open_flash_chart_object.php';
-
$baseURL = "http://".$_SERVER['HTTP_HOST'].$_SERVER[REQUEST_URI];
-
open_flash_chart_object( 400, 250, $baseURL.'/chart-data.php', false, $baseURL );
-
?>
-
</body>
Тут мы подключили open_flash_chart_object.php и вызвали функцию open_flash_chart_object, которая создает html код вставки Flash ролика.
Первый и второй параметры функции – длина и ширина графика в пикселях. Кстати, ширину можно задать в процентах (100% - все окно браузера).
Третий параметр – URL скрипта, который создает строку с данными для построения графика. В данном случае эту строку будет создавать PHP скрипт chart-data.php, который мы напишем чуть позже.
Четвертый параметр указывает, нужно ли использовать SWFObject.
Пятый – URL папки, в которой находится файл Flash ролика (без слеша в конце).
Теперь переходим к скрипту chart-data.php. Как я уже говорил, он формирует строку с данными.
-
// создаем массив с данными
-
$data = array();
-
for( $i=0; $i<10; $i++ )
-
{
-
$data[] = sin(pi()/5*$i);
-
}
-
-
// подключаем класс со вспомогательными функциями
-
// для построения графика
-
include_once( 'open-flash-chart.php' );
-
$g = new graph();
-
-
// Заголовок
-
$g->title( 'Функция синуса', '{font-size: 26px;}' );
-
-
// добавляем данные на график
-
$g->set_data( $data );
-
// строим гистограмму
-
$g->bar( 100, '#9933CC', 'Гистограмма', 10 );
-
-
// еще раз добавляем теже самые данные
-
$g->set_data( $data );
-
// строим второй график
-
$g->line_dot( 3, 5, '#CC3399', 'График', 10 );
-
-
// подписи по оси Х
-
$labelsX = array();
-
for ($i = 0; $i < 10; $i++) {
-
$labelsX[] = round(pi()/5*$i, 2);
-
}
-
$g->set_x_labels($labelsX);
-
-
// максимальное и минимальное значение по оси Y
-
$g->set_y_max( 1.2 );
-
$g->set_y_min( -1.2 );
-
// количество меток по оси Y
-
$g->y_label_steps( 12 );
-
-
// отображаем данные
-
echo $g->render();
Как видите, вся работа выполняется методами класса graph (находится в файле open-flash-chart.php).
Исходные данные для построения графика должны находится в обычном массиве. Для этого примера я взял функцию синуса (строки 2-6).
Названия функций класса graph говорят сами за себя.
title – добавляет заголовок графика (во втором параметре указываем размер шрифта).
set_data – добавляет данные на график.
bar – строит гистограмму. Параметры:
1) прозрачность;
2) цвет;
3) надпись в легенде;
4) размер шрифта в легенде.
line_dot – строит обычный график с точками. Параметры:
1) толщина линии;
2) диаметр точек;
3) надпись в легенде;
4) размер шрифта в легенде.
set_x_labels – добавляет подписи по оси Х (подписи должны находится в массиве).
set_y_max, set_y_min – ограничения по оси Y.
y_label_steps – количество меток по оси Y (в данном случае шаг получается равным 0,2).
render – формирует строку с данными для построения графика.
График, который получается в результате выполнения скрипта, показан на скриншоте в начале статьи.
Отдельно хочу отметить документацию. Автор приводит примеры кода для всех типов графиков, а их больше десятка. Так что можно не вникая в тонкости библиотеки подобрать себе готовое решение.
Если хотите поэкспериментировать с этим примером, качайте архив с ним. В архив входит не вся библиотека, а только файлы с Flash роликом и PHP классами.
До встречи!
Понравилась статья? Подпишитесь на продолжение 
!
Добавьте эту страницу в 
Опубликовано в HTML, PHP, Web разработка
Комментарии (14)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Гм. хороший офис. Я и не знал что можно там строить свои графики )
Я вот смотрю на тему и думаю,это каким же надо быть умным что бы с ходу во всем этом розобратся,я просто летаю в этом материале(((((
Мастер ,а зачем же смотриш если тебе это все как я понял по барабану???
Тут куча ошибок автор статьи делает одно а описует другое куча не венрных инклудов ппц….
Странно, пример в архиве нормально у меня работал, а в тексте - скопированные фрагменты кода из этого примера.
Напишите, пожалуйста, какие именно ошибки у вас возникли.
а по мне так классный скрипт, и автор нормально так, понятно, всё разложил по полочкам! автору 5 баллов.
Благодарю, при первом запуске понравилось
Я непонимаю зачем вылаживать нерабочие кривые примеры!
У меня пример нормально работает. Напишите, пожалуйста, какие у вас были ошибки.
Статья полезная, примеры работают. Есть только проблема: как можно сделать так, что бы графики обновлялисьпри обновлении страницы?
По-моему, делать ничего не нужно
У меня график обновляется если между перезагрузками страницы изменяется chart-data.php, т.е. данные по которым строится график (для эксперимента я заменил функцию sin на cos, строка 5 последнего листинга).
А если данные не меняются, то зачем обновлять график?
ну вот например эксплорер обнолвляет график при переоткрыитии страницы, а В опере график висит месячной давности…
Я хочу реализовать например, что бы при выборе определенных параметров, строился график, вот как это можно реализовать? В chart-data.php данные заносятся из базы данных и данные меняются.
Я нашел готовую статью на эту тему, правда сам не разбирался, но их пример прекрасно работает.
Спасибо за статью… разбираться уже буду после праздника… Похоже что придется исполизовать джаву