Создание графики на PHP. Создание графика средствами библиотеки GD Пример использования библиотеки gd: создание простых фигур

В большинстве случаев графическое представление данных наиболее приемлемо в той или иной ситуации. Если же диаграммы ещё и интерактивны, то это совсем круто! Что я имею в виду? Нажатие на элемент диаграммы влечёт за собой открытие другой диаграммы.

Что такое связные диаграммы?

До этого момента, подобные диаграммы соответствовали только одному потоку данных и не были полностью связаны между собой. Что если мы сделаем диаграммы, по которым можно будет двигаться взад и вперёд? Такие диаграммы называются связными и относятся к новому пакету FusionCharts 3.2, которые позволяют вам создать многоуровневые диаграммы извлекая данные из одного источника. В таких диаграммах всё связано между собой.

В этом уроки мы рассмотрим интеграцию таких диаграмм в небольшой проект. База данных MySQL будет содержать данные, PHP будет работать как связующее звено, создающее XML файл, FusionCharts будут принимать этот файл и выводить данные.

Несколько слов о связных диаграммах:

• По умолчанию диаграмма потомок, имеет такой же тип отображения (допустим столбцовые диаграммы) как и родитель;
• Дополнительные настройки могут быть добавлены на любом уровне иерархии, включая сам тип диаграммы;
• Диаграммы можно размещать в HTML контейнере, jQuey диалогах, lightbox, окнах extJS и т.д.;
• Поддержка событий средствами JavaScript;

Что мы хотим сделать?

Множества раз перед нами стояла задача отследить рост посетителей на наших сайтах. Так давайте же создадим небольшой проект, который будет показывать число зарегистрированных пользователей за месяц / день / час или другими словами, число пользователей зарегистрировавшихся на нашем сайте за определённый промежуток времени.

Требования:

• Любой веб-сервер с PHP;
• MySQL сервер с базой данных;
• FusionCharts , которые вы можете скачать или купить на их сайте;

Шаг 0. Подготовка

Создайте пустую базу данных с названием fctutorialс.

Создайте пустую папку с названием fcdemo в корне вашего веб-сервера (обычно www)

Шаг 1. Подготовка базы данных

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

CREATE TABLE `users` (`ID` int(10) unsigned NOT NULL AUTO_INCREMENT, `Time` timestamp NOT NULL DEFAULT "0000-00-00 00:00:00", PRIMARY KEY (`ID`), KEY `Time` (`Time`))

Мы создали таблицу, содержащую 2 поля: ID и time. В time будет содержаться информация о времени регистрации пользователя. Заметьте, что на данное поле мы поставили индекс т.к. будем использовать множество условий WHERE. Индекс позволит нам ускорить процесс выборки.

Подключение к базе

Напишем небольшой скрипт для подключения к базе данных:

Замените настройки на свои собственные и сохраните данный файл под именем connect-to-database.php в папке fcdemo.

Вставим случайные данные

Если бы это был настоящий проект, то таблица users пополнялась бы со временем, но для демонстрации нам необходимо вставить какие-то данные. Напишем небольшой скрипт, который будет вставлять случайные данные в таблицу. Не переживайте, если вы не поймёте следующий код - для этого урока это не принципиально.

Сохраните этот файл под названием generate-random-data.php всё в той же папке.

Сначала мы инклудим файл подключения к базе. Затем устанавливаем временные рамки, из которых случайным образом будет выбираться время для регистрации пользователя. Вы можете изменить количество вставляемых строк. Для этого вам нужно подправить переменную $RecordsToInsert.

Потом мы запускаем скрипт вставки сгенерированных записей в базу данных. Для того, чтобы запустить этот процесс зайдите по этому адресу - http://localhost/fcdemo/generate-random-data.php.

В конце концов вы должны увидеть сообщение: «Вставлено {$RecordsToInsert} записей»

Шаг 2. Готовим скелет сайта

Нам необходимо создать самую простую страницу для отображения нашей диаграммы. Что-то типа этого:

FusionCharts v3.2 - LinkedCharts PHP Demo