SVGGraph Line and Scatter Graphs

« Return to SVGGraph page

SVGGraph currently contains these classes for drawing line and scatter graphs: LineGraph; MultiLineGraph; ScatterGraph. An example of each type is shown below.

Example code

Here are the settings and PHP code used to generate the graphs above:

require_once('includes/SVGGraph.php');
 
$settings = array(
  'back_colour' => '#eee',  'stroke_colour' => '#000',
  'back_stroke_width' => 0, 'back_stroke_colour' => '#eee',
  'back_image' => 'images/svgbg.png',
  'axis_colour' => '#333',  'axis_overlap' => 2,
  'axis_font' => 'Georgia', 'axis_font_size' => 10,
  'grid_colour' => '#666',  'label_colour' => '#000',
  'pad_right' => 20,        'pad_left' => 20,
  'link_base' => '/',       'link_target' => '_top',
  'fill_under' => array(true,false),
  'marker_size' => 3,
  'marker_type' => array('circle','square'),
  'marker_colour' => array('blue','red')
);
 
$values = array(
 array('Dough' => 30, 'Ray' => 50, 'Me' => 40, 'So' => 25, 'Far' => 45, 'Lard' => 35),
 array('Dough' => 20, 'Ray' => 30, 'Me' => 20, 'So' => 15, 'Far' => 25, 'Lard' => 35,
  'Tea' => 45)
);
 
$colours = array(array('red','yellow'), array('blue','white'));
$links = array('Dough' => 'jpegsaver.php', 'Ray' => 'crcdropper.php',
  'Me' => 'svggraph.php');
 
$graph = new SVGGraph(300, 200, $settings);
$graph->colours = $colours;
 
$graph->Values($values);
$graph->Links($links);
$graph->Render('LineGraph');

This is not the actual code used - I have adapted it to make it easier to copy and paste it into a new file to try for yourself. To change the type of graph generated, change 'LineGraph' in the final call to $graph->Render to one of the other types.

The scatter graph data is generated by a simple function, not shown here.

MultiLine and MultiScatter options

From version 2.4, SVGGraph supports passing arrays of values for the fill_under, marker_size, marker_type and marker_colour options, as shown in the example above. These allow you to control how the markers look and if the area under the line should be filled for each data set separately.

Version 2.5 makes fill_opacity, line_stroke_width and the new line_dash option support arrays too.

Scatter and MultiScatter data

The standard way to pass data to any of the graph types is by passing in a simple array:

$values = array(
  1 => 20, 3 => 40, 4 => 30, 5 => 60, 7 => 80, 9 => 70
);
 
$graph = new SVGGraph(300, 200, $settings);
$graph->Values($values);
$graph->Render('ScatterGraph');

This is fine, except that multiple points on a scatter graph may share the same x-coordinate - which is impossible to specify by using the key => value pairs of an array.

To solve this, I've added a new option in version 2.4, scatter_2d. This option makes the scatter graphs accept data as an array of pairs of coordinates:

$values = array(
  array(1,20), array(1,50), array(3,40), array(4,30),
  array(5,60), array(7,80), array(7,40), array(9,70)
);
$settings['scatter_2d'] = true;
 
$graph = new SVGGraph(300, 200, $settings);
$graph->Values($values);
$graph->Render('ScatterGraph');

Note that to use data in this format you must set the scatter_2d option to true, and that none of the other graph types support data in this format.

Line dash pattern

SVGGraph version 2.5 adds the line_dash option, which specifies a pattern of dashes to use for line graphs.

In the example below, the MultiLineGraph has two datasets, so I have used an array for line_dash containing two pattern strings. The first pattern is just the number "10" - this means 10 pixels of line, then 10 pixels of gap.

The second line uses a pattern of '8,2,5'. SVG dash patterns that have an odd number of members are doubled-up, so this becomes '8,2,5,8,2,5' ('10' in the example above becomes '10,10') - an 8 pixel line, 2 pixel gap, 5 pixel line, then the doubled part gives an 8 pixel gap, 2 pixel line, 5 pixel gap, before the pattern repeats.

Settings

These options are common to all graph types:

The following table lists the other options relevant to the line and scatter graph types - many of these options are also used by the bar graph types:

• ^[1]Not used by ScatterGraph or MultiScatterGraph.
• ^[2]The default value used by MultiLineGraph is 0.5.
• ^[3]The grid_enclose_* options are deprecated from version 2.2 - SVGGraph will always attempt to fit the graph within the grid
• ^[4]These options override SVGGraph's calculations for axis start, end and division values. See the axis and grid options page for more details.
• ^[5]The axis labelling options were added in version 2.6. For details, see the titles, labels and legends page.
• ^[6]Only used by ScatterGraph and MultiScatterGraph.

« Back to top of page Pie graphs »

Copyright © 2011, Goat 1000