This page explains how to get SVGGraph working to display your graph on a page. At the end of the page is a list of all the functions supported by SVGGraph - there are not many. Before that, you must know how to integrate the SVG graphics with the rest of your site.
Embedding the SVG in a page
There are several ways to insert SVG graphics into a page. FireFox, Safari, Chrome, Opera and IE 9 all support SVG natively, though Internet Explorer versions up to 8 require the use of a plugin (such as the one supplied by Adobe).
For options 1-3, I'll assume you have a PHP script called "graph.php" which contains the code to generate the SVG graph that you want to embed.
Option 1: <embed>
embed tag has been around for years, but has only been
included in the HTML standard with HTML5.
<embed src="graph.php" type="image/svg+xml" width="600" height="400" pluginspage="http://www.adobe.com/svg/viewer/install/" />
This method works in all browsers. The
is for telling the browser where to download the relevant plugin from, but
most modern browsers have SVG support built-in.
Option 2: <iframe>
This method tells the browser to load the SVG as a separate document in a frame inside the main HTML page.
<iframe src="graph.php" type="image/svg+xml" width="600" height="400"></iframe>
This method also works in all browsers, and the
iframe tag is
standard in HTML 4.
Option 3: <object>
object tag is part of the HTML 4 standard, but the
following code doesn't work in versions of IE before version 9.
<object data="graph.php" width="600" height="400" type="image/svg+xml" />
Option 4: SVG within HTML
The content of the SVG graph can be included with the HTML of the surrounding page, either by using the SVG namespace in an XHTML document, or more easily by including the SVG in an HTML5 document.
This method does not work in older versions of Internet Explorer, but it is supported by the more modern browsers. For the full details on using this technique, take a look at the SVG in HTML page.
Building the graph
There are only four steps required to build the most basic graph:
- Include or require the main class file;
- Construct an instance of the SVGGraph class;
- Set the data values to draw on the graph;
- Render the required graph type.
The following example shows each of these steps, drawing a line graph of a sequence of numbers:
<?php require_once 'SVGGraph.php'; $graph = new SVGGraph(500, 400); $graph->Values(1, 4, 8, 9, 16, 25, 27); $graph->Render('LineGraph'); ?>
The sections that follow describe each of the four steps, and explain how to build more complex and better-looking graphs.
1. Including or requiring SVGGraph
The library consists of several class files and a
file - all of these files must be present. To use SVGGraph you only need to
include or require the main
SVGGraph.php class file in your PHP
code, as all the other files are included automatically when they are needed.
You can move the files into a subdirectory to keep them separate, but all
the SVGGraph files have to be kept together to be loaded automatically.
<?php // load the main class require_once 'SVGGraph.php'; // all other classes will be loaded automatically, depending on the // options and graph type that you choose to use
2. The SVGGraph class constructor
The SVGGraph class constructor takes three arguments, the width and height of the SVG image in pixels and an optional array of settings to be passed to the rendering class.
Note that the width and height you specify here should
be the same as or smaller than the size you use for the
object element, otherwise you will end
up with scroll bars.
$graph = new SVGGraph($width, $height, $settings);
For more information on what goes in the
see the settings page and the pages
for each of the graph types.
3. Assigning data values
For very simple graphs you may set the data to use by passing it into
$graph->Values(1, 2, 3);
For more control over the data, and to assign labels, pass the values in as an array:
$data = array('first' => 1, 'second' => 2, 'third' => 3); $graph->Values($data);
For graphs that support multiple data sets, pass in an array of value arrays:
$data = array( array('first' => 1, 'second' => 2, 'third' => 3), array('first' => 3, 'second' => 5, 'third' => 2, 'fourth' => 4), array('first' => 2, 'second' => 3, 'third' => 1, 'fifth' => 5), ); $graph->Values($data);
In this example, the second and third value arrays have extra values with keys 'fourth' and 'fifth'. The graph will be drawn with both of those values assumed to be 0 for the value arrays where they are not specified.
Graphs that do not support multiple datasets will use the first value array and ignore any others that are present.
For scatter graphs, the marker positions are given by the array keys and values:
$data = array(5 => 20, 6 => 30, 10 => 90, 20 => 50); $graph->Values($data);
From version 2.4, scatter graphs support passing in pairs of x,y coordinates
scatter_2d option is set, to allow several markers to
appear at the same x-coordinate:
$data = array( array(5,20), array(6,30), array(5,90), array(10,50) ); $graph->Values($data);
Version 2.11 adds a new way to specify the values array called structured data. This allows for configuring the fields in the array as data or metadata.
The graph bars and markers may be assigned hyperlinks - each value that requires
a link should have a URL assigned to it using the
$graph->Links('/page1.html', NULL, '/page3.html');
NULL is used here to specify that the second bar will not be linked to
As with the
Values function, the list of links may be passed in as an array:
$links = array('/page1.html', NULL, '/page3.html');
Using an associative array means that
NULL values may be skipped.
$links = array('first' => '/page1.html', 'third' => '/page3.html'); $graphs->Links($links);
Links for individual bars, markers and pie slices may also be specified using structured data.
4. Rendering the graph
To generate and display the graph, call the
Render function passing in the
type of graph to be rendered:
This will send the correct content type header to the browser and output the SVG graph.
Render function takes two optional parameters in addition to the graph
$graph->Render($type, $header, $content_type);
$header will prevent output of the XML declaration and
doctype. Passing in
$content_type will prevent the
content type being set in the response header.
To generate the graph without outputting it to the browser you may use the
Fetch function instead:
$output = $graph->Fetch('BarGraph');
This function also takes optional
$output = $graph->Fetch($type, $header, $defer_js);
$header will prevent the
returned output from containing the XML declaration and doctype. The
Fetch function never outputs the content type to the response
The default for
TRUE, which means you
should use the
for tooltips, etc. later in the page.