Creating Scalable Vector Graphs with PHP

Like most PHP developers, I am familiar with the GD extension, which allows you to simply create images in JPEG, GIF and PNG formats. Expansion is very convenient when it is necessary to make complex images from dynamically received data online.
The reverse GD medal is that images are created in raster format. Resizing an image degrades its quality.

If you need to use image resizing, then the best solution would be to use a vector format, such as SVG, for example, which allows you to easily resize the image without any distortion or quality loss.
Easier said than done. Programming the creation of graphs and diagrams using SVG requires a serious understanding of the SVG specification and various SVG primitives, as well as a fair amount of time for research, experimentation and debugging. Or, in other words, this is a job for the whole weekend.
Fortunately, everything is not so bad. There are a large number of open source solutions that support the creation of graphs in SVG format, the use of which can significantly reduce the time spent on developing Web applications. In addition, SVG is XML that is easy to edit and takes up less space than their raster friends. Next, we look at two libraries that will greatly facilitate your life.

Putting the Pieces Together

This article discusses two libraries for creating SVG images:

• ez Components is a popular library of php components that includes most components for everyday tasks. One of these components is ezcGraph, which is an object-oriented API for creating graphs. The component supports lines, bars, pie charts, radar and odometer charts and can output results in both formats, both in raster and vector. The eZ Components library is distributed under the New BSD license and is sponsored by eZ systems.
• SVGGraph PHP library for creating SVG. It supports the creation of lines, bars, and pie charts only, but allows advanced customization of appearance and colors. It allows you to create images compatible with SVG 1.1, and supports output to most modern browsers. The library is distributed under the LGPL license and is actively maintained by Graham Breach.
  

The installation of these libraries is quite simple, you need to unpack the distribution kit, add the library to the include_path setting of the php.ini file. Detailed installation instructions can be found in the help on the project site.
')
When It Rains ...
So, after that, as everything necessary is installed, let's start drawing! Below is a simple example that ezcGraph uses to generate a bar chart:

<?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .

1. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
2. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
3. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
5. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
6. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
8. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
9. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
10. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
11. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
12. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
13. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
14. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
15. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
16. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
19. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
20. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .
21. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .

<?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .

This script creates an object of the ezcGraphBarChart class in which an object of the ezcGraphArrayDataSet class is created containing the data to be drawn. The data is represented as an associative array, the keys of which are the values ​​located along the X axis, and the values ​​are the values ​​along the Y axis. After the data has been assigned to the chart object, renderToOutput () takes care of outputting the graph to the specified width and height parameters , correct indication of Content-Type headers.
Something similar to this is generated:

View the source code of the generated graphics and you will see the SVG code that is used to output this image:

ezcGraph supports 5 different graph formats, it is easy to illustrate how the graph will look in a different format, simply by replacing the object class:

1. <? php
2. // set up autoloader
3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
5. // initialize object
6. $ graph = new ezcGraphLineChart ();
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. ))
18. // render graph
19. $ graph-> renderToOutput (500,500);
20. ?>

* This source code was highlighted with Source Code Highlighter .

Here is what it will look like:

Need a pie chart - no problem:

1. <? php
2. // set up autoloader
3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
5. // initialize object
6. $ graph = new ezcGraphPieChart ();
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. ))
18. // render graph
19. $ graph-> renderToOutput (500,500);
20. ?>

* This source code was highlighted with Source Code Highlighter .

Here is what it will look like:


Radar sweep
Below is a detailed list of the various types of graphics supported by ezcGraph:

Object	Chart type
ezcGraphBarChart	Bar graph
ezcGraphLineChart	Line graph
ezcGraphPieChart	Pie chart
ezcGraphRadarChart	Radar plot
ezcGraphOdometerChart	Odometer chart

You have already seen how the first three classes work, so let's look at the rest. A radar diagram is good for illustrating multidimensional data. Below is an example that demonstrates sales of various electronic products over the course of several years:

1. <? php
2. // set up autoloader
3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
5. // initialize object
6. $ graph = new ezcGraphRadarChart ();
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. ))
40. // render graph
41. $ graph-> renderToOutput (500,500);
42. ?>

* This source code was highlighted with Source Code Highlighter .

Here is what it will look like:

Note that each variable is located on its axis
Another type of chart is the odometer, used to illustrate some value relative to a fixed range. Below is an example:

1. <? php
2. // set up autoloader
3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
5. // initialize object
6. $ graph = new ezcGraphOdometerChart ();
8. // add data point
9. $ graph-> data [ 'Televisions' ] = new ezcGraphArrayDataSet (
10. array (2400)
11. );
13. // set odometer limits
14. $ graph-> axis-> min = 0;
15. $ graph-> axis-> max = 3000;
17. // render graph
18. $ graph-> renderToOutput (500,500);
19. ?>

* This source code was highlighted with Source Code Highlighter .

Here is what it will look like:


To compare one data set with another, simply add an additional data set to the chart object (this works for lines, columns, and a radar chart). When you do this, ezcGraph will automatically create a new graph, making data comparison simple enough. To illustrate, see an example:

1. <? php
2. // set up autoloader
3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
5. // initialize object
6. $ graph = new ezcGraphBarChart ();
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. ))
26. // render graph
27. $ graph-> renderToOutput (500,500);
28. ?>

* This source code was highlighted with Source Code Highlighter .

Here is what it will look like:

Note that ezcGraph will automatically use the keys of the dataset as a graph legend. You can additionally include X and Y axis labels, as well as the chart title using the 'xAxis', 'yAxis', 'title' and 'legend' properties. Below is the modified code:

1. <? php
2. // set up autoloader
3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
5. // initialize object
6. $ graph = new ezcGraphBarChart ();
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. ))
18. // set title
19. $ graph-> title = 'ANNUAL RAINFALL' ;
20. // set axis labels
21. $ graph-> xAxis-> label = 'YEAR' ;
22. $ graph-> yAxis-> label = 'MM' ;
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 .

Here is what it will look like:


Mixing palette
ezcGraph allows for advanced configuration of graphs, including the ability to set colors, sizes, skips and positioning of elements. An easy way to do this is to use the “palettes” property, which can contain predefined colors. ezcGraph includes a number of predefined palettes, at the same time you can create your own palette.
Below is an example of a predefined green palette:

1. <? php
2. // set up autoloader
3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
5. // initialize object
6. $ graph = new ezcGraphBarChart ();
8. // use green palette
9. $ graph-> palette = new ezcGraphPaletteEzGreen ();
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. ))
22. // render graph
23. $ graph-> renderToOutput (500,500);
24. ?>

* This source code was highlighted with Source Code Highlighter .

This is how it looks:

It is also possible to change the font, color, borders, alignment for each element of the graph, gaining access to the properties of a specific element. Below is an example:

1. <? php
2. // set up autoloader
3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
5. // initialize object
6. $ graph = new ezcGraphBarChart ();
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. ))
18. // set title
19. $ graph-> title = 'ANNUAL RAINFALL' ;
20. // set axis labels
21. $ graph-> xAxis-> label = 'YEAR' ;
22. $ graph-> yAxis-> label = 'MM' ;
24. // set global options for font name and size
25. $ graph-> options-> font-> name = 'Arial' ;
26. $ graph-> options-> font-> maxFontSize = '40' ;
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' ;
33. // set legend and title colors
34. $ graph-> title-> font-> color = '# FFFF00' ;
35. $ graph-> legend-> font-> color = '#FFFFFF' ;
37. // set bar color
38. $ graph-> data [ 'Annual rainfall' ] -> color = '# FF8040' ;
40. // set legend and border colors
41. $ graph-> legend-> border = '# FF8040' ;
42. $ graph-> title-> borderWidth = '2' ;
43. $ graph-> title-> border = '# FF00FF' ;
44. $ graph-> title-> background = '# C0C0C0' ;
46. // set colors for X and Y axes
47. $ graph-> xAxis-> border = '# FF0000' ;
48. $ graph-> yAxis-> border = '# 00FF00' ;
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 .

Here's what it looks like:

ezcGraph allows you to place JPEG, GIF or PNG images as a background for your graphic. The image can be placed on a specific place or repeated both horizontally and vertically. Below is an example:

1. <? php
2. // set up autoloader
3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
5. // initialize object
6. $ graph = new ezcGraphBarChart ();
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. ))
18. // set title
19. $ graph-> title = 'ANNUAL RAINFALL' ;
20. // set axis labels
21. $ graph-> xAxis-> label = 'YEAR' ;
22. $ graph-> yAxis-> label = 'MM' ;
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 .

Here is what it will look like:

There are still quite a number of possibilities that ezcGraph represents. See also the ezcGraph documentation.

So many choices
An alternative to ezcGraph is SVGGraph. Below is a simple example that creates a bar graph for annual precipitation:

1. <? php
2. // include class file
3. include 'SVGGRaph / SVGGraph.php' ;
5. // initialize object
6. $ graph = new SVGGraph (400, 400);
8. // add data points
9. $ graph-> Values ​​(array (
10. '2002' => 18234,
11. '2003' => 16484,
12. '2004' => 16574,
13. '2005' => 17464,
14. '2006' => 19474
15. ))
17. // render graph
18. $ graph-> Render ( 'BarGraph' );
19. ?>

* This source code was highlighted with Source Code Highlighter .

This script begins by creating an SVGGraph object and passing the required width and height to the designer. Next, the Values ​​() method is used to pass information about the data; This method takes as an argument an associative mass array, in which the keys are the coordinates along the X axis, and the values ​​of the array correspond to the corresponding values ​​along the Y axis.
After these actions, Render () takes care of all the necessary calculations and creating the SVG image. The Render () method requires one mandatory parameter, which is the type of output graphics. It also has two optional parameters that are responsible for outputting the beginning of the XML document and the need to issue a Content-Type header.
Here is what it will look like:

It is very easy to see the same data, but only in a different format, say lines. You only need to change the parameter of the Render () method:

1. <? php
2. // include class file
3. include 'SVGGRaph / SVGGraph.php' ;
5. // initialize object
6. $ graph = new SVGGraph (400, 400);
8. // add data points
9. $ graph-> Values ​​(array (
10. '2002' => 18234,
11. '2003' => 16484,
12. '2004' => 16574,
13. '2005' => 17464,
14. '2006' => 19474
15. ))
17. // render graph
18. $ graph-> Render ( 'LineGraph' );
19. ?>

* This source code was highlighted with Source Code Highlighter .

Here's what it will look like.

Need a pie chart - no problem

<?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 .

Here's what it will look like.


Please note that in all these cases, changing the type of chart was easy; it was enough just to pass a different argument to Render (), while the main part of the script remained unchanged. If you were creating a diagram "manually" using either the DOM or SimpleXML, it would take a lot of work to move from one type of diagram to another.

Off the grid
Although the default output of SVGGraph is applicable to almost any situation, the library offers quite large options for customizing the appearance of diagrams. Settings are passed as an associative array and passed to the SVGGraph object constructor by the third optional element.
For example, SVGGraph allows you to change the background color of the chart, grid lines, axes, headers, point markers using the 'back_colour', 'back_stroke_colour', 'stroke_colour', 'axis_colour', 'grid_colour' and 'label_colour' settings. Color can be specified as a string or RGB value. Below is an example:

<?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 .

Here is what it will look like:

It is also possible to control the visibility of elements, such as axes, markers, background grid, using the 'show_grid', 'show_axes', 'show_divisions', 'show_label_h' and 'show_label_v' parameters. Below is an example:

<?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 .

Here is what it will look like:

For a line chart, the 'marker_size', 'marker_type' and 'marker_colour' parameters can be used to control the appearance of point markers, as shown below:

<?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 .

Here is what it will look like:

Pie charts are very popular and SVGGraph has a large number of settings and methods specific to this type of diagrams. The example of using pie charts was higher, let's expand it, for which we will force SVGGraph to automatically calculate and display percentages using 'show_label_percent'. Below is an example:

<?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 .

Here is what it will look like:

Finally, it is possible to add a hyperlink to the labels on the graph using the Links () method as shown below:

<?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
So, we looked at the possibilities of two popular libraries, let's see some practical examples. Suppose you are the owner of a popular site with a lot of interesting content, and you have a PHP script that records the number of visits and comments on a page in the MySQL database. Suppose the database is as follows:

+----+------------+------+-------+
| 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 .

There is nothing easier than to translate the contents of this table into a graph showing the number of visits, along with the number of comments, using ezcGraph. Example below:

<?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 .

There is nothing complicated, the script connects to MySQL, performs a SELECT that returns data in 5 days and adds the data into two arrays. These arrays are passed to the 'data' property of the ezcGraph object.
Here's what it looks like:


Pie, anyone?
Another interesting opportunity is to connect AJAX with SVG to create a dynamically changeable diagram depending on user input. Consider an HTML page that displays the form and creates a pie chart depending on the data entered. AJAX requests are made using jQuery every time a user changes data. We will insert the received answer directly inside