С помощью чего оживить график php. Создание интерактивных диаграмм на PHP и FusionCharts. Что мы изменили

Создание графического счетчика посещений

Важная особенность работы с модулем GD заключается в том, что скрипт, формирующий новый рисунок, не должен выводить что-либо кроме самого рисунка (то есть в нем не должно быть вызовов echo, printf и подобных им функций). Впоследствии изображение, сформированное PHP-скриптом, выводится браузером методом указания URL этого скрипта в качестве источника данных, например, .

Создание нового рисунка в PHP начинается либо с создания новой чистой "страницы" (canvas) для рисования, либо с загрузки и модификации уже существующего изображения. Но перед тем как начать процесс вывода графической информации, необходимо выбрать его формат (тип MIME) посредством вызова функции header(str). Например, для формата PNG необходимо использовать следующий код:

header("Content-type: image/png");

Далее для создания области для рисования необходимо вызвать функцию int imagecreate (int x_size, int y_size), которой передать в качестве параметров x_size и y_size, соответственно, ширину и высоту (в пикселах) формируемой картинки; при этом функция вернет идентификатор созданной области для рисования. Если же мы хотим взять за основу уже имеющуюся картинку, то, в зависимости от ее формата, нужно вызвать функцию imagepng, или imagejpeg, или imagegif, передав в качестве параметра имя файла-картинки. Для вывода текста существует функция int imagestring(int im, int font, int x, int y, string s, int col), которой нужно передать: идентификатор области рисования, размер шрифта (1-5), координату X начала текста, координату Y начала текста, сам текст и цвет текста соответственно. Для определения цвета используется конструкция вида

$white=ImageColorAllocate($im, 255, 255, 255)

Последние три числовых параметра - RGB-составляющие требуемого цвета. Но поскольку каждый раз указывать их несколько нерационально, следует создать include-файл с определениями основных цветов colors.inc:

После того как мы нарисовали средствами GD нашу картинку, ее необходимо вывести в браузер. Для этого в зависимости от формата рисунка необходимо вызвать одну из функций: imagepng(int im [, string filename]) или imagejpeg (int im [, string filename [, int quality]]), - передав ей в качестве параметра идентификатор картинки. Если кроме идентификатора области рисования указать имя файла, то изображение будет сохранено на диске под этим именем). После того как мы завершили работу с рисунком, необходимо освободить занимаемую им память. Для этого служит функция imagedestroy (int im). Рассмотрим работу с этими функциями на примере.

Для начала создадим шаблоны заголовка и "подвала" HTML-документа, которые будем использовать для того, чтобы не засорять PHP-код конструкциями HTML:

Работа с графикой в php

Допустим, мы хотим создать графический счетчик посещений и у нас есть файл-заготовка, в который нужно "дописать" количества посещений. Он может выглядеть так.

Тогда скрипт, который помещает в заготовку счетчика данные о посещениях, может выглядеть следующим образом (сам подсчет посещений опущен):

Скрипт для отображения счетчика может быть таким:

Изображение будет содержать введенный текст (рисунок 4).

рисунок 4

Скажу пару слов и о других функциях из библиотеки GD, предназначенных для работы с текстом. itringUp() выводит текст вертикально; ImageChar() и ImageCharUp() выводят один символ; ImageFontHeight() и ImageFontWidth() возвращают высоту и ширину шрифта. Последние две функции используются в следующем примере, в котором строка текста подчеркивается линией (функция ImageLine рисует линии по заданным координатам):

Результат работы скрипта показан на рисунке 5.

рисунок 5

Что еще можно рисовать?

Естественно, кроме линий с помощью GD можно рисовать и другие фигуры. В следующем примере мы воспользуемся функцией ImageFilledRectangle() для того, чтобы вывести в окне браузера французский флаг. Функция предназначена для рисования заполненных определенным цветом прямоугольников. Для начала «зальем» весь рисунок белым цветом, а затем нарисуем красный и синий прямоугольники:

На рисунке 6 можно видеть результат наших трудов.

рисунок 6

PHP позволяет рисовать и другие типы многоугольников. Для этого имеется функция ImagePolygon(). Следующий пример выводит на экран пятиугольник. В качестве параметров (кроме дескриптора изображения и цвета линии) этой функции передается следующая информация: количество вершин (в нашем случае – пять) и массив координат точек, являющихся вершинами. Результат работы скрипта представлен на рисунке 7.

рисунок 7

В этом же скрипте используется еще одна функция, не упоминавшаяся ранее – ImageFillToBorder(). Она используется для заливки области, ограниченной определенным цветом (в нашем случае это синяя линия многоугольника).
Функция ImageArc() умеет рисовать дуги и окружности. Приведу небольшой пример (см. рисунок 8):

рисунок 8

Меняя значения переменных $width и $height, можно рисовать овалы, а меняя углы – добиться отображения различного рода дуг.

Использование готовых изображений

Библиотека GD позволяет не только рисовать картинки, но и пользоваться уже готовыми. Рассмотрим вполне реальную ситуацию: штатный дизайнер вашей фирмы разработал внешний вид кнопок для некоторого сайта, а вам надо поместить на странице несколько одинаковых по дизайну кнопок и подписи к ним.
В состав библиотеки GD входят такие функции, как ImageCreateFromGIF(), ImageCreateFromJPEG() и ImageCreateFromPNG(). Они помогут в тех случаях, когда надо создать новое изображение на основе уже существующего. Пусть у нас имеется файл button.gif (рисунок 9), который содержит гениальный дизайн кнопки для сайта. Ниже приводится PHP-код, который делает готовые кнопки на основе этого файла. Обратите внимание на то, как размеры кнопки, шрифта, и строк текста используются для вычисления координат размещения заголовков. Здесь в качестве подписи к кнопке берется значение переменной $caption, которая передается в скрипт извне:

рисунок 9

Функции iX() и iY() возвращают, соответственно, ширину и высоту изображения. Также существует функция Getiize(), с помощью которой можно определить размеры и тип изображения.
Сам по себе приведенный выше скрипт большой практической ценности не имеет, но его можно использовать в любой HTML-странице посредством SSI или так, как описано в следующем коде:

Что мы изменили?

• Теперь поскольку у нас в наличии имеется несколько видов диаграмм, через $_GET нам будет передаваться тип диаграммы. То же самое и с $Month и $Hour и $Year;
• Далее мы создаём массив $MonthNames, который будет содержать названия месяцев. Поскольку массив начинается с нуля, то первый элемент равен null;
• Теперь в зависимости от типа переменные $Query, $ResultArray, $ChartHeading и $XAsixName присваиваются в switch. Если $Type не установлен, то по умолчанию будут отображаться месяца;
• Далее мы подключаемся к базе, выполняем запрос, копим результат в массив и генерируем первую часть xml файла;
• Далее генерируем тело XML файла. Поскольку тело зависит от типа диаграммы, мы снова используем switch;
• Месяца: всё то же самое за исключением ссылки. Теперь она будет такой: newchart-xmlurl-get-data.php; newchart - говорит о том, что мы создаём новую диаграмму, xmlurl - по какому адресу искать данные. Всё что идёт далее является частью URL. Вот полная ссылка к месяцу Январь: newchart-xmlurl-get-data.php?type=hourly&Year=2010&Month=1
• Дни: всё тоже самое и в случае с месяцем, только вот URL теперь содержит информацию, касающуюся дней;
• Часы: если мы не хотим, чтобы после этой диаграммы следовали другие, просто не установим ей URL;
• В самом конце закрываем XML;

Сохраните данный файл как get-data.php; Теперь откройте браузер и проверьте работу скрипта. Например: http://localhost/fcdemo/get-data.php?year=2010

Вы должны увидеть что-то вроде этого:

Тестируйте

Теперь мы полностью закончили работу над диаграммами. Для того, что проверить работу зайдите по адресу http://localhost/fcdemo/demo.html

Если вы всё правильно сделали, то на странице увидите Column3D диаграмму. Если вы кликните по одному из столбцов, то откроется новая диаграмма. И так далее…

Вывод

Если вы внимательно изучили данный урок, то уже скорее всего имеете общее представление о связных диаграммах на PHP/MySQL. Точно такие же диаграммы могут быть сделаны для следующей статистики:

• Количество продаж за период времени;
• Сколько раз ваш сайт переставал работать;
• Количество посетителей отдельной страницы;

Структура диаграммы будет одна и та же для любой темы. Используйте какой-то параметр для выборки инфы из базы, затем превратите ответ в XML и всё, диаграмма готова!

Для большего вдохновения можете посетить вот эту демо страницу. Спасибо за внимание!

Построение графиков на PHP возможно двумя способами. Можно нарисовать самостоятельно или использовать какую-нибудь библиотеку. Я предлагаю научиться создавать графики самим. Во-первых, потому что хорошие библиотеки являются платными. Во-вторых, используя любую библиотеку, вы ограничены её функционалом. Лучше рисовать графики самостоятельно.

Для начала рассмотрим самый простой вариант. Есть массив, содержащий количество пользователей, которые зарегистрировались на сайте за 5 дней.

$mas = array(2, 7, 20, 9, 14);

Выведем этот массив на страницу в виде графика. Сначала нарисуем оси координат.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Комментарии:

3 - создаём изображение

7, 8 - оси x и y

9-13 - засечки на оси x

14-18 - цифры на оси x

19, 20 - засечки на оси y

21, 22 - цифры на оси y

Рисунок должен выглядеть так:

Чтобы нарисовать линию на графике, нужно найти на нём точки, по которым линия будет строиться. На практике можно сразу находить точку и рисовать по ней линию. Но чтобы пример был более понятным, мы разделим задачу на две части. Сначала найдём все точки, потом нарисуем по ним график. Для этого создадим двухмерный массив, в котором будут координаты x и y каждой точки. Для поиска координат нам нужна точка отсчёта. Это та точка, в которой пересекаются оси координат. В нашем рисунке она имеет координаты x: 50, y: 250 пикселей. Для определения положения каждой точки нужно использовать масштаб графика. В примере мы задали масштаб сами. По оси x для каждого дня создано 100 пикселей. Первый день находится на расстоянии 100 пикселей от начала отсчёта, второй на расстоянии 200 пикселей и так далее. Значит координата x для первого дня равна 50 + 100 = 150. Для второго 50 + 200 = 250.

По оси y для каждых 10 пользователей выделено 100 пикселей. Значит для одного пользователя - 10 пикселей. Нужно учитывать, что у изображения ось y направлена вниз, значит нужно не прибавлять значение к точке отсчёта, а вычитать. В первый день на сайте зарегистрировались 2 посетителя. Координата для этого значения равна 250 - (2 * 10) = 230. Для второго дня 250 - (7 * 10) = 180. Таким образом, массив с координатами точек получается такой:

График выглядит так:

Мы рассмотрели самый простой вариант построения графика. Я заранее знал количество дней и максимальное число пользователей. Поэтому я сам выбрал масштаб графика. Но обычно эти данные могут быть разными и масштаб нужно расчитывать. И сам график выглядит немного иначе. Нам привычно, что оси координат начинаются с нуля. Но для удобства отображения это правило иногда не соблюдается. Ось x начинается не с 0, а с 1, чтобы не слева от линии не было пустого пространства. А ось y показывается так, чтобы на график поместились все значения. Например, если минимальное значение - 60, а максимальное - 70, то ось y содержит именно такой диапазон. Рассмотрим создание такого графика.

В примере ось x имеет длину 570 пикселей. Её нужно разделить на одинаковые сегменты для каждого дня. Ось x начинаться не с 0, а с 1. Поэтому сегмента между 0 и 1 не будет и количество сегментов становится на 1 меньше. Если дней 5, то получится 4 сегмента. Формула расчёта длины сегмента такая:

длина = длина оси / (число дней - 1)

Число может получится дробное, поэтому результат нужно округлить в меньшую сторону.

570 - 50 это длина оси x . Она зависит от размеров изображения.

Ось y делаем такой, чтобы поместились все значения. Нужно получить минимальное и максимальное значения. Они должны занять всю высоту графика. Зная диапазон, мы сможем рассчитать, сколько пикселей должно соответствовать одному пользователю на графике.

диапазон = максимальное - минимальное

длина = длина оси / диапазон

Полученное число также нужно округлить.