Pull to refresh

Creating Scalable Vector Graphs with PHP

Reading time 15 min
Views 10K
Original author: Vikram Vaswani
Как и большинство разработчиков PHP я знаком с расширением GD, которое позволяет достаточно просто создавать изображения в форматах JPEG, GIF и PNG. Расширение очень удобно, когда надо сделать сложные изображения из динамически получаемых данных в режиме он-лайн.
Обратной медалью GD является то, что изображения создаются в растровом формате. Изменение размеров изображения ухудшают его качество.

Если необходимо использовать изменение размеров изображения, то лучшим решением будет использование векторного формата, например такого как SVG, который легко позволяет изменять размеры изображения без каких-либо искажений и потери качества.
Сказать легче, чем сделать. Програмное создание графиков и диаграмм, используя SVG, требует серьезного понимания спецификации SVG и различных примитивов SVG, а также изрядного количества времени для исследований, экспериментов и отладки. Или, другими словами, это работа на все выходные.
К счастью, все не так плохо. Существует большое количество решений с открытым исходным кодом, который поддерживают создание графиков в формате SVG, использование которых может существенно уменьшить время, затрачиваемое на разработку Web-приложений. Кроме того формат SVG — это XML, который легко редактировать и который занимает меньше места, чем их растровые друзья. Далее мы рассмотрим две библиотеки, которые существенно облегчат вам жизнь.

Putting The Pieces Together

В данной статье обсуждаются две библиотеки для создания SVG-изображений:
  • ez Components популярная бибилиотека php-компонентов, включающая в себя большинство компонентов для повседневных задач. Один из этих компонентов ezcGraph, который представляет объектно-ориентированное API для создание графиков. Компонент поддерживает линии, столбики, круговые диаграммы, радар и одометр-диаграммы и может выводить результаты в обоих форматах, как в растровом, так и в векторном. Библиотека eZ Components распространяется под New BSD license и спонсируется eZ systems.
  • SVGGraph PHP-библиотека для создания SVG. Она поддерживает создание только линий, столбиков и круговых диаграмм, но позволяет расширенную настройку внешнего вида и цветов. Она позволяет создавать изображения совместимые с SVG 1.1, и поддерживает вывод в большинство современных браузеров. Библиотека распространяется под лицензией LGPL и активно поддерживается Graham Breach.

Установка этих библиотек достаточно проста, требуется распаковать дистрибутиви добавить библиотеку в настройку include_path файла php.ini. Детальные инструкции по установке можно найти в справке на сайте проектов.

When It Rains...
Итак, после тотго как все необходимое установлено, приступим к рисованию! Ниже простой пример, который использует ezcGraph для генерации столбиковой диаграммы:
  1. <?php
  2. // set up autoloader
  3. require_once 'ezc/Base/src/ezc_bootstrap.php';
  4.  
  5. // initialize object
  6. $graph = new ezcGraphBarChart();
  7.  
  8. // add data points
  9. $graph->data['Annual rainfall'] = new ezcGraphArrayDataSet(
  10.  array(
  11.  '2002' => 18234,
  12.  '2003' => 16484,
  13.  '2004' => 16574,
  14.  '2005' => 17464,
  15.  '2006' => 19474
  16. ));
  17.  
  18.  
  19. // render graph
  20. $graph->renderToOutput(500,500);
  21. ?>
* This source code was highlighted with Source Code Highlighter.

Этот скрипт создает объект класса ezcGraphBarChart, в котором создается объект класса ezcGraphArrayDataSet, содержащий данные, которые необходимо нарисовать. Данные представлены ввиде ассоциативного массива, ключами которого являются значения, располагающиеся по оси X, а значениями — значения по оси Y. После того как данные были прокреплены к объекту диаграммы, renderToOutput() берет на себя заботу по выводу графика в указанные параметры ширины и высоты, корректного указания заголовков Content-Type.
Сгенерируется что-то похожее на это:

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

ezcGraph поддерживает 5 различных форматов графиков, легко проиллюстрировать как будет выглядеть график в другом формате, просто заменив класс объекта:
  1. <?php
  2. // set up autoloader
  3. require_once 'ezc/Base/src/ezc_bootstrap.php';
  4.  
  5. // initialize object
  6. $graph = new ezcGraphLineChart();
  7.  
  8. // add data points
  9. $graph->data['Annual rainfall'] = new ezcGraphArrayDataSet(
  10.  array(
  11.  '2002' => 18234,
  12.  '2003' => 16484,
  13.  '2004' => 16574,
  14.  '2005' => 17464,
  15.  '2006' => 19474
  16. ));
  17.  
  18. // render graph
  19. $graph->renderToOutput(500,500);
  20. ?>
* This source code was highlighted with Source Code Highlighter.

Вот как это будет выглядеть:

Нужна круговая диаграмма — нет проблем:
  1. <?php
  2. // set up autoloader
  3. require_once 'ezc/Base/src/ezc_bootstrap.php';
  4.  
  5. // initialize object
  6. $graph = new ezcGraphPieChart();
  7.  
  8. // add data points
  9. $graph->data['Annual rainfall'] = new ezcGraphArrayDataSet(
  10.  array(
  11.  '2002' => 18234,
  12.  '2003' => 16484,
  13.  '2004' => 16574,
  14.  '2005' => 17464,
  15.  '2006' => 19474
  16. ));
  17.  
  18. // render graph
  19. $graph->renderToOutput(500,500);
  20. ?>
  21.  
* This source code was highlighted with Source Code Highlighter.

Вот как это будеть выглядеть:


Radar Sweep
Ниже подробный список различных типов графиков поддерживаемых ezcGraph:
Object Chart type
ezcGraphBarChart Bar graph
ezcGraphLineChart Line graph
ezcGraphPieChart Pie chart
ezcGraphRadarChart Radar plot
ezcGraphOdometerChart Odometer chart


Вы уже видели как работают первые три класса, поэтому давайте посмотрим на оставшиеся. Radar-диаграмма хороша для иллюстрации многомерных данных. Ниже пример, который демонстрирует продажи различных электронных товаров на протяжении нескольких лет:
  1. <?php
  2. // set up autoloader
  3. require_once 'ezc/Base/src/ezc_bootstrap.php';
  4.  
  5. // initialize object
  6. $graph = new ezcGraphRadarChart();
  7.  
  8. // add data sets
  9. $graph->data['Televisions'] = new ezcGraphArrayDataSet(
  10.  array(
  11.  '2002' => 1823,
  12.  '2003' => 1644,
  13.  '2004' => 1574,
  14.  '2005' => 1764,
  15.  '2006' => 1944,
  16.  '2007' => 1201,
  17.  ''   => 1823
  18. ));
  19. $graph->data['Audio systems'] = new ezcGraphArrayDataSet(
  20.  array(
  21.  '2002' => 758,
  22.  '2003' => 144,
  23.  '2004' => 154,
  24.  '2005' => 714,
  25.  '2006' => 638,
  26.  '2007' => 1038, 
  27.  ''   => 758
  28. ));
  29. $graph->data['Cameras'] = new ezcGraphArrayDataSet(
  30.  array(
  31.  '2002' => 102,
  32.  '2003' => 143,
  33.  '2004' => 176,
  34.  '2005' => 270,
  35.  '2006' => 212,
  36.  '2007' => 1112,
  37.  ''   => 102
  38. ));
  39.  
  40. // render graph
  41. $graph->renderToOutput(500,500);
  42. ?>
  43.  
* This source code was highlighted with Source Code Highlighter.

Вот как это будет выглядеть:

Отметим, что каждая переменная расположена по своей оси
Другой тип графика — одометр, используется для иллюстрации некоторого значения относительно фиксированного диапазона. Ниже пример:
  1. <?php
  2. // set up autoloader
  3. require_once 'ezc/Base/src/ezc_bootstrap.php';
  4.  
  5. // initialize object
  6. $graph = new ezcGraphOdometerChart();
  7.  
  8. // add data point
  9. $graph->data['Televisions'] = new ezcGraphArrayDataSet(
  10.  array(2400)
  11. );
  12.  
  13. // set odometer limits
  14. $graph->axis->min = 0;
  15. $graph->axis->max = 3000;
  16.  
  17. // render graph
  18. $graph->renderToOutput(500,500);
  19. ?>
* This source code was highlighted with Source Code Highlighter.

Вот как это будет выглядеть:


Для сравнения одного набора данных с другим, просто добавьте дополнительный набор данных к объекту диаграммы (это работает для линий, столбиков и диаграммы radar). Когда вы сделаете это, ezcGraph автоматически создаст новый график, делая сравнение данных достаточно простым. Для иллюстрации посмотрите пример:
  1. <?php
  2. // set up autoloader
  3. require_once 'ezc/Base/src/ezc_bootstrap.php';
  4.  
  5. // initialize object
  6. $graph = new ezcGraphBarChart();
  7.  
  8. // add data points
  9. $graph->data['Annual rainfall'] = new ezcGraphArrayDataSet(
  10.  array(
  11.  '2002' => 18234,
  12.  '2003' => 16484,
  13.  '2004' => 16574,
  14.  '2005' => 17464,
  15.  '2006' => 19474
  16. ));
  17. $graph->data['Crop production'] = new ezcGraphArrayDataSet(
  18.  array(
  19.  '2002' => 50474,
  20.  '2003' => 26749,
  21.  '2004' => 29567,
  22.  '2005' => 37869,
  23.  '2006' => 79400
  24. ));
  25.  
  26. // render graph
  27. $graph->renderToOutput(500,500);
  28. ?>
* This source code was highlighted with Source Code Highlighter.

Вот как это будет выглядеть:

Заметьте, что ezcGraph автоматически будет использовать ключи от набора данных в качестве легенды графика. Вы можете дополнительно включить подписи X and Y осей, также как и заголовка диаграммы используя свойства 'xAxis', 'yAxis', 'title' и 'legend'. Ниже измененный код:
  1. <?php
  2. // set up autoloader
  3. require_once 'ezc/Base/src/ezc_bootstrap.php';
  4.  
  5. // initialize object
  6. $graph = new ezcGraphBarChart();
  7.  
  8. // add data points
  9. $graph->data['Annual rainfall'] = new ezcGraphArrayDataSet(
  10.  array(
  11.  '2002' => 18234,
  12.  '2003' => 16484,
  13.  '2004' => 16574,
  14.  '2005' => 17464,
  15.  '2006' => 19474
  16. ));
  17.  
  18. // set title
  19. $graph->title = 'ANNUAL RAINFALL';
  20. // set axis labels
  21. $graph->xAxis->label = 'YEAR';
  22. $graph->yAxis->label = 'MM';
  23.  
  24. // set legend and title position
  25. $graph->title->position = ezcGraph::TOP;
  26. $graph->legend->position = ezcGraph::RIGHT;
  27. // render graph
  28. $graph->renderToOutput(500,500);
  29. ?>
* This source code was highlighted with Source Code Highlighter.

Вот как это будет выглядеть:


Mixing A Palette
ezcGraph позволяет производить расширенную настройку графиков, включающую в себя возможность устанавливать цвета, размеры, пропуски и позиционирование элементов. Легкий путь сделать это в использовании свойства «palettes», которое может содержать предопределенные цвета. ezcGraph включает некоторое число предопределенных палитр, в то же время можно создать свою палитру.
Ниже пример предопределенной зеленой палитры:
  1. <?php
  2. // set up autoloader
  3. require_once 'ezc/Base/src/ezc_bootstrap.php';
  4.  
  5. // initialize object
  6. $graph = new ezcGraphBarChart();
  7.  
  8. // use green palette
  9. $graph->palette = new ezcGraphPaletteEzGreen();
  10.  
  11. // add data points
  12. $graph->data['Annual rainfall'] = new ezcGraphArrayDataSet(
  13.  array(
  14.  '2002' => 18234,
  15.  '2003' => 16484,
  16.  '2004' => 16574,
  17.  '2005' => 17464,
  18.  '2006' => 19474
  19. ));
  20.  
  21.  
  22. // render graph
  23. $graph->renderToOutput(500,500);
  24. ?>
* This source code was highlighted with Source Code Highlighter.

Вотк как это выглядит:

Также есть возможность изменять шрифт, цвет, границы, выравнивание для каждого элемента графика, получая доступ к свойствам конкретного элемента. Ниже пример:
  1. <?php
  2. // set up autoloader
  3. require_once 'ezc/Base/src/ezc_bootstrap.php';
  4.  
  5. // initialize object
  6. $graph = new ezcGraphBarChart();
  7.  
  8. // add data points
  9. $graph->data['Annual rainfall'] = new ezcGraphArrayDataSet(
  10.  array(
  11.  '2002' => 18234,
  12.  '2003' => 16484,
  13.  '2004' => 16574,
  14.  '2005' => 17464,
  15.  '2006' => 19474
  16. ));
  17.  
  18. // set title
  19. $graph->title = 'ANNUAL RAINFALL';
  20. // set axis labels
  21. $graph->xAxis->label = 'YEAR';
  22. $graph->yAxis->label = 'MM';
  23.  
  24. // set global options for font name and size
  25. $graph->options->font->name = 'Arial';
  26. $graph->options->font->maxFontSize = '40';
  27.  
  28. // set legend and title font
  29. $graph->legend->font->name = 'Times New Roman';
  30. $graph->title->font->name = 'Arial';
  31. $graph->title->font->maxFontSize = '20';
  32.  
  33. // set legend and title colors
  34. $graph->title->font->color = '#FFFF00';
  35. $graph->legend->font->color = '#FFFFFF';
  36.  
  37. // set bar color
  38. $graph->data['Annual rainfall']->color = '#FF8040';
  39.  
  40. // set legend and title borders and border colors
  41. $graph->legend->border = '#FF8040';
  42. $graph->title->borderWidth = '2';
  43. $graph->title->border = '#FF00FF';
  44. $graph->title->background = '#C0C0C0';
  45.  
  46. // set colors for X and Y axes
  47. $graph->xAxis->border = '#FF0000';
  48. $graph->yAxis->border = '#00FF00';
  49.  
  50. // set legend and title position
  51. $graph->title->position = ezcGraph::TOP;
  52. $graph->legend->position = ezcGraph::RIGHT;
  53. // render graph
  54. $graph->renderToOutput(500,500);
  55. ?>
* This source code was highlighted with Source Code Highlighter.

Вот как это выглядит:

ezcGraph позволяет вам размещать JPEG, GIF или PNG изображения в качестве фона для вашего графика. Изображение может быть размещено на специфическом месте или повторятся как по горизонтали, так и по вертикали. Ниже пример:
  1. <?php
  2. // set up autoloader
  3. require_once 'ezc/Base/src/ezc_bootstrap.php';
  4.  
  5. // initialize object
  6. $graph = new ezcGraphBarChart();
  7.  
  8. // add data points
  9. $graph->data['Annual rainfall'] = new ezcGraphArrayDataSet(
  10.  array(
  11.  '2002' => 18234,
  12.  '2003' => 16484,
  13.  '2004' => 16574,
  14.  '2005' => 17464,
  15.  '2006' => 19474
  16. ));
  17.  
  18. // set title
  19. $graph->title = 'ANNUAL RAINFALL';
  20. // set axis labels
  21. $graph->xAxis->label = 'YEAR';
  22. $graph->yAxis->label = 'MM';
  23.  
  24. // repeat background image horizontally across graph bottom
  25. $graph->background->image = 'logo.jpg';
  26. $graph->background->position = ezcGraph::BOTTOM;
  27. $graph->background->repeat = ezcGraph::HORIZONTAL;
  28. // render graph
  29. $graph->renderToOutput(500,500);
  30. ?>
* This source code was highlighted with Source Code Highlighter.

Вот как это будет выглядеть:

Существует еще достаточно большое количество возможностей, которые представляет ezcGraph. Дополнительно смотрите the ezcGraph documentation

So Many Choices
Альтернативой для ezcGraph является SVGGraph. Ниже простой пример, который создает столбчатый график для годового количества осадков:
  1. <?php
  2. // include class file
  3. include 'SVGGRaph/SVGGraph.php';
  4.  
  5. // initialize object
  6. $graph = new SVGGraph(400, 400);
  7.  
  8. // add data points
  9. $graph->Values(array(
  10.  '2002' => 18234,
  11.  '2003' => 16484,
  12.  '2004' => 16574,
  13.  '2005' => 17464,
  14.  '2006' => 19474
  15. ));
  16.  
  17. // render graph
  18. $graph->Render('BarGraph');
  19. ?>
* This source code was highlighted with Source Code Highlighter.

Этот скрипт начинается с создания объекта SVGGraph и передачи в конструктор требуемых размеров ширины и высоты. Далее, метод Values() используется для передачи сведений о данных; этот метод принимает в качестве параметра ассоциативный мсассив, в котором ключами являются координаты по оси X, а значения массива соответствующие значения по оси Y.
После этих действий Render() берет на себя заботу по выполнению всех необходимых вычислений и создании SVG изображения. Метод Render() требует один обязательный параметр, являющийся типом выводимого графика. Также у него есть два необязательных параметра, которые отвечают за вывод начала XML-документа и необходимости выдачи заголовка Content-Type.
Вот как это будет выглядеть:

Очень легко увидеть эти же данные, но только в другом формате, скажем линии. Необходимо только поменять параметр метода Render():
  1. <?php
  2. // include class file
  3. include 'SVGGRaph/SVGGraph.php';
  4.  
  5. // initialize object
  6. $graph = new SVGGraph(400, 400);
  7.  
  8. // add data points
  9. $graph->Values(array(
  10.  '2002' => 18234,
  11.  '2003' => 16484,
  12.  '2004' => 16574,
  13.  '2005' => 17464,
  14.  '2006' => 19474
  15. ));
  16.  
  17. // render graph
  18. $graph->Render('LineGraph');
  19. ?>
  20.  
* This source code was highlighted with Source Code Highlighter.

Вот как это будет выглядеть

Нужна круговая диаграмма — нет проблем
<?php
// include class file
include 'SVGGRaph/SVGGraph.php';

// initialize object
$graph = new SVGGraph(400, 400);

// add data points
$graph->Values(array(
 'UK' => 50,
 'US' => 30,
 'Europe' => 100,
 'India' => 20,
));

// render graph
$graph->Render('PieGraph');
?>

* This source code was highlighted with Source Code Highlighter.

Вот как это будет выглядеть


Обратите внимание, что во всех этих случаях, изменение тип диаграммы проходило просто, достаточно было просто передать Render () другой аргумент, в то время как основная часть сценария осталавалась неизменной. Если бы вы создавали диаграмму «вручную» с использованием либо DOM, либо SimpleXML потребовалось бы много работы, чтобы перейти от одного типа диаграммы к другой.

Off The Grid
Хотя вывод по умолчанию SVGGraph применим практически для любой ситуации, библиотека предлагает достаточно большие возможности по настройтки внешенго вида диаграмм. Настройки передаются как ассоциативный массив и передаются в конструктор объекта SVGGraph третьим опциональным элементом.
Например, SVGGraph позволяет Вам изменить цвет фона диаграммы, линии сетки, осей, заголовков, маркеров точек с помощью настроек 'back_colour', 'back_stroke_colour', 'stroke_colour', 'axis_colour', 'grid_colour' и 'label_colour'. Цвет можно указать как строкой так и значением RGB. Ниже пример:
<?php
// include class file
include 'SVGGRaph/SVGGraph.php';

// set options
$options = array(
 'back_colour' => 'white',
 'back_stroke_colour' => 'pink',
 'stroke_colour' => 'black',
 'axis_colour' => 'blue',
 'grid_colour' => 'silver',
 'label_colour' => 'brown'
);

// initialize object
$graph = new SVGGraph(400, 400, $options);

// add data points
$graph->Values(array(
 '2002' => 18234,
 '2003' => 16484,
 '2004' => 16574,
 '2005' => 17464,
 '2006' => 19474
));

// render graph
$graph->Render('BarGraph');
?>

* This source code was highlighted with Source Code Highlighter.

Вот как это будет выглядеть:

Также присутствует возможность управлять видимостью элементов, таких как оси, маркеры, сеткой фона, используя параметры 'show_grid', 'show_axes', 'show_divisions', 'show_label_h' и 'show_label_v'. Ниже пример:
<?php
// include class file
include 'SVGGRaph/SVGGraph.php';

// set options
$options = array(
 'show_grid' => false,
 'show_axes' => true,
 'show_divisions' => false,
 'show_label_h' => true,
 'show_label_v' => false
);

// initialize object
$graph = new SVGGraph(400, 400, $options);

// add data points
$graph->Values(array(
 '2002' => 18234,
 '2003' => 16484,
 '2004' => 16574,
 '2005' => 17464,
 '2006' => 19474
));

// render graph
$graph->Render('BarGraph');
?>

* This source code was highlighted with Source Code Highlighter.

Вот как это будет выглядеть:

Для линейной диаграммы параметры 'marker_size', 'marker_type' и 'marker_colour' могут быть использованы для управления внешним видом маркеров точек, как показано ниже:
<?php
// include class file
include 'SVGGRaph/SVGGraph.php';

// set options
$options = array(
 'show_grid' => false,
 'marker_size' => 8,
 'marker_type' => 'triangle',
 'marker_colour' => 'red'
);

// initialize object
$graph = new SVGGraph(400, 400, $options);

// add data points
$graph->Values(array(
 '2002' => 18234,
 '2003' => 16484,
 '2004' => 16574,
 '2005' => 17464,
 '2006' => 19474
));

// render graph
$graph->Render('LineGraph');
?>

* This source code was highlighted with Source Code Highlighter.

Вот как это будет выглядеть:

Круговые диаграммы весьма популярны и SVGGraph имеет большое количество настроек и методов специфичных для данного типа диаграмм. Пример использования круговых диаграмм был выше, давайте его расширим, для чего заставим SVGGraph автоматически рассчитать и вывести проценты, используя 'show_label_percent'. Ниже пример:
<?php
// include class file
include 'SVGGRaph/SVGGraph.php';

// initialize object
$graph = new SVGGraph(400, 400, array(
 'show_label_amount'  => true,
 'show_label_percent' => true,
 'label_colour'    => 'black',
));

// add data points
$graph->Values(array(
 'UK'   => 50,
 'US'   => 30,
 'Europe' => 100,
 'India'  => 20,
));

// render graph
$graph->Render('PieGraph');
?>

* This source code was highlighted with Source Code Highlighter.

Вот как это будет выглядеть:

И наконец, существует возможность добавить гиперссылку к меткам на графике, используя метод Links() как показано ниже:
<?php
// include class file
include 'SVGGRaph/SVGGraph.php';

// initialize object
$graph = new SVGGraph(400, 400, array(
 'show_label_amount'  => true,
 'show_label_percent' => true,
 'label_colour'    => 'black',
));

// add data points
$graph->Values(array(
 'UK'   => 50,
 'US'   => 30,
 'Europe' => 100,
 'India'  => 20,
));

// add links
// no link for 'Europe' slice
$graph->links(array(
 'UK'   => 'http://example.org/UK',
 'US'   => 'http://example.org/US',
 'India'  => 'http://example.org/IN',
));

// render graph
$graph->Render('PieGraph');
?>

* This source code was highlighted with Source Code Highlighter.


All Stacked Up
Итак мы рассмотрели возмодности двух популярных библиотек, давайте посмотрим некоторые практические примеры. Предположим вы владелец популярного сайта с большим количеством интересного контента, и у вас есть PHP скрипт, который записывает количество посещений и комментариев на странице в базу данных MySQL. Предположим что база данных имеет следующий вид:
+----+------------+------+-------+
| id | date    | hits | posts |
+----+------------+------+-------+
| 1 | 2010-02-01 | 3849 |  284 |
| 2 | 2010-02-02 | 3728 |  421 |
| 3 | 2010-02-03 | 3526 |  189 |
| 4 | 2010-02-04 | 4288 |  143 |
| 5 | 2010-02-05 | 4526 |  265 |
...
+----+------------+------+-------+

* This source code was highlighted with Source Code Highlighter.

Нет ничего проще, чем перевести содержимое этой таблицы в график, показывающий количество посещений вместе с количеством комментариев, используя ezcGraph. Пример ниже:
<?php
// set up autoloader
require_once 'ezc/Base/src/ezc_bootstrap.php';

// query database for data
// formulate into arrays
try {
 $pdo = new PDO('mysql:host=localhost;dbname=example', 'user', 'pass');
 $sql = "SELECT DATE_FORMAT(date, '%d') AS day, hits, posts FROM log WHERE date BETWEEN '2010-02-01' AND '2010-02-05'";
 if ($result = $pdo->query($sql)) {
  while($row = $result->fetch()) {
   $hits[$row['day']] = $row['hits'];
   $posts[$row['day']] = $row['posts'];
  }
 } 
} catch (PDOException $e) {
 die('Error: ' . $e->getMessage());
}
  
// initialize object
$graph = new ezcGraphBarChart();

// add data sets
$graph->data['Hits'] = new ezcGraphArrayDataSet($hits);
$graph->data['Posts'] = new ezcGraphArrayDataSet($posts);

// render graph
$graph->renderToOutput(500,500);
?>


* This source code was highlighted with Source Code Highlighter.

Ничего сложного нет, скрипт соединяется с MySQL, выполняет SELECT, возвращающий данные за 5 дней и складывает данные в два массива. Эти массивы передаются в свойство 'data' объекта ezcGraph.
Вот как это выглядит:


Pie, Anyone?
Другая интересная возможность соединить AJAX с SVG для создания динамически изменяемой диаграммы в зависимости от пользовательского ввода. Рассмотрим HTML страницу, которая выводит форму и создает круговую диаграмму в зависимости от введенных данных. Запросы AJAX осуществляются с помощью jQuery каждый раз когда пользователь изменяет данные. Полученный ответ мы будем вставлять прямо внутрь
Tags:
Hubs:
+50
Comments 21
Comments Comments 21

Articles