$b2 = new BarPlot($graphData[$key][rev]); $b2->SetFillColor($colors[$i]); $abrAdd[] = $b2; } $ab1 = new AccBarPlot($abqAdd); $ab2 = new AccBarPlot($abrAdd); $b1z = new BarPlot($graphData[zero]); $b2z = new BarPlot($graphData[zero]);
$gb1 = new GroupBarPlot(array($ab1, $b1z)); $gb2 = new GroupBarPlot(array($b2z, $ab2));
$graph->Add($gb1); ?>
Рис. 4. Использование "слоеной" столбцовой диаграммы.
Мы почти у цели. Необходимо лишь немного отформатировать область, в которой отрисовываются графики, надписи возле координатных осей, а также название региона, для которого строится график. Кроме того, мы должны убедиться в том, что график используется только для внутренних целей фирмы. Один из способов указать на то, что объект является частной собственностью - добавить фоновое изображение. В данном случае, мы используем строку "ABC Co. Proprietary" ("Собственность компании ABC" - Прим. перев.), написанную по диагонали и многократно повторенную.
Заметьте, что цвет надписи значительно темнее, чем тот, который вы хотели бы видеть на "водяных знаках". Для достижения требуемого эффекта можно использовать метод Graph::AdjBackgroundImage(), позволяющий отрегулировать яркость, контрастность и насыщенность изображения перед использованием его в графике.
Это избавит вас от усилий по редактированию изображения во внешнем графическом редакторе. Посмотрите файл img/abc-background.png в директории с исходными кодами данной статьи в качестве примера того, как может выглядеть фоновый рисунок. Вы можете использовать этот рисунок в качестве фонового изображения, используя код из листинга 10.
Примечание: Библиотека GD2, встроенная в PHP 4.3.0, конфликтует с методом Graph::AdjBackgroundImage(). Если вы используете эту версию PHP, вам придется отказаться от использования этого метода и обрабатывать изображение в графическом редакторе.
Листинг 10: Код для использования и настройки фонового изображения (abc_reg_sales_graph.php)
if (USING_TRUECOLOR) { $graph->SetBackgroundImage(img/abc-background_prefade.png, BGIMG_FILLFRAME); } else { //AdjBackgroundImage only works with GD, not GD2 true color $graph->SetBackgroundImage(img/abc-background.png, BGIMG_FILLFRAME); $graph->AdjBackgroundImage(0.9, 0.3); }
Вы можете использовать код, приведенный в листинге 11, чтобы добавить заключительные штрихи, такие как название графика и координатных осей, и настроить координаты надписей. Результат работы кода показан на рис. 5.
Листинг 11: Код для завершения построения графика на рис. 5 (abc_reg_sales_graph.php)
$graph->title->Set(date(Y). Sales for{$regions[$region_id]} Region); $graph->title->SetFont(FF_ARIAL, FS_BOLD, 12); $graph->SetMarginColor(white); $graph->yaxis->title->Set(Left Bar Units Sold); $graph->yaxis->title->SetFont(FF_ARIAL, FS_BOLD, 10); $graph->yaxis->SetLabelFormatCallback(y_fmt); $graph->yaxis->SetTitleMargin(48); $graph->y2axis->title->Set(Right Bar Revenue ( $ 000 )); $graph->y2axis->title->SetFont(FF_ARIAL, FS_BOLD, 10); $graph->y2axis->SetTitleMargin(45); $graph->y2axis->SetLabelFormatCallback(y_fmt_dol_thou); $graph->xaxis->SetTickLabels($graphData[labelX]);
$graph->legend->Pos(0.5, 0.95, center, center); $graph->legend->SetLayout(LEGEND_HOR); $graph->legend->SetFillColor(white); $graph->legend->SetShadow(false); $graph->legend->SetLineWeight(0);
$graph->AddY2($gb2);
Рис. 5. Законченный вид графика
Из соображений повышения производительности вы решили реализовать механизм кэширования изображений JpGraph для этого графика. Механизм кэширования основан на сохранении копии изображения как файла на сервере. Если копия, сохраненная к кэше, еще действительна, JpGraph вернет ее в ответ на запрос клиента вместо того, чтобы генерировать изображение "на лету". Заметьте, что вы должны иметь на сервере соответствующую привилегию для записи в директорию кэша. При создании экземпляра класса Graph вам необходимо передать конструктору, кроме ширины и высоты изображения, также имя файла кэшируемого изображения и таймаут в минутах (время, в течение которого действительно изображение, сохраненное в кэше) и, наконец, параметр, сообщающий JpGraph о том, что изображение все равно нужно выводить. Это значит, что вы будете продолжать использовать ссылку на PHP-скрипт как значение атрибута src тэга img. Код, необходимый для реализации механизма кэширования, приведен в листинге 12.
Теперь, если в течение 24 часов будет запрошен тот же график для того же региона, клиенту будет возвращена версия изображения, находящаяся в кэше, и выполнение скрипта прервется после строки new Graph().
Это означает, что для получения максимальной выгоды от кэширования вы должны создавать экземпляр класса Graph раньше, чем будут выполняться запросы к БД.
Сравнение объемов продаж через разные каналы по регионам
Второй график, который вас попросили сделать, показывает объемы продаж для каждого региона по каналам. Кроме того, нужно обеспечить простой способ навигации между первым и вторым графиками. Этот тип отчета предполагает просмотр информации о долях, поэтому наиболее эффективной будет круговая диаграмма. Просмотрите, пожалуйста, еще раз строки 22-82 файла abc_map_graph.php в директории с исходными кодами этой статьи, чтобы понять, как выполняются запросы к БД и формирование массивов для последующего построения графиков. В листинге 13 приведен код, необходимый для создания графика, показанного на рис. 6.
Листинг 13: Код для создания круговой диаграммы на рис. 6
$sliceColors = array(lightgreen, pink, lightblue); $graph = new PieGraph(WIDTH, HEIGHT); $graph->title->Set($regions[$region][region]. Region); $graph->subtitle->Set(Sales by Channel since .GRAPH_START); $p1 = new PiePlot($graphData[$pickRegion][rev]); $p1->SetLegends($graphData[$pickRegion][label]); $p1->SetSliceColors($sliceColors); $graph->Add($p1); $graph->Stroke();
Рис. 6. Простая круговая диаграмма
Вы можете использовать фоновое изображение так, как это показано на примере первого графика, а также разместить дополнительную информацию на вашем графике. Разместим на графике карту США, разделенную по регионам продаж компании ABC. Если вы используете эту карту как фоновое изображение для графика, вы можете расположить круговые диаграммы на фоне соответствующего региона. Посмотрите файл img/abc-regions.png как пример использования фонового изображения в этом графике.
Для использования этого примера вам необходимо добавить несколько строк в цикл формирования массива $graphData, чтобы сделать возможным динамическое расположение круговых диаграмм для каждого региона:
Теперь взгляните на код листинга 14, создающий график, изображенный на рис. 7.
Листинг 14: Код для создания графика на рис. 7 (abc_map_graph.php)
$graph = new PieGraph(WIDTH, HEIGHT); $graph->SetBackgroundImage(img/abc-regions.png, BGIMG_FILLFRAME); for ($i=0; $i<$rIndex+1; $i++) { $pickRegion = r.$i;
$p1 = new PiePlot($graphData[$pickRegion][rev]); $p1->SetCenter($graphData[$pickRegion][map_x], $graphData[$pickRegion][map_y]); $p1->SetSize(PIE_SIZE); $p1->SetLabels($graphData[$pickRegion][revFmt]); $p1->SetSliceColors($sliceColors); if (!$i) { $p1->SetLegends($graphData[label]); }
$graph->Add($p1); }
$graph->legend->Pos(0.9, 0.85, center, center); $graph->Stroke();
Рис. 7. Использование фонового изображения для показа регионов
В заключение заказчик хочет иметь возможность быстрой навигации между имеющимися круговыми диаграммами и соответствующими графиками продаж, построенными ранее. Вы можете реализовать эту возможность, используя карты-изображения на стороне клиента (Client Side Image Maps - CSIM - Прим. перев.). CSIM - HTML-технология, позволяющая определять области на изображении и связывать их с гиперссылками. Для реализации CSIM в этом графике вы должны определить гиперссылки и альтернативный текст для изображений (подсказки для пользователя). Для начала мы определим константу, используемую в большинстве ссылок:
Теперь в массиве $graphData нужно определить ссылки и альтернативный текст для изображений:
$graphData[r.$rIndex][targets][] = DRILL_GRAPH.$regionData[$i][region_id]; $graphData[r.$rIndex][alts][] = Click for more information regarding {$regions[$rIndex][region]} sales.;
Так как в дополнение к двоичным данным необходимо выводить HTML (CSIM), мы не можем вернуть данные клиенту уже привычным нам способом. CSIM и изображение тесно зависят друг от друга. Чтобы сделать это, нам необходимо прибегнуть к кэшированию изображения. Это позволит нам вывести карту-изображение вместе с тэгом img и воспользоваться кэшированным изображением. Вместо того, чтобы воспользоваться механизмом кэширования JpGraph, описанным выше, мы применим другую технику и сохраним изображение в директории, из которой клиент сможет запросить его напрямую. Для этого надо создать директорию с именем img в той же директории, где находится скрипт. Вы также должны иметь на сервере права на запись в эту директорию. При создании графика обрабатываем его так же, как если бы мы возвращали клиенту двоичный поток - изображение. В цикле формирования круговых диаграмм добавляем информацию о ссылках и альтернативном тексте (см. листинг 14 - Прим. перев.):
Далее выводим график, используя код из листинга 15.
Листинг 15: Код для формирования CSIM (abc_map_graph.php)
define(IMG_DIR, img/); $graphName = IMG_DIR.abc_channel_graph.png; $graph = new PieGraph(WIDTH, HEIGHT); //the rest of the graph code... $graph->Stroke($graphName); $mapName = ABC_Region_Drill; $imgMap = $graph->GetHTMLImageMap($mapName); print <<<EOS $imgMap <img src=$graphName alt=ABC Sales by Channel ismap usemap=#$mapName border=0> EOS;
Данный код указывает JpGraph вывести изображение в файл img/abc_channel_graph.png. Далее помещаем в переменную $imgMap сгенерированную карту-изображение. Тэг img определен таким образом, что позволяет использовать сгенерированную карту-изображение.
Ключевые понятия
В данном учебном примере были рассмотрены следующие ключевые понятия, касающиеся построения графиков средствами JpGraph:
* использование в JpGraph линейных графиков, столбцовых и круговых диаграмм; * использование "слоеных" и сгруппированных столбцовых диаграмм; * использование второй оси ординат с другим масштабом; * использование функции обратного вызова для форматирования меток на осях координат; * генерация сообщений об ошибках в графическом виде; * создание "водяных знаков" с использованием фоновых изображений; * использование механизмов кэширования изображений JpGraph для увеличения производительности, а также облегчения использования CSIM; * использование фонового изображения как части информационного контента диаграммы (расположение круговой диаграммы на фоне карты регионов продаж); * использование карт-изображений на стороне клиента для быстрой навигации между графиками
Заключение
JpGraph предоставляет простое API, позволяющее быстро создавать профессиональную графику. Соединение возможностей JpGraph и средств PHP для доступа к БД дает вам в руки мощный инструмент для создания динамических графиков в webе. В данной статье представлены некоторые из дополнительных возможностей JpGraph такие как: кэширование, фоновые изображения и карты-изображения на стороне клиента. Надеюсь, вы достаточно хорошо познакомились с данной технологией и сможете свободно использовать PHP и JpGraph в своих будущих data mining проектах.
