Создание графиков с помощью JpGraph

Математическое моделирование, как один из методов экономической теории, предполагает построение графиков (диаграмм), которые в упрощенном виде характеризуют отдельные экономические явления или процессы. Графики играют очень большую роль в понимании закономерностей происходящих процессов и явлений. Благодаря своей простоте и наглядности математическое моделирование получило широкое распространение во многих сферах деятельности. Даже в программировании есть моделирование (я имею в виду UML). Сегодня я хочу рассмотреть построение графиков с помощью одной из самых популярных объектно-ориентированных библиотек JpGraph.

Библиотека
Скачать библиотеку можно на страничке Downloads на сайте разработчиков. Существуют две версии этой библиотеки:

• 3.0.7 – бесплатная версия, которая распространяется под лицензией QPL 1.0;
• Pro-version – платная профессиональная версия, которая за некоторую плату предоставляет более полный функционал, а также поддержку.

Архив с бесплатной версией имеет размер 10 Мб, а распакованная библиотека имеет размер в 21 Мб. Правда, сама библиотека (папка src) размером всего 4 Мб, все остальное – документация на английском.

Установка и настройка
Для начальной установки нужно распаковать архив с библиотекой и вытащить на свет божий папку src, в которой находится сама библиотека.

Требований у библиотеки, судя по всему, не много:

• PHP версии >= 5.1.x;
• расширение GD версии 2.0.34.

Для корректной работы кириллических шрифтов нужны некоторые настройки и пляски с бубном.

Во-первых, нужны TTF-шрифты и нужно знать, где они находятся у вас на сервере. Если у вас виндовс, то обычно – это директория C:\WINDOWS\Fonts. Если – линукс, то зачастую – это директория /usr/X11R6/lib/X11/fonts/TrueType/. Если шрифтов вообще нет, то их можно поискать в сети.

Во-вторых, расставляем значение констант. Константы со шрифтами находятся в файле src/jpgraph_ttf.inc.php

• TTF_DIR – папка с TTF-шрифтами. Если этой константы нет (обычно ее нет), то объявляем ее так define(‘TTF_DIR’, ‘C:/WINDOWS/Fonts/’);
• LANGUAGE_CYRILLIC – устанавливаем в true, если собираемся писать кириллическими шрифтами;
• CYRILLIC_FROM_WINDOWS – устанавливаем в true, если будем писать в кодировке windows-1251;
• LANGUAGE_CHARSET – имя кодировки, в которой будем писать.

В-третьих, при написании текста, не забываем устанавливать TTF-шрифт (об этом чуть ниже).

Линейный график
Для примера создания графиков возьмем данные с российской фондовой биржи по дням за месяц.

26.03 1519.87 1768.17
25.03 1515.04 1759.00
24.03 1514.58 1751.44
23.03 1524.96 1758.25
22.03 1525.59 1747.47
19.03 1544.71 1751.63
18.03 1558.80 1749.85
17.03 1563.46 1741.91
16.03 1536.79 1723.57
15.03 1514.40 1711.69
12.03 1534.68 1704.55
11.03 1504.04 1679.94
10.03 1501.40 1660.44
09.03 1502.70 1645.67
05.03 1508.21 1649.88
04.03 1470.41 1611.98
03.03 1460.20 1593.97
02.03 1445.62 1576.33
01.03 1429.77 1569.23
27.02 1410.85 1572.03
26.02 1390.25 1534.67

Сохранив эти данные в файле с именем rts.txt, напишем небольшую функцию, которая вытащит данные из файла.

Как видим, структура данных в файле незамысловатая: первый столбец – это дата, второй – индексы РТС, третий – индексы РТС2. Все индексы взяты на закрытие торгов.

Функция, которая возвратит массив с данными, будет выглядеть так

function getdata($file)
{
    if (file_exists($file)) {
 
        $lines = file($file);
        $data = array('date' => array(), 'rts' => array(), 
'rts2' => array());
        foreach ($lines as $line) {
            $tmp = explode(' ', trim($line));
            $data['date'][] = $tmp[0];
            $data['rts'][] = $tmp[1];
            $data['rts2'][] = $tmp[2];
        }
 
        return $data;
    } else {
        return false;
    }
}

Эту функцию нужно положить в каждый скрипт, чтобы все данные были получены корректно.
Теперь напишем код, который построит графики.

jpgraph_line.php

<?php
//подключаем файлы
require_once 'src/jpgraph.php';
require_once 'src/jpgraph_line.php';
 
//получаем данные
$data = getdata(dirname(__file__) . 
DIRECTORY_SEPARATOR . 'rts.txt');
//если что, бросаем исключение
if(false == $data){
    throw new JpGraphException('Cannot find data');
}
//делаем реверс для данных, чтобы шли 
//в правильном порядке
$data['date'] = array_reverse($data['date']);
$data['rts'] = array_reverse($data['rts']);
$data['rts2'] = array_reverse($data['rts2']);
 
//создаем график шириной 700
//и высотой 300 пикселов
$graph = new Graph(700, 300);
 
//устанавливаем типы данных 
//по осям абсцисс и ординат 
$graph->SetScale('textlin');
 
//установим заголовок
$graph->title->Set('Индексы РТС');
$graph->title->SetFont(FF_VERDANA, FS_BOLD, 12);
 
//надпись в подвале
$graph->xaxis->title->Set('(c) '.date('Y').' web-junior.net');
$graph->xaxis->title->SetFont(FF_VERDANA);
 
//данные по оси абсцисс
$graph->xaxis->SetTickLabels($data['date']);
$graph->xaxis->SetFont(FF_ARIAL, FS_NORMAL, 7);
 
//линейный график с данными РТС
$rts = new LinePlot($data['rts']);
$rts->SetColor('blue');
 
//линейный график с данными РТС 2
$rts2 = new LinePlot($data['rts2']);
$rts2->SetColor('orange');
 
//ложим на график
$graph->add($rts);
$graph->add($rts2);
 
//выводим
$graph->Stroke();
 
 
function getdata($file)
{
    if (file_exists($file)) {
 
        $lines = file($file);
        $data = array('date' => array(), 'rts' => array(), 
'rts2' => array());
        foreach ($lines as $line) {
            $tmp = explode(' ', trim($line));
            $data['date'][] = $tmp[0];
            $data['rts'][] = $tmp[1];
            $data['rts2'][] = $tmp[2];
        }
 
        return $data;
    } else {
        return false;
    }
}
 
 
 
?>

Если все правильно сделали, то получаем такой график

Фондовая биржа процветает

Теперь разъяснения. Весь график содержится в классе Graph, который находится в файле src/jpgraph.php.

Конструктор

Graph Graph:: __construct(int $aWidth=300,int $aHeight=200,
string $aCachedName='', int $aTimeout=0,
boolean $aInline=true)

содержит 5 аргументов и все они не обязательные.

• int $aWidth – ширина графика в пикселах, по умолчанию 300;
• int $aHeight – высота графика в пикселах, по умолчанию 200;
• sting $aCachedName – имя файла, в котором будет хранится кэш (только если включен кэш, по умолчанию кэш отключен);
• int $aTimeout – таймаут (время жизни) кэша в секундах, по умолчанию 0;
• boolean $aInline – в документации сказано, что если этот параметр установлен в true, то рисунок будет отправляться в браузер, если нет, то будет создан только в памяти/кэше, по умолчанию true.

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

void Graph::SetScale (string $aAxisType, int $aYMin=1,
int $aYMax=1, int $aXMin=1, int $aXMax=1)

Все кроме первого аргумента необязательные:

• string $aAxisType – система счисления для обоих осей. Указывается текстом так: textint. Т.е. системы для обеих осей указываются одним словом, которое состоит из двух составляющих: система счисления для оси абсцисс и ординат. Например, текст textint обозначает, что для оси абсцисс устанавливается система text (текстовый), а для оси ординат устанавливается int (целочисленное). Доступны следующие системы для осей:
  • text – текстовая система (доступна только для оси абсцисс);
  • int – целочисленная система (доступна для обеих осей);
  • lin – линейная система (доступна для обеих осей);
  • log – логарифмическая система (доступна для обеих осей).
• int $aYMin – минимальное значение для оси ординат. По умолчанию установлено в 1;
• int $aYMax – максимальное значение для оси ординат. По умолчанию установлено в 1;
• int $aXMin – минимальное значение для оси абсцисс. По умолчанию установлено в 1;
• int $aXMax – максимальное значение для оси абсцисс. По умолчанию установлено в 1.

После установки текста в заголовке через $graph->title->Set() и установки текста в подвале через $graph->xaxis->title->set() устанавливаем шрифты. Важно! Для того чтобы кириллический текст отображался корректно, необходимо установить TTF-шрифт. Это делается через метод SetFont.

void Text::SetFont(int $aFamily, int $aStyle=FS_NORMAL,
int $aSize=10)

Аргументы:

• $aFamily – целое число, которое обозначает шрифт. В файле jpgraph_ttf.inc.php объявлены следующие константы для TTF-шрифтов:
  • FF_COURIER – для шрифта Courier New;
  • FF_VERDANA – для Verdana;
  • FF_TIMES – для Times New Roman;
  • FF_COMIC – для Sans Comic;
  • FF_ARIAL – для Arial;
  • FF_GEORGIA – для Georgia;
  • FF_TREBUCHE – для Trebuchet.

Судя по всему остальные шрифты через константы не доступны.

• $aStyle – целое число, которое обозначает стиль начертания шрифта. Доступны следующие стили начертания:
  • FS_NORMAL – обычное начертание;
  • FS_BOLD – жирное начертание;
  • FS_ITALIC – курсив;
  • FS_BOLDITALIC – жирный курсив.
• $aSize – целое число, которое обозначает размер ширфта.

Теперь создаём линейный график. Для этих целей предназначен класс LinePlot.

LinePlot LinePlot::__construct(array $datay,
array $datax=false)

Аргументы:

• array $datay – массив с данными по оси ординат;
• array $datax – массив с данными по оси абсцисс. По умолчанию равен false.

Установим для линии цвет с помощью метода SetColor.

void LinePlot:: SetColor(mixed $aColor)

Аргумент единственный и обязательный:

• mixed $aColor – цвет линии. Цвет может быть записан различными способами:
  • текстом, например «blue», «orange» «white» и др.;
  • в RGB-формате, например array(255,255,255);
  • в HTML-формате, например «#333»

После этого, добавляем линейный график на рисунок, с помощью $graph->add() и выводим его в браузер с помощью метода Stroke.

void Graph:: Stroke(string $aStrokeFileName='')

Аргумент один

• string $aStrokeFileName – имя файла, в который будет записан созданный график. Если имя файла не передается, то график будет выведен в браузер.

Маркеры

Для удобства просмотра отдельных точек на графике устанавливаются маркеры. Для постановки маркеров на всех точках графиков напишем код.

<?php
...
//линейный график с данными РТС
$rts = new LinePlot($data['rts']);
$rts->SetColor('blue');
//устанавливаем тип маркера
$rts->mark->SetType(MARK_SQUARE);
//устанавливаем цвет маркера
$rts->mark->SetColor('red');
//устанавливаем заливку маркера
$rts->mark->SetFillColor('green');
 
//линейный график с данными РТС 2
$rts2 = new LinePlot($data['rts2']);
$rts2->SetColor('orange');
//тип маркера
$rts2->mark->SetType(MARK_DIAMOND);
//цвет маркера
$rts2->mark->SetColor('blue');
...
?>

В результате получим графики с маркерами

Теперь точки на графиках видно отлично

Для установки маркера нужно вызвать метод LinePlot::mark->SetType(). В метод SetType() нужно передать тип маркера. Доступны константы со следующими типами:

• MARK_SQUARE – квадратный маркер;
• MARK_UTRIANGLE – треугольный маркер с вершиной вверху;
• MARK_DTRIANGLE – треугольный маркер с вершиной внизу;
• MARK_DIAMOND – ромбовидный маркер;
• MARK_CIRCLE – незаполненный круг;
• MARK_FILLEDCIRCLE – заполненный круг;
• MARK_CROSS – крестовидный маркер;
• MARK_STAR – в виде снежинки (звезды);
• MARK_X – в виде буквы Х;

а также некоторые другие константы.

Метод LinePlot::mark->SetColor() устанавливает цвет маркера, а метод LinePlot::mark->SetFillColor() цвет заливки.

Легенда
На последок прикрепим еще легенду справа. Вот часть кода, которая сможет установить легенду.

<?php
…
//линейный график с данными РТС
$rts = new LinePlot($data['rts']);
$rts->SetColor('blue');
//устанавливаем тип маркера
$rts->mark->SetType(MARK_SQUARE);
//устанавливаем цвет маркера
$rts->mark->SetColor('red');
//устанавливаем заливку маркера
$rts->mark->SetFillColor('green');
//текст легенды
$rts->SetLegend('Индекс РТС');
 
//линейный график с данными РТС 2
$rts2 = new LinePlot($data['rts2']);
$rts2->SetColor('orange');
//тип маркера
$rts2->mark->SetType(MARK_DIAMOND);
//цвет маркера
$rts2->mark->SetColor('blue');
//текст легенды
$rts2->SetLegend('Индекс РТС 2');
 
//устанавливаем отступ рисунка
$graph->img->SetMargin(40, 140, 20, 40);
//устанавливаем позицию
$graph->legend->Pos(0.01, 0.4, 'right', 'center');
//и шрифт
$graph->legend->SetFont(FF_ARIAL, FS_NORMAL, 9);
…
?>

В результате, имеем график

С легендой стало понятно, где какой график

Легенда устанавливается с помощью метода LinePlot::SetLegend(), в который передается текст легенды. После чего нужно задать размещение легенды на рисунке. Это делается с помощью вызова метода $graph->legend->Pos()

void Legend:: Pos(float $aX, float $aY,
string $aHAlign='right', string $aVAlign='top')

Аргументы:

• float $aX – координата X в виде дроби;
• float $aY – координата Y в виде дроби;
• string $aHAlign – выравнивание легенды по горизонтали. Может быть «left», «right» или «center». По умолчанию «right»;
• string $aVAling – выравнивание легенды по вертикали. Может быть «bottom», «top» или «center». По умолчанию «top».

Библиотека JpGraph имеет очень большие возможности для создания разнообразных графиков. Возможно создание даже таких экзотических диаграмм, как диаграммы Ганта и радиолокационных графиков.

Но, к сожалению, самым большим недостатком этой библиотеки является то, что вся эта функциональность является платной.

Читайте все статьи цикла

• Создание графиков с помощью JpGraph
• Создание графиков с помощью pChart
• Создание графиков с помощью pChart. Продолжение
• Создание графиков с помощью pChart. Кэширование

Популярность: 18%

Интересное из других блогов: