Using SVGGraph

« Return to SVGGraph page

Skip to:

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>

The 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 pluginspage attribute 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>

The 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:

  1. Include or require the main class file;
  2. Construct an instance of the SVGGraph class;
  3. Set the data values to draw on the graph;
  4. 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 svggraph.ini 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 embed, iframe or object element, otherwise you will end up with scroll bars.

 $graph = new SVGGraph($width, $height, $settings);

For more information on what goes in the $settings array, 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 the Values function:

 $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 when the 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 Links function:

 $graph->Links('/page1.html', NULL, '/page3.html');

The NULL is used here to specify that the second bar will not be linked to anywhere.

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:

 $graph->Render('BarGraph');

This will send the correct content type header to the browser and output the SVG graph.

The Render function takes two optional parameters in addition to the graph type:

 $graph->Render($type, $header, $content_type);

Passing in FALSE for $header will prevent output of the XML declaration and doctype. Passing in FALSE for $content_type will prevent the image/svg+xml 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 $header and $defer_js parameters:

 $output = $graph->Fetch($type, $header, $defer_js);

Passing in FALSE as $header will prevent the returned output from containing the XML declaration and doctype. The Fetch function never outputs the content type to the response header.

The default for $defer_js is TRUE, which means you should use the FetchJavascript function to insert the code required for tooltips, etc. later in the page.

« Back to top of page Function reference »