LXF115:JpGraph - История изменений

Crazy Rebel в 12:42, 22 января 2010

2010-01-22T12:42:13Z

← Предыдущая		Версия 12:42, 22 января 2010
Строка 51:		Строка 51:

	Как правило, диаграммы и графики строятся по набору данных, представлением которого в языках программирования является массив: его мы и объявляем в строке '''5'''. Конечно, пример наигран, и для изменения графика требуется правка исходных текстов – в реальной ситуации информация может поступать из базы данных или считываться из файла. В строке '''6''' мы создаем объект класса '''Graph''', передавая ему 2 параметра – ширину и высоту изображения. Следующая строка отвечает за масштабирование. В строке '''8''' мы создаем график-линию, передавая в конструктор класса данные нашего массива, а в строке '''9''' указываем его цвет. Наконец, в строке '''10''' мы добавляем наш график к изображению, а в строке '''11''' непосредственно генерируем (отрисовываем) его.		Как правило, диаграммы и графики строятся по набору данных, представлением которого в языках программирования является массив: его мы и объявляем в строке '''5'''. Конечно, пример наигран, и для изменения графика требуется правка исходных текстов – в реальной ситуации информация может поступать из базы данных или считываться из файла. В строке '''6''' мы создаем объект класса '''Graph''', передавая ему 2 параметра – ширину и высоту изображения. Следующая строка отвечает за масштабирование. В строке '''8''' мы создаем график-линию, передавая в конструктор класса данные нашего массива, а в строке '''9''' указываем его цвет. Наконец, в строке '''10''' мы добавляем наш график к изображению, а в строке '''11''' непосредственно генерируем (отрисовываем) его.
		+
		+	{{Врезка \| Содержание= [[Изображение: LXF115_76_1.jpg\| 300px\| Рис. 1]] Рис. 1. Наш «первый блин»: все бы неплохо, но чего-то не хватает. \| Ширина=300px}}

	Ну вот, наш первый график готов (рис. 1), но для неподготовленного человека он пока ничего не значит и не несет никакой полезной информации. Давайте снабдим его подписями и разъяснениями – добавим после строки '''7''' следующий код:		Ну вот, наш первый график готов (рис. 1), но для неподготовленного человека он пока ничего не значит и не несет никакой полезной информации. Давайте снабдим его подписями и разъяснениями – добавим после строки '''7''' следующий код:
Строка 118:		Строка 120:

	Глядя на график, сложно понять, что означает каждая из линий, поэтому добавим легенду:		Глядя на график, сложно понять, что означает каждая из линий, поэтому добавим легенду:
		+
		+	{{Врезка \| Содержание= [[Изображение: LXF115_77_1.jpg\| 300px\| Рис. 2]] Рис. 2. После некоторой доводки график выглядит уже весьма профессионально. \| Ширина=300px}}

	<source lang=php>		<source lang=php>
Строка 187:		Строка 191:

	Разберемся, что происходит в этих строках. В первую очередь, мы подключаем библиотеку '''jpgraph_utils.inc.php''', которая содержит вспомогательные утилиты, в том числе и класс генерации данных для функций (нормальных и параметрических), и уже в '''5'''-й строке создаем объект этого класса. Обратите внимание, что самая функция представлена строкой, содержащей ''PHP''-конструкцию с переменной '''$x''': это необходимо для безопасности вашего приложения. В строке '''6''' мы вычисляем значения функции в виде пар ('''x,y=f(x)''') на некотором множестве точек в диапазоне от 0 до 10.		Разберемся, что происходит в этих строках. В первую очередь, мы подключаем библиотеку '''jpgraph_utils.inc.php''', которая содержит вспомогательные утилиты, в том числе и класс генерации данных для функций (нормальных и параметрических), и уже в '''5'''-й строке создаем объект этого класса. Обратите внимание, что самая функция представлена строкой, содержащей ''PHP''-конструкцию с переменной '''$x''': это необходимо для безопасности вашего приложения. В строке '''6''' мы вычисляем значения функции в виде пар ('''x,y=f(x)''') на некотором множестве точек в диапазоне от 0 до 10.
		+
		+	{{Врезка \| Содержание= [[Изображение: LXF115_78_1.jpg\| 300px\| Рис. 3]] Рис. 3. Гладкая кривая ''JpGraph'' тоже по плечу. \| Ширина=300px}}

	Со строки '''7''' по '''15''' мы создаем разметку. Особое внимание тут стоит уделить конструкции '''SymChar::Get(‘pi’)''' – вызов статической функции '''Get''' класса '''SymChar''', которая возвращает символы греческого алфавита, в нашем случае это «пи». В строке '''24''' вызывается метод '''SetMajTickPositions()''', который расставляет наши метки (разметку) в соответствии с вычисленными позициями.		Со строки '''7''' по '''15''' мы создаем разметку. Особое внимание тут стоит уделить конструкции '''SymChar::Get(‘pi’)''' – вызов статической функции '''Get''' класса '''SymChar''', которая возвращает символы греческого алфавита, в нашем случае это «пи». В строке '''24''' вызывается метод '''SetMajTickPositions()''', который расставляет наши метки (разметку) в соответствии с вычисленными позициями.
Строка 218:		Строка 224:

	Основное отличие этого кода от виденного нами ранее кроется в строке '''8''': мы используем класс '''BarPlot''' вместо '''LinePlot'''. Из полученной гистограммы мы вряд ли извлечем какие-либо полезные данные, ведь нет ни подписей, ни легенды. По традиции, усовершенствуем ее, и начнем с установки ширины столбцов:		Основное отличие этого кода от виденного нами ранее кроется в строке '''8''': мы используем класс '''BarPlot''' вместо '''LinePlot'''. Из полученной гистограммы мы вряд ли извлечем какие-либо полезные данные, ведь нет ни подписей, ни легенды. По традиции, усовершенствуем ее, и начнем с установки ширины столбцов:
		+
		+	{{Врезка \| Содержание= [[Изображение: LXF115_79_1.jpg\| 300px\| Рис. 4]] Рис. 4. Обратите внимание — пик посещаемости приходится на середину рабочего дня. К чему бы это? \| Ширина=300px}}

	$bplot->SetWidth(0.9);		$bplot->SetWidth(0.9);
Строка 244:		Строка 252:

	Очень часто значения посещаемости на выходных отличаются от показателей в будние дни, когда люди находятся на работе: здесь нам пригодятся сгруппированные гистограммы. Подготовим вторую гистограмму, имитирующую посещаемость нашего вымышленного сайта в нерабочее время:		Очень часто значения посещаемости на выходных отличаются от показателей в будние дни, когда люди находятся на работе: здесь нам пригодятся сгруппированные гистограммы. Подготовим вторую гистограмму, имитирующую посещаемость нашего вымышленного сайта в нерабочее время:
		+
		+	{{Врезка \| Содержание= [[Изображение: LXF115_79_2.jpg\| 300px\| Рис. 5]] Рис. 5. Гистограммы можно выводить вместе – это позволяет быстрее находить в них различия.\| Ширина=300px}}

	$visits2 = array(183, 225, 454, 2123, 2456, 1345);		$visits2 = array(183, 225, 454, 2123, 2456, 1345);
Строка 272:		Строка 282:

	===Антиспаммер===		===Антиспаммер===
		+
		+	{{Врезка \| Содержание= [[Изображение: LXF115_79_3.jpg\| 300px\| Рис. 6]] Рис. 6. Антиспаммер\| Ширина=300px}}

	В мире развелось слишком много спамеров, флудеров и просто «хороших людей», к тому же многие из них – это программы. Одним из способов защиты от таких «гостей» является ввод пользователем секретного кода с картинки, отображаемой на сайте (так называемой «captcha»). Программе тяжело распознавать нестандартные кривые символы, а человеку это под силу, и, как вы уже догадались, в ''JpGraph'' есть возможность создавать их. Чтобы объяснить, как это работает, достаточно пяти строк:		В мире развелось слишком много спамеров, флудеров и просто «хороших людей», к тому же многие из них – это программы. Одним из способов защиты от таких «гостей» является ввод пользователем секретного кода с картинки, отображаемой на сайте (так называемой «captcha»). Программе тяжело распознавать нестандартные кривые символы, а человеку это под силу, и, как вы уже догадались, в ''JpGraph'' есть возможность создавать их. Чтобы объяснить, как это работает, достаточно пяти строк:

Crazy Rebel: /* Дополнительные возможности */

2010-01-22T12:35:38Z

Дополнительные возможности

← Предыдущая		Версия 12:35, 22 января 2010
Строка 304:		Строка 304:
	*: Первый параметр сообщает, что мы будем использовать изображение, второй задает его местоположение, а третий отвечает за масштаб. Можно использовать и одно из встроенных изображений, например:		*: Первый параметр сообщает, что мы будем использовать изображение, второй задает его местоположение, а третий отвечает за масштаб. Можно использовать и одно из встроенных изображений, например:
	$lineplot2->mark->SetTYPE(MARK_IMG_BALL,’red’,1.0);		$lineplot2->mark->SetTYPE(MARK_IMG_BALL,’red’,1.0);
		+
		+	===Технический аспект===
		+
		+	Обратите внимание, что все наши скрипты генерируют не html-файл, а картинку, то есть в заголовке передаваемого сервером ответа будет значиться “Content-Type: image/png”, и если вы попытаетесь вывести в вашей программе какой-либо текст, то получите ошибку. А как же тогда вставлять изображение на сайт? Очень просто: добавьте в html-документ тэг '''<img>''', в атрибуте '''src''' которого укажите URL вашего скрипта, а уж он сгенерирует файл «на лету» и передаст его в html-документ, не сохраняя на жестком диске. Впрочем, если график обновляется достаточно редко, его кэширование может иметь смысл. Откройте файл '''jpg-config.inc.php''' и раскомментируйте строку:
		+
		+	DEFINE("CACHE_DIR","/путь/до/каталога/где/будет/кэш/");
		+
		+	а затем активируйте систему кэширования:
		+
		+	DEFINE("USE_CACHE",true);
		+
		+	Создавая объект изображения, мы передаем ему ширину и высоту. Еще два параметра управляют процессом кэширования:
		+
		+	$graph = new Graph(650, 450,"auto",60);
		+
		+	Значение '''"auto"''' указывает на имя файла кэша; в нашем случае оно будет совпадать с именем скрипта. Число 60 задает время жизни, измеряемое в минутах.

Crazy Rebel: Новая: : '''JpGraph''' Добавьте графики в свои ''PHP''-сценарии! {{Цикл/JpGraph}} ==Графики и диаграммы== : '''ЧАСТЬ 1''' Большие...

2010-01-22T12:33:19Z

Новая: : '''JpGraph''' Добавьте графики в свои ''PHP''-сценарии! {{Цикл/JpGraph}} ==Графики и диаграммы== : '''ЧАСТЬ 1''' Большие...

Новая статья

: '''JpGraph''' Добавьте графики в свои ''PHP''-сценарии!

{{Цикл/JpGraph}}

==Графики и диаграммы==

: '''ЧАСТЬ 1''' Большие начальники любят яркие графики – но даже если вы работаете на себя (или еще учитесь), от них тоже бывает польза. Какая? Спросите у '''Никиты Шультайса.'''

Каждый день мы имеем дело с «тоннами» визуальной информации: часть ее представлена простым текстом, часть – в виде таблиц, а часть – в виде графиков и диаграмм. И так уж вышло, что оптимальными для восприятия являются именно «картинки» – грамотно построенная диаграмма
может сэкономить массу времени и нервов как для понимания информации, так и для ее объяснения. Поэтому сегодня мы будем
говорить о графическом представлении данных с помощью ''PHP''-библиотеки ''JpGraph'' (http://www.aditus.nu/jpgraph/), работающей
поверх стандартной GD. ''JpGraph'' – мощный инструмент, позволяющий создавать:
* гистограммы
* круговые диаграммы
* линейные графики
* биржевые диаграммы
* сетчатые диаграммы
* диаграммы Ганта
* антиспам-изображения (Capthca)

''JpGraph'' – свободное ПО, распространяющееся по дуальной лицензии: довольно редкой сейчас Q Public License (QPL) 1.0 для применения в открытых проектах и обучения, а также традиционной коммерческой. Но, в отличие от инструментария ''Qt'', «породившего» QPL, свободная и коммерческая версии различаются по функционалу. Последняя носит название ''JpGraph Professional'' и, в дополнение к перечисленному выше, умеет отрисовывать «розы ветров», а также линейные и квадратные штрих-коды, широко применяемые в торговле.

===Первый график===

Первое, что нам потребуется – это скачать библиотеку или взять ее с '''LXFDVD'''. Обратите внимание, что в настоящее время доступны две ветки: ''JpGraph 1.x'' для ''PHP4'' и ''JpGraph 2.x'' для ''PHP 5.1'' и выше; мы воспользуемся последней. Как и с большинством ''PHP''-библиотек, для установки достаточно поместить ''JpGraph'' в корень вашего сайта, а затем подключить его из любого скрипта. Однако
это простое действие выполняется в два этапа:

'''1''' Подключение ядра:
include ( "./jpgraph/src/jpgraph.php");

'''2''' Подключение дополнительных возможностей (например, если нам нужен график-линия, то потребуется скрипт ''jpgraph_line.php''):

include ("./jpgraph/src/jpgraph_line.php");

Перейдем от слов к делу и создадим наш первый график. Для примера возьмем среднее число посетителей интернет-сайта в день и проследим динамику в течение года. Создадим файл '''visits.php''' и добавим в него следующий код (номера строк, разумеется, добавлены только для удобства восприятия):

<source lang=php>
1 <?
2 include ( "./jpgraph/src/jpgraph.php");
3 include ("./jpgraph/src/jpgraph_line.php");
4
5 $ydata = array(124, 235, 478, 432, 511, 512 , 533, 780, 789, 806, 933, 987);
6 $graph = new Graph(650, 450);
7 $graph->SetScale("textlin");
8 $lineplot = new LinePlot($ydata);
9 $lineplot->SetColor("blue");
10 $graph->Add($lineplot);
11 $graph->Stroke();
12 ?>
</source>

Как правило, диаграммы и графики строятся по набору данных, представлением которого в языках программирования является массив: его мы и объявляем в строке '''5'''. Конечно, пример наигран, и для изменения графика требуется правка исходных текстов – в реальной ситуации информация может поступать из базы данных или считываться из файла. В строке '''6''' мы создаем объект класса '''Graph''', передавая ему 2 параметра – ширину и высоту изображения. Следующая строка отвечает за масштабирование. В строке '''8''' мы создаем график-линию, передавая в конструктор класса данные нашего массива, а в строке '''9''' указываем его цвет. Наконец, в строке '''10''' мы добавляем наш график к изображению, а в строке '''11''' непосредственно генерируем (отрисовываем) его.

Ну вот, наш первый график готов (рис. 1), но для неподготовленного человека он пока ничего не значит и не несет никакой полезной информации. Давайте снабдим его подписями и разъяснениями – добавим после строки '''7''' следующий код:

$graph->title->Set(‘Посещаемость сайта в 2008 году’);

В результате у графика появится заголовок.

===А теперь по-русски===

После обновления страницы вместо читаемого текста мы увидим «любимые крякозябры». Пока что наша библиотека не настроена на работу с кириллицей, но это поправимо: определим в файле '''jpg-config.inc.php''' константу '''TTF_DIR''', содержащую путь до каталога с TTF-шрифтами:

DEFINE("TTF_DIR","/путь/до/TTF/шрифтов/");

Там же настроим кодировки, сообщив системе, что в наших скриптах мы собираемся использовать UTF-8:

DEFINE("LANGUAGE_CYRILLIC",true);
DEFINE("CYRILLIC_FROM_WINDOWS",false);
DEFINE(‘LANGUAGE_CHARSET’, ‘utf-8’);

И самое последнее – нужно указать нашему объекту '''graph''', какой шрифт следует применять для какого названия. Нас интересует заголовок графика ('''title'''), поэтому можно добавить нечто вроде

$graph->title->SetFont(FF_VERDANA,FS_NORMAL);

Здесь я использую шрифт '''verdana.ttf'''.

Продолжим наши усовершенствования – добавим на график дополнительную информацию:

<source lang=php>
1 $graph->img->SetMargin(80,30,30,60);
2 $graph->xaxis->title->margin = 15;
3 $graph->xaxis->title->Set("Месяцы");
4 $graph->xaxis->title->SetFont(FF_VERDANA,FS_NORMAL);
5 $graph->yaxis->title->margin = 25;
6 $graph->yaxis->title->Set("Посещаемость");
7 $graph->yaxis->title->SetFont(FF_VERDANA,FS_NORMAL);
</source>

В строке '''1''' мы указываем внутренние отступы для нашего изображения, а затем задаем дополнительные параметры координатных осей: так, в строках '''2''' и '''5''' определяется расстояние между подписью к оси и самой осью, в строках '''3''' и '''6''' – текст подписей, а в '''4''' и '''7''' – шрифты. Заметьте, что нам нужно задавать шрифты для каждого из объектов нашего графика, иначе мы будем наблюдать все
те же «крякозябры».

То, что мы сейчас сделали, относится к изображению в целом и к осям; давайте обогатим информацией и нашу ломаную:

<source lang=php>
1 $lineplot->mark->SetType(MARK_SQUARE);
2 $lineplot->value->Show();
3 $lineplot->value->SetColor("blue");
4 $lineplot->value->SetFont(FF_VERDANA, FS_NORMAL);
5 $lineplot->value->SetFormat("%d");
</source>

В первой строке мы определяем маркер, обозначающий точку на графике (квадрат), в строках '''3''' и '''4''' задаются цвет и шрифт подписи к каждой точке, а в строке '''5''' – формат вывода значения (число).

===Дайте два!===

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

<source lang=php>
1 $hits = array(604, 1205, 2078, 2032, 2510, 2502 , 2503, 3580, 3709, 4006, 4533, 4670);
2 $lineplot2 = new LinePlot($hits);
3 $lineplot2->SetColor("red");
4 $lineplot2->SetWeight(2);
5 $graph->Add($lineplot2);
</source>

Как и в предыдущем случае, мы создаем объект графика-линии ('''LinePlot'''). Новым параметром здесь является толщина линии, которую мы установили равной двум в строке '''4'''. График нужно не забыть добавить к изображению – это происходит в строке '''5'''.

Глядя на график, сложно понять, что означает каждая из линий, поэтому добавим легенду:

<source lang=php>
1 $lineplot->SetLegend("Хост");
2 $lineplot2->SetLegend("Хит");
3 $graph->legend->SetFont(FF_VERDANA,FS_NORMAL);
4 $graph->img->SetMargin(80,130,30,80);
</source>

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

<source lang=php>
1 $months = array("январь","февраль","март","апрель","май", "июнь","июль","август","сентябрь","октябрь","ноябрь","декабрь");
2 $graph->xaxis->SetFont(FF_VERDANA,FS_NORMAL);
3 $graph->xaxis->SetTickLabels($months);
4 $graph->xaxis->SetLabelAngle(90);
</source>

В строке 4 мы определяем угол, на который будут повернуты подписи. Теперь можно удалить строку

$graph->xaxis->title->Set("Месяцы");

так как названия месяцев говорят сами за себя. И, наконец, завершим наши старания добавлением координатной сетки и ее раскрашиванием:

$graph->ygrid->Show(true);
$graph->xgrid->Show(true);
$graph->ygrid->SetFill(true,’#EFEFEF@0.5’,’#BBCCFF@0.5’);

Окончательный результат можно видеть на рис. 2.

===В помощь математикам===

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

<source lang=php>
1 <?
2 include ( "./jpgraph/src/jpgraph.php");
3 include ("./jpgraph/src/jpgraph_line.php");
4 include ("./jpgraph/src/jpgraph_utils.inc.php");
5 $f = new FuncGenerator(‘cos($x)+1.5*cos(2*$x)’);
6 list($datax,$datay) = $f->E(0,10);
7 $tickPositions = array();
8 $tickLabels = array();
9 $tickPositions[0] = 0;
10 $tickLabels[0] = ‘0’;
11 for($i=1; $i/2*M_PI < 11 ; ++$i ) {
12 $tickPositions[$i] = $i/2*M_PI;
13 if( $i % 2 ) $tickLabels[$i] = $i.’/2’.SymChar::Get(‘pi’);
14 else $tickLabels[$i] = ($i/2).SymChar::Get(‘pi’);
15 }
16 $n = count($datax);
17 $xmin = $datax[0];
18 $xmax = $datax[$n-1];
19 $graph = new Graph(650, 450);
20 $graph->SetScale(‘linlin’,0,0,$xmin,$xmax);
21 $graph->title->Set(‘cos(x)+1.5*cos(2*x)’);
22 $graph->title->SetFont(FF_VERDANA,FS_NORMAL,12);
23 $graph->xaxis->SetPos(‘min’);
24 $graph->xaxis->SetMajTickPositions($tickPositions,$tickLabels);
25 $graph->xaxis->SetFont(FF_VERDANA,FS_NORMAL,10);
26 $graph->yaxis->SetFont(FF_VERDANA,FS_NORMAL,10);
27 $graph->xgrid->Show();
28 $p1 = new LinePlot($datay,$datax);
29 $p1->SetColor(‘teal’);
30 $graph->Add($p1);
31 $graph->Stroke();
32 ?>
</source>

Разберемся, что происходит в этих строках. В первую очередь, мы подключаем библиотеку '''jpgraph_utils.inc.php''', которая содержит вспомогательные утилиты, в том числе и класс генерации данных для функций (нормальных и параметрических), и уже в '''5'''-й строке создаем объект этого класса. Обратите внимание, что самая функция представлена строкой, содержащей ''PHP''-конструкцию с переменной '''$x''': это необходимо для безопасности вашего приложения. В строке '''6''' мы вычисляем значения функции в виде пар ('''x,y=f(x)''') на некотором множестве точек в диапазоне от 0 до 10.

Со строки '''7''' по '''15''' мы создаем разметку. Особое внимание тут стоит уделить конструкции '''SymChar::Get(‘pi’)''' – вызов статической функции '''Get''' класса '''SymChar''', которая возвращает символы греческого алфавита, в нашем случае это «пи». В строке '''24''' вызывается метод '''SetMajTickPositions()''', который расставляет наши метки (разметку) в соответствии с вычисленными позициями.

Вернувшись чуть-чуть назад, обратим внимание на строку '''20''', где в качестве первого параметра метода '''SetScale()''' используется не '''‘textlin’''', а '''‘linlin’'''. Вообще, первый параметр отвечает сразу за две величины, а именно, за масштабируемость по осям '''x''' и '''y'''. Соответственно, в случае с '''textlin''' по '''x''' было текстовое масштабирование, а по '''y''' – линейное. В случае '''linlin''' они оба линейны, что лучше подходит для математических графиков. Помимо изменения первого параметра добавилось еще четыре, отвечающих за минимальные и максимальные значения по '''x''' и по '''y'''.

В строках '''22, 25''' и '''26''' мы задаем шрифты. Единственным заметным новшеством здесь является явное указание размера: '''12, 10''' и '''10'''. Все остальные параметры и функции мы рассмотрели в примерах выше, так что теперь самое время смотреть результаты (рис. 3).

===Гистограммы===

Графики готовы – они наглядны и несут необходимую информацию, но останавливаться на достигнутом мы не будем. Дадим себе и посетителям больше информации о сайте, создав гистограмму посещений в зависимости от времени суток.

Модуль построения гистограмм находится в файле '''jpgraph_bar.php'''; добавим в наш скрипт эту библиотеку:

include ("./jpgraph/src/jpgraph_bar.php");

Работа с гистограммами во многом похожа на работу с графиками: здесь также нужен массив исходных данных, названия и шрифты, но есть и некоторые тонкости. Создадим новое изображение с гистограммой:

<source lang=php>
1 include ( "./jpgraph/src/jpgraph.php");
2 include ("./jpgraph/src/jpgraph_bar.php");
3 $visits = array(120, 343, 681, 2354, 1890, 511);
4 $graph = new Graph(650, 450);
5 $graph->SetScale("textlin");
6 $graph->title->SetFont(FF_VERDANA,FS_NORMAL);
7 $graph->title->Set(‘Посещаемость сайта в течение суток’);
8 $bplot = new BarPlot($visits);
9 $graph->Add($bplot);
10 $graph->Stroke();
</source>

Основное отличие этого кода от виденного нами ранее кроется в строке '''8''': мы используем класс '''BarPlot''' вместо '''LinePlot'''. Из полученной гистограммы мы вряд ли извлечем какие-либо полезные данные, ведь нет ни подписей, ни легенды. По традиции, усовершенствуем ее, и начнем с установки ширины столбцов:

$bplot->SetWidth(0.9);

Максимально возможное значение – 1.0, мы берем чуть меньше (0.9). Теперь добавим в центры столбцов значения посещаемости:

$bplot->value->Show();
$bplot->value->SetFormat(‘%d’);
$bplot->value->SetFont(FF_VERDANA,FS_NORMAL);
$bplot->SetValuePos(‘center’);

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

$graph->yaxis->scale->SetGrace(4);

Теперь украсим диаграмму финальными штрихами (рис. 4):

$bplot->SetShadow();
$times = array("0-4","4-8","8-12","12-16","16-20","20-24");
$graph->xaxis->SetFont(FF_VERDANA,FS_NORMAL);
$graph->xaxis->SetTickLabels($times);
$graph->xaxis->title->SetFont(FF_VERDANA,FS_NORMAL);
$graph->xaxis->title->Set("Время");

Первая строка придает столбцам объем, а с остальными мы уже знакомы.

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

$visits2 = array(183, 225, 454, 2123, 2456, 1345);
$bplot2 = new BarPlot($visits2);
$bplot2->value->Show();
$bplot2->value->SetFormat(‘%d’);
$bplot2->value->SetFont(FF_VERDANA,FS_NORMAL);
$bplot2->SetValuePos(‘center’);
$bplot2->SetFillColor("orange");

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

$gbplot = new GroupBarPlot(array($bplot,$bplot2));
$graph->Add($gbplot);

Не забудьте закомментировать строку

$graph->Add($bplot);

которая добавляла «отдельно стоящую» гистограмму. Наконец, изменим угол наклона надписей и добавим легенду:

$bplot->value->SetAngle(90);
$bplot2->value->SetAngle(90);
$bplot->SetLegend("Будние дни");
$bplot2->SetLegend("Выходные");
$graph->legend->SetFont(FF_VERDANA,FS_NORMAL);
$graph->img->SetMargin(80,130,30,80);

===Антиспаммер===

В мире развелось слишком много спамеров, флудеров и просто «хороших людей», к тому же многие из них – это программы. Одним из способов защиты от таких «гостей» является ввод пользователем секретного кода с картинки, отображаемой на сайте (так называемой «captcha»). Программе тяжело распознавать нестандартные кривые символы, а человеку это под силу, и, как вы уже догадались, в ''JpGraph'' есть возможность создавать их. Чтобы объяснить, как это работает, достаточно пяти строк:

<source lang=php>
1 require_once "./jpgraph/src/jpgraph_antispam.php";
2 $spam = new AntiSpam();
3 $chars = $spam->Rand(5);
4 $spam->Set($chars);
5 $spam->Stroke();
</source>

В первой строке мы по обыкновению подключаем дополнительный модуль. Обратите внимание, что ядро библиотеки здесь не требуется. Затем создаем объект '''AntiSpam''', а в строке '''3''' генерируем пять символов. Далее вставляем их в изображение и выводим. Все максимально просто и эффективно. '''LXF'''

===Дополнительные возможности===

Если вам по-прежнему кажется, что вашим графикам чего-то недостает, обратите внимание на следующие функции:

* '''Ступенчатое отображение'''
*: В данном режиме точки соединяются двумя отрезками (горизонтальным и вертикальным), в результате чего график получается ступенчатым. Чтобы активировать его, нужно вызвать метод '''SetStepStyle():'''
$lineplot->SetStepStyle();

* '''Заливка'''
*: Для заливки области, расположенной под графиком, предназначен метод '''SetFillColor()'''.
$lineplot2->SetFillColor(‘red’);

*: При этом важно следить за порядком: если некий график находится выше других, но построен последним, его заливка автоматически перекроет все другие графики. Двигайтесь сверху вниз.

* '''Свои изображения'''
*: На первом графике мы отмечали точки с помощью квадратиков, но если вы считаете, что этого недостаточно, то с помощью метода SetTYPE() можно установить собственный маркер:
$lineplot2->mark->SetTYPE(MARK_IMG, "image.jpg", 1.5);
*: Первый параметр сообщает, что мы будем использовать изображение, второй задает его местоположение, а третий отвечает за масштаб. Можно использовать и одно из встроенных изображений, например:
$lineplot2->mark->SetTYPE(MARK_IMG_BALL,’red’,1.0);