SVGGraph Line Graphs

« Return to SVGGraph page

Skip to:

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

LineGraph
MultiLineGraph
StackedLineGraph
BarAndLineGraph

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.

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.

The BarAndLineGraph is a GroupedBarGraph and a MultiLineGraph on the same graph, with an option specifying which datasets are bars and which are lines.

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',
  '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.

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:

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.

BarAndLineGraph

The BarAndLineGraph must be provided with the line_dataset option to specify which of the datasets should be drawn as a line instead of bars. The default is “1” to show the first dataset as bars, the second dataset as a line and any other dataset as bars. To configure the appearance of the bars, refer to the options on the Bar graphs 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.

line_dash = array('10', '8,2,5')

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.

Settings

These options are common to all graph types:

General options + Show table

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

Grid-based graph options - Hide table

OptionDefaultDescription
show_grid true Grid on/off option
show_grid_h true Show horizontal grid lines
show_grid_v true Show vertical grid lines
show_grid_subdivisions false Enables grid subdivisions
show_axes true Axes on/off option
show_axis_h true Show the horizontal axis line or not
show_axis_v true Show the vertical axis line or not
show_divisions true Axis division points on/off
show_subdivisions false Enables axis subdivisions
show_axis_text_h true Horizontal axis division numbering or labels on/off
show_axis_text_v true Vertical axis division numbering on/off
decimal_digits NULL Set to a number of digits to show for axis text
decimal_digits_x NULL Set to a number of digits to show for X axis text
decimal_digits_y NULL Set to a number of digits to show for Y axis text
minimum_grid_spacing 15 Minimum distance between grid/axis lines
minimum_grid_spacing_h NULL Minimum distance between divisions on horizontal axis
minimum_grid_spacing_v NULL Minimum distance between divisions on vertical axis
minimum_subdivision 5 Minimum distance between subdivisions
minimum_units_y 0 The minimum units to display on the Y axis. Values other than 0 or 1 may cause scaling problems
axis_min_h[3] NULL Minimum extent of X-axis
axis_max_h[3] NULL Maximum extent of X-axis
axis_min_v[3] NULL Minimum extent of Y-axis
axis_max_v[3] NULL Maximum extent of Y-axis
grid_left NULL Position of left side of grid and axis area, overriding automatic positioning.
grid_top NULL Position of top of grid area, overriding automatic positioning.
grid_right NULL Position of right side of grid area. Use a negative value to measure from the right of the SVG document.
grid_bottom NULL Position of bottom of grid area. Use a negative value to measure from the bottom of the SVG document.
grid_division_h[3] NULL Grid interval on X-axis
grid_division_v[3] NULL Grid interval on Y-axis
subdivision_h NULL Subdivision grid interval on X-axis
subdivision_v NULL Subdivision grid interval on Y-axis
grid_back_colour NULL Colour of grid area background. Supports gradients and patterns.
grid_back_opacity 1 Opacity of grid background fill
grid_back_stripe false If enabled, displays striped background at grid intervals
grid_back_stripe_colour rgb(240,240,240) Colour of grid stripes. Either a single colour to alternate with clear, or an array of colours to cycle through. Supports gradients and patterns.
grid_back_stripe_opacity 1 Opacity of grid stripes
grid_colour rgb(220,220,220) Colour of grid lines
grid_colour_h NULL Colour of grid lines from horizontal axis
grid_colour_v NULL Colour of grid lines from vertical axis
grid_dash NULL Grid lines dash pattern
grid_dash_h NULL Grid lines dash pattern from horizontal axis
grid_dash_v NULL Grid lines dash pattern from vertical axis
grid_subdivision_colour rgba(220,220,220,0.5) Colour of grid subdivision lines
grid_subdivision_colour_h NULL Colour of grid subdivision lines from horizontal axis
grid_subdivision_colour_v NULL Colour of grid subdivision lines from vertical axis
grid_subdivision_dash NULL Grid subdivision lines dash pattern
grid_subdivision_dash_h NULL Grid subdivision lines dash pattern from horizontal axis
grid_subdivision_dash_v NULL Grid subdivision lines dash pattern from vertical axis
axis_colour rgb(0,0,0) Colour of axis lines
axis_stroke_width 2 Width of axis lines
axis_overlap 5 Amount to extend axes past graph area
axis_font monospace Font for axis division text
axis_font_h NULL Font for horizontal axis division text
axis_font_v NULL Font for vertical axis division text
axis_font_size 10 Axis division font size
axis_font_size_h NULL Axis division font size for horizontal axis
axis_font_size_v NULL Axis division font size for vertical axis
axis_font_adjust 0.6 Approx ratio of font width to height
axis_font_adjust_h NULL Approx ratio of font width to height for horizontal axis
axis_font_adjust_v NULL Approx ratio of font width to height for vertical axis
axis_text_position outside Position of axis text relative to grid area ("inside" or "outside")
axis_text_position_h NULL Position of axis text for horizontal axis
axis_text_position_v NULL Position of axis text for vertical axis
axis_text_colour rgb(0,0,0) Colour of axis division text
axis_text_colour_h NULL Colour of horizontal axis division text
axis_text_colour_v NULL Colour of vertical axis division text
axis_text_space 2 Space between axis division text and axis/divisions
axis_text_space_h NULL Space between horizontal axis division text and axis/divisions
axis_text_space_v NULL Space between vertical axis division text and axis/divisions
axis_text_angle_h 0 Angle of text on horizontal axis (in degrees, positive or negative)
axis_text_angle_v 0 Angle of text on vertical axis (in degrees, positive or negative)
axis_text_callback NULL Name of callback function for formatting axis text. The function will be called with one argument: callback($value). The function should return a text string to display on the axis.
axis_text_callback_x NULL Name of callback function for formatting X-axis text. The function will be called with one argument: callback($value). The function should return a text string to display on the axis.
axis_text_callback_y NULL Name of callback function for formatting Y-axis text. The function will be called with one argument: callback($value). The function should return a text string to display on the axis.
log_axis_y false Enables logarithmic Y-axis divisions
log_axis_y_base 10 Base of the logarithm (must be > 1)
division_style out Type of axis division lines to draw (options are "out", "in", "over", "infull", "overfull" and "none")
division_style_h NULL Type of division lines to draw on horizontal axis
division_style_v NULL Type of division lines to draw on vertical axis
division_size 3 Length of division lines
division_size_h NULL Length of division lines on horizontal axis
division_size_v NULL Length of division lines on vertical axis
division_colour NULL Colour of division lines, or NULL to use axis colour
division_colour_h NULL Colour of division lines on horizontal axis
division_colour_v NULL Colour of division lines on vertical axis
subdivision_style out Type of subdivision lines to draw (options are "out", "in", "over", "infull", "overfull" and "none")
subdivision_style_h NULL Type of subdivision lines to draw on horizontal axis
subdivision_style_v NULL Type of subdivision lines to draw on vertical axis
subdivision_size 2 Size of axis subdivision markings
subdivision_size_h NULL Size of axis subdivision markings on horizontal axis
subdivision_size_v NULL Size of axis subdivision markings on vertical axis
subdivision_colour division_colour Colour of axis subdivision markings
subdivision_colour_h NULL Colour of axis subdivision markings on horizontal axis
subdivision_colour_v NULL Colour of axis subdivision markings on vertical axis
label_h[4] Horizontal axis label
label_v[4] Vertical axis label
label_x[4] X-axis label
label_y[4] Y-axis label
label_space[4] 6 Spacing around axis labels
label_font[4] sans-serif Font for axis labels
label_font_size[4] 10 Font size for axis labels
label_font_weight[4] normal Font weight for axis labels
label_colour[4] rgb(0,0,0) Colour for axis label text
units_x NULL Units shown after value on X-axis
units_before_x NULL Units shown before value on X-axis
units_y NULL Units shown after value on Y-axis
units_before_y NULL Units shown before value on Y-axis
guideline[5] NULL One or more guide/target lines - see the guide or target lines page for details of how this works
guideline_above[5] false Whether guide lines should be above or below graph (default is below)
guideline_colour[5] rgb(0,0,0) Colour of guide lines
guideline_opacity[5] 1 Opacity of guide line
guideline_length[5] NULL Length of guide line in pixels (+ve from left or bottom, -ve from right or top)
guideline_length_units[5] NULL Length of guide line in graph units (+ve from left or bottom, -ve from right or top)
guideline_stroke_width[5] 1 Width of guide lines
guideline_dash[5] 4,3 Guide line dash pattern
guideline_font[5] sans-serif Font for guide line titles
guideline_font_size[5] 10 Guide line title font size
guideline_font_adjust[5] 0.6 Guide line title font width adjustment ratio
guideline_font_weight[5] normal Guide line title font weight
guideline_text_position[5] inside top right Position of title relative to guide line. Supports "inside", "outside", "top", "bottom", "left", "right", and X and Y offsets.
guideline_text_align[5] NULL Alignment of guide title text ("left", "right" or "centre")
guideline_text_padding[5] 5 Space between guide line and title
guideline_text_colour[5] NULL Colour of guide line title. Defaults to guideline_colour
guideline_text_opacity[5] guideline_opacity Opacity of guideline title
guideline_text_angle[5] 0 Angle of guideline title text (in degrees, positive or negative)
crosshairs[6] false Show cross-hairs that follow mouse cursor
crosshairs_show_h[6] true Show horizontal cross-hair
crosshairs_show_v[6] true Show vertical cross-hair
crosshairs_stroke_width[6] 1 Thickness of cross-hairs
crosshairs_stroke_width_h[6] NULL Thickness of horizontal cross-hair
crosshairs_stroke_width_v[6] NULL Thickness of vertical cross-hair
crosshairs_dash[6] NULL Dash pattern for cross-hairs
crosshairs_dash_h[6] NULL Dash pattern for horizontal cross-hair
crosshairs_dash_v[6] NULL Dash pattern for vertical cross-hair
crosshairs_colour[6] black Colour of cross-hairs
crosshairs_colour_h[6] NULL Colour of horizontal cross-hair
crosshairs_colour_v[6] NULL Colour of vertical cross-hair
crosshairs_opacity[6] 1 Opacity of cross-hairs
crosshairs_opacity_h[6] NULL Opacity of horizontal cross-hair
crosshairs_opacity_v[6] NULL Opacity of vertical cross-hair
crosshairs_show_text[6] true Show coordiates with cross-hairs
crosshairs_text_precision_h[6] NULL Number of decimal places for horizontal coordinate
crosshairs_text_precision_v[6] NULL Number of decimal places for vertical coordinate
crosshairs_text_colour[6] black Colour of coordinates text
crosshairs_text_stroke_width[6] NULL Thickness of box around coordinates (default none)
crosshairs_text_back_colour[6] #fc0 Colour of coordinates box background
crosshairs_text_font[6] Courier Font for coordinates
crosshairs_text_font_size[6] 10 Font size for coordinates
crosshairs_text_font_weight[6] normal Font weight for coordinates
crosshairs_text_padding[6] 1 Distance between coordinates text and edge of box
crosshairs_text_space[6] 3 Distance between coordinates box and cross-hairs
crosshairs_text_round[6] 0 Border radius for coordinates box
datetime_week_start monday Day of the week for starting date/time axis weeks and fortnights
datetime_text_format NULL The date() format string to use for date/time axis text. This can be an associative array of formats to use depending on the division units, for example array("day" => "j M Y", "month" => "F Y").
Grid-based graph options

These options are common to all line, scatter and radar graphs:

Marker options - Hide table

OptionDefaultDescription
marker_size[7] 5 Size of point markers
marker_type circle Type of marker to use (the available marker shapes are "circle", "square", "triangle", "cross", "x", "pentagon", "diamond", "hexagon", "octagon", "asterisk", "star", "threestar", "fourstar" and "eightstar")
marker_colour NULL Colour of marker (NULL to use same as line)
marker_stroke_colour NULL Colour of marker outline (NULL = no outline)
marker_stroke_width 1 Thickness of marker outline
Marker options

These options are common to all line and scatter graphs, and are demonstrated on the scatter graphs page.

Best-fit options - Hide table

OptionDefaultDescription
best_fit NULL Set to "straight" to draw a straight line through the data points.
best_fit_colour #000 Colour of the best-fit line.
best_fit_width 1 Width of the best-fit line in pixels.
best_fit_dash NULL Dash pattern for the best-fit line.
best_fit_opacity 1 Opacity of best-fit line.
best_fit_above false Set to true to draw the best-fit lines on top of the markers.
best_fit_range NULL Limit the best-fit line to this range. Option value must be an array containing the start and end of the range, e.g. array(0, 8). Use NULL values to start or end at the grid edge.
best_fit_project NULL When best_fit_range is used, this option can be used to project the best-fit line past the end of the range. Available options are "start", "end" and "both".
best_fit_project_colour NULL Colour of projected part of line, NULL for same colour as range.
best_fit_project_width NULL Width of projected part of line, NULL for same width as range.
best_fit_project_dash 4 Dash pattern for projected part of line.
best_fit_project_opacity NULL Opacity of projected part of line, NULL for same opacity as range.
Best-fit options

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

Line graph options - Hide table

OptionDefaultDescription
line_stroke_width 2 Thickness of graph line
line_dash NULL Line dash pattern
fill_under[8] false If true, the area under the line is filled with colour or gradient
fill_opacity[9] 1 Opacity of the filled area
line_dataset[10] 1 A dataset number (or array of dataset numbers) to display as lines instead of bars
Line graph options

« Back to top of page Scatter graphs »