SVGGraph Line Graphs

« Return to SVGGraph page

Skip to:

• Multi-line and stacked line options
• Line dash pattern
• Drawing shapes
• General options
• Grid-based graph options
• Marker options
• Best-fit options
• Line graph options

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

The LineGraph class displays a single set of data as a joined line. The example above uses the fill_under option to fill the area between the data line and the X-axis.

The MultiLineGraph displays multiple data sets as lines drawn one on top of another, starting with the first data set as the bottom layer. For this example the line_curve option is used to join the points with curved lines.

The SteppedLineGraph and MultiSteppedLineGraph types display the data using a stepped line. The only difference with the non-stepped line graphs is the shape of the line.

The StackedLineGraph displays multiple data sets with their values added together. The fill_under option is enabled by default, though the filled area is between the data lines instead of between the data line and the X-axis.

Example code

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

<?php
require_once 'SVGGraph/autoloader.php';

$settings = array(
  'back_colour'       => '#eee',
  'stroke_colour'     => '#000',
  'back_stroke_width' => 0,
  'back_stroke_colour'=> '#eee',
  'axis_colour'       => '#333',
  'axis_overlap'      => 2,
  'axis_font'         => 'Arial',
  '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 Goat1000\SVGGraph\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.

MultiLineGraph and StackedLineGraph options

To specify different styling for each line on these types of graph, several of the options support using arrays of values. The options that support arrays are:

• line_stroke_width
• line_dash
• fill_under
• fill_opacity
• marker_size
• marker_type
• marker_colour
• marker_stroke_colour
• marker_stroke_width

These work in a similar way to the colours array - for example, if you have three data sets and your marker_size is set to array(3, 6) then the first line markers will be 3 pixels in size, the second 6 pixels in size, and the markers on the third line will loop back to 3 pixels in size.

For more details and examples of the marker options, see the markers page.

Line dash pattern

SVGGraph version 2.5 added the line_dash option, which specifies a pattern of dashes to use for the graph data lines.

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.

Note: the line dash patterns are strings that look like arrays, and not actual arrays!

The dotted red and blue lines are best fit or trend lines, described in detail on the scatter graphs page.

Drawing shapes

From version 2.27 SVGGraph has an option that allows you to draw shapes using line graphs, “line_figure”.

Setting the line_figure option to true makes SVGGraph's line graphs behave differently - repeated keys are allowed, and the data values are not sorted. This means you can draw lines between points that share the same X value, and also draw lines from right to left.

Each dataset defines the points of one shape, and the fill_under option can be used to fill the shape with all the usual colours, patterns and gradients. The last segment of the line can be closed automatically using the line_figure_closed option, which is enabled for the ball drawn by the second dataset in the example above.

To get shape data into the graph, I recommend using structured data. It is possible to draw some shapes without using structured data, but it makes things a lot harder.

$settings = array(
 'line_figure' => true,
 'structure' => array('key' => 0, 'value' => array(1, 2),
);

$values = array(
 array(10, 10),
 array(10, 20),
 array(20, 20),
 array(20, 10),
 array(15, 2 => 15),
 array(20, 2 => 30),
 array(40, 2 => 10),
 array(15, 2 => 50),
);

This section of code shows how you can use structured data to draw two shapes, a rectangle in dataset 0 (data with key 0 and value 1) and another shape in dataset 1 (data with key 0 and value 2). Even in this simple example the key 20 is repeated, which would not be possible without using structured data.

Settings

These options are common to all graph types:

This table lists the options that are common to all the grid-based graph types - the options for grid spacing, axis labelling, etc:

These are the marker-related options from the options list:

The best-fit line options are common to all line and scatter graphs, and are demonstrated on the scatter graphs page.

The options in this table are for use with the line graphs:

• ^[1]For StackedLineGraph the fill_under option defaults to TRUE.
• ^[2]The default opacity value used by MultiLineGraph is 0.5 to ensure data points are visible through the filled area.

« Back to top of page Bar and line graphs »

Copyright © 2023, Goat 1000