Скачать шаблоны сайтов:
Динамическое создание диаграмм на php
Язык программирования php позволяет динамически создавать диаграммы на основе каких-либо числовых данных, что является удобным для информативного отображения на сайте трендов, динамики изменения значений показателей и т.д. Рассмотрим пример создания простой гистограммы, отражающей динамику изменения количества посетителей сайта за десять дней. Допустим, что количество составляет тысячи посетителей.
Для рисования будем использовать библиотеку gd 2.0 (для php 5). Данные для рисования гистограммы будем брать из базы MySQL, рисунок будем создавать в формате .jpeg.
Для отображения рисунка на странице в качестве источника рисунка указываем файл в формате .php, в котором содержится скрипт, создающий гистограмму.
<img src=img1.php>
При этом мы можем передать скрипту какие-либо параметры методом GET, таким образом, создавать с помощью одного и того же скрипта разные рисунки.
Для того, чтобы гистограмма выглядела презентабельно, кроме столбцов, отражающих значения, нарисуем также шкалу значений.
Учитывая то, что размер рисунка заданный, шкала значений будет меняться в зависимости от максимального и минимального значений количества посетителей сайта за день.
Рассмотрим код скрипта, создающего гистограмму (файл img1.php), который мы указали в качестве источника рисунка.
Создаем рисунок заданного размера. Размер указывается в пикселях.
$im = imagecreate(545,165) or die('Cannot create image');
Именно такой размер выбран для удобства, данную величину можно изменять. Но при этом нужно помнить, что заранее нужно рассчитать размеры всех элементов для их оптимального размещения на рисунке.
Далее определяем цвета, которые нам понадобятся для рисования. Используем светло-синий цвет для заливки столбцов гистограммы, черный - для отображения значений и рисования осей, светло-серый - для рисования шкалы.
$black = imagecolorallocate ($im, 0, 0, 0);
$l_grey = imagecolorallocate ($im, 221, 221, 221);
$l_blue = imagecolorallocate($im, 0x46, 0x82, 0xB4);
Далее можем получить значения, которые передавали скрипту методом GET.
Подключаемся к базе MySQL и записываем значения в массив $values. Даты запишем в массив $dates. Для удобства и простоты изложения сделаем именно так, вместо того, чтобы использовать один ассоциативный массив с датами в качестве ключей.
Определяем параметры гистограммы.
Задаем ширину столбца:
$col_width = 50;
Определяем минимальное, максимальное значение и разницу между ними:
$maxvalue = max($values);
$minvalue = min($values);
$value_bottom = 1000*floor($minvalue/1000);
$value_top = $maxvalue + 200;
$value_diff = $value_top - $value_bottom;
Вычисляем координаты максимального, минимального значений, а также координаты сетки шкалы:
$left_top = 100*ceil($maxvalue/100);
$left_bottom = $value_bottom;
$left_middle = (($left_top - $left_bottom)/2) + $left_bottom;
$lt_y = (146 - round(140*($left_top - $value_bottom)/$value_diff));
$lm_y = (146 - round(140*($left_middle - $value_bottom)/$value_diff));
Теперь рисуем оси координат с помощью функции, которой в качестве параметров передаем размеры рисунка:
function draw_axises($im_width,$im_heignt)
{
global $im,$black,$l_grey,$x0,$y0,$maxX,$maxY;
$x0=33.0; //начало оси координат по X
$y0=18.0; //начало оси координат по Y
$maxX=$im_width; //максимальное значение оси
//координат по X в пикселах
$maxY=$im_heignt-$y0; //максимальное значение оси
//координат по Y в пикселах
//рисуем ось X
imageline($im, $x0, $maxY, $maxX, $maxY, $black);
//рисуем ось Y
imageline($im, $x0, $y0, $x0, $maxY, $black);
//рисуем стрелку на оси X
$xArrow[0]=$maxX-6; $xArrow[1]=$maxY-2;
$xArrow[2]=$maxX; $xArrow[3]=$maxY;
$xArrow[4]=$maxX-6; $xArrow[5]=$maxY+2;
imagefilledpolygon($im, $xArrow, 3, $black);
//рисуем стрелку на оси Y
$yArrow[0]=$x0-2; $yArrow[1]=$y0+6;
$yArrow[2]=$x0; $yArrow[3]=$y0;
$yArrow[4]=$x0+2; $yArrow[5]=$y0+6;
imagefilledpolygon($im, $yArrow, 3, $black);
}
draw_axises(545,165);
Определяем точку отсчета и рисуем столбцы гистограммы на основе данных массива:
$x = 30;
$y = 146;
foreach($values as $value)
{
imagefilledrectangle($im,
$x + 5,
$y - round(140*($value - $value_bottom)/$value_diff),
$x + $col_width,
146,
$l_blue);
$x += $col_width;
}
Теперь рисуем сетку шкалы:
imageline($im, 33, $lt_y, 545, $lt_y, $l_grey);
imageline($im, 33, $lm_y, 545, $lm_y, $l_grey);
imageline($im, 31, $lt_y, 33, $lt_y, $black);
imageline($im, 31, $lm_y, 33, $lm_y, $black);
Далее ставим подписи значений:
$x = 30;
$y = 146;
foreach($values as $value)
{
imagestring($im,
1,
$x + 13,
$y - round(140*($value - $value_bottom)/$value_diff) - 10,
$value,
$black);
$x += $col_width;
}
Теперь ставим подписи дат:
$x = 30;
$y = 150;
foreach($dates as $value)
{
imagestring($im,
1,
$x + 7,
$y + 5,
$value,
$black);
$x += $col_width;
}
Ставим подписи сетки шкалы:
imagestring($im, 1, 0, $lt_y - 4, $left_top, $black);
imagestring($im, 1, 0, $lm_y - 4, $left_middle, $black);
imagestring($im, 1, 0, 140, $left_bottom, $black);
И последнее, определяем параметры рисунка:
header('Content-type: image/jpeg');
imagejpeg($im);
imagedestroy($im);
Все, скрипт готов к использованию. В статье мы рассмотрели пример создания простой гистограммы. Кроме этого, на php можно также нарисовать график (что проще), а также круговую диаграмму - что немного сложнее, так как требует небольших знаний по математике. В последующих статьях по этой теме рассмотрим примеры скриптов, рисующих данные диаграммы.
Другие новости, статьи по теме PHP, JavaScript, web-программирование:
ORDER BY DESC с несколькими значениями NULL в MySQL
Простое слайд-шоу на JavaScript, случайный выбор изображений
Специальные символы в html
Загрузка файлов на сервер, скрипт на php
PHP+MySQL вопросительные знаки
Слайд-шоу на JavaScript
Новости, статьи:
ORDER BY DESC с несколькими значениями NULL в MySQL
Простое слайд-шоу на JavaScript, случайный выбор изображений
Загрузка файлов на сервер, скрипт на php
PHP+MySQL вопросительные знаки
Динамическое создание диаграмм на php
Прямое пополнение счета без комиссии (украинские мобильные операторы)
Все новости, статьи