Главная   Новости   Поиск   
Азбука программиста




Яндекс.Метрика

Open Flash Chart – строим графики

Open Flash Chart – строим графики

Создание изображений – достаточно непростая и трудозатратная задачка. Если не использовать особых библиотек. Одной из таких является библиотека Open Flash Chart. Уже по наименованию становится понятно, что:

  1. библиотека распространяется с открытыми исходниками и безвозмездно;
  2. создана для сотворения графиков;
  3. употребляет технологию Flash.

Сходу остановлюсь на 3-ем пт. 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 со последующим содержимым.

Здесь мы подключили open_flash_chart_object.php и вызвали функцию open_flash_chart_object, которая делает html код вставки Flash ролика.

1-ый и 2-ой характеристики функции – длина и ширина графика в пикселях. Кстати, ширину можно задать в процентах (100% - все окно браузера).

3-ий параметр – URL скрипта, который делает строчку с данными для построения графика. В этом случае эту строчку будет создавать PHP скрипт chart-data.php, который мы напишем чуток позднее.

4-ый параметр показывает, необходимо ли использовать SWFObject.

5-ый – URL папки, в какой находится файл Flash ролика (без слеша в конце).

Сейчас перебегаем к скрипту chart-data.php. Как я уже гласил, он сформировывает строчку с данными.

// создаем массив с данными
$data = array();
for( $i=0;
$ititle( 'Функция синуса', '{font-size: 26px;}' );
// добавляем данные на график
$g->set_data( $data );
// строим гистограмму
$g->bar( 100, '#9933CC', 'Гистограмма', 10 );
// снова добавляем теже самые данные
$g->set_data( $data );
// строим 2-ой график
$g->line_dot( 3, 5, '#CC3399', 'График', 10 );
// подписи по оси Х
$labelsX = array();
for ($i = 0; $i 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 – добавляет заголовок графика (во 2-м параметре указываем размер шрифта).

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 – сформировывает строчку с данными для построения графика.

График, который выходит в итоге выполнения скрипта, показан на снимке экрана сначала статьи.

Создатель приводит примеры кода для всех типов графиков, а их больше 10-ка. Так что можно не вникая в тонкости библиотеки подобрать для себя готовое решение.



Безопасность

В этой статье приводятся методы борьбы с вирусами. Опишем типовую ситуацию, которая знакома многим пользователям ПК: установлен новый антивирус, раз в день обновляются базы, все подозрительные файлы сразу удаляются. В один ясный, солнечный день вы приходите к другу и чтобы показать новые фотки, подключаете свою флешку к его компу. Но антивирус начинает вам говорить, сколько вирусов он отыскал на вашей флешке...

Читать далее