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.

DoughRayMeSoFarLard01020304050
LineGraph
DoughRayMeSoFarLardTea01020304050
MultiLineGraph

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.

DoughRayMeSoFarLard01020304050
SteppedLineGraph
DoughRayMeSoFarLardTea01020304050
MultiSteppedLineGraph

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.

DoughRayMeSoFarLardTea020406080
StackedLineGraph

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:

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.

DoughRayMeSoFarLardTea01020304050
Line dash patterns
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.

Drawing shapes

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

Did you see that ludicrous display last night?020406080100120140160180200220240260280300075150225300
Line figures
line_figure = true
line_figure_closed = array(false, true)

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:

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
axis_colour "rgb(0,0,0)" Colour of axis lines and text.
axis_colour_h NULL Colour of horizontal axis.
axis_colour_v NULL Colour of vertical axis.
axis_double_x false Enables display of X axis at both sides of graph.
axis_double_y false Enables display of Y axis at both sides of graph.
axis_extend_bottom null Extends the bottom end of horizontal axes.
axis_extend_left null Extends the left side of horizontal axes.
axis_extend_right null Extends the right side of horizontal axes.
axis_extend_top null Extends the top end of horizontal axes.
axis_fallback_max 1 Sets a fallback value for the axis maximum when the graph contains all zero values.
axis_font "Courier New" Font for axis division labels.
axis_font_adjust 0.6 Font aspect ratio of axis division text.
axis_font_adjust_h NULL Font aspect ratio of horizontal axis division text.
axis_font_adjust_v NULL Font aspect ratio of vertical axis division text.
axis_font_h NULL Font for horizontal axis division labels.
axis_font_size 10 Font size for axis division labels.
axis_font_size_h NULL Font size for horizontal axis division labels.
axis_font_size_v NULL Font size for vertical axis division labels.
axis_font_v NULL Font for vertical axis division labels.
axis_font_weight "normal" Font weight for axis division labels.
axis_font_weight_h null Font weight for horizontal axis division labels.
axis_font_weight_v null Font weight for vertical axis division labels.
axis_label_position 0.5 Sets position of axis label as a fraction of the axis length.
axis_label_position_h null Sets position of horizontal axis label as a fraction of the axis length.
axis_label_position_v null Sets position of vertical axis label as a fraction of the axis length.
axis_levels_h null Sets the number of levels of horizontal axis division labels.
axis_levels_v null Sets the number of levels of vertical axis division labels.
axis_max_h NULL Maximum value for horizontal axis.
axis_max_v NULL Maximum value for vertical axis.
axis_min_h NULL Minimum value for horizontal axis.
axis_min_v NULL Minimum value for vertical axis.
axis_overlap 5 Distance axes extend past grid.
axis_pad_bottom 0 Inserts space between bottom axis and grid area.
axis_pad_left 0 Inserts space between left axis and grid area.
axis_pad_right 0 Inserts space between right axis and grid area.
axis_pad_top 0 Inserts space between top axis and grid area.
axis_right false Enables axis on right of grid.
axis_space 15 Space between axes on the right of the graph.
axis_stroke_width 2 Width of axis lines.
axis_stroke_width_h NULL Width of horizontal axis line.
axis_stroke_width_v NULL Width of vertical axis line.
axis_text_align null Sets the text alignment for axis division labels.
axis_text_align_h null Sets the text alignment for horizontal axis division labels.
axis_text_align_v null Sets the text alignment for vertical axis division labels.
axis_text_angle_h 0 Angle of horizontal axis division text.
axis_text_angle_v 0 Angle of vertical axis division text.
axis_text_back_colour null Background colour for axis division labels.
axis_text_back_colour_h null Background colour for horizontal axis division labels.
axis_text_back_colour_v null Background colour for vertical axis division labels.
axis_text_callback NULL Callback function for axis division text labels.
axis_text_callback_x NULL Callback function for X axis division text labels.
axis_text_callback_y NULL Callback function for Y axis division text labels.
axis_text_colour NULL Colour of axis division labels.
axis_text_colour_h NULL Colour of horizontal axis division labels.
axis_text_colour_v NULL Colour of vertical axis division labels.
axis_text_line_spacing null Sets line spacing for axis division labels.
axis_text_line_spacing_h null Sets line spacing for horizontal axis division labels.
axis_text_line_spacing_v null Sets line spacing for vertical axis division labels.
axis_text_location "grid" Position of axis text when graph contains negative numbers.
axis_text_location_h null Position of horizontal axis text when graph contains negative numbers.
axis_text_location_v null Position of vertical axis text when graph contains negative numbers.
axis_text_position "outside" Position of axis division text labels.
axis_text_position_h NULL Position of horizontal axis division text labels.
axis_text_position_v NULL Position of vertical axis division text labels.
axis_text_space 2 Space between axis division text and axis.
axis_text_space_h NULL Space between horizontal axis division text and axis.
axis_text_space_v NULL Space between vertical axis division text and axis.
axis_ticks_x null Specifies positions of axis tick marks for X-axis.
axis_ticks_y null Specifies positions of axis tick marks for Y-axis.
axis_tightness_x 0 Sets the algorithm used to choose X-axis divisions.
axis_tightness_y 1 Sets the algorithm used to choose Y-axis divisions.
axis_top false Switches the horizontal axis from the bottom of the grid to the top.
axis_zero_y true Allows graph to pick a non-zero value for bottom of Y-axis.
dataset_axis NULL Enables multiple Y-axes.
datetime_text_format NULL Date format for date/time axis.
datetime_week_start "monday" Week start day for date/time axis.
decimal_digits NULL Number of decimal digits in axis text labels.
decimal_digits_x NULL Number of decimal digits in X axis text labels.
decimal_digits_y NULL Number of decimal digits in Y axis text labels.
division_colour NULL Colour of axis division marks.
division_colour_h NULL Colour of horizontal axis division marks.
division_colour_v NULL Colour of vertical axis division marks.
division_size 3 Length of division marks.
division_size_h NULL Size of horizontal axis division marks.
division_size_v NULL Size of vertical axis division marks.
division_style "out" Style of axis division marks.
division_style_h NULL Style of horizontal axis division marks.
division_style_v NULL Style of vertical axis division marks.
force_block_label_x false Forces block-style labelling for X axis.
grid_back_colour NULL Colour of grid area background.
grid_back_opacity 1 Opacity of grid background fill.
grid_back_stripe false Displays grid background stripes.
grid_back_stripe_colour "rgb(240,240,240)" Colour of grid background stripes.
grid_back_stripe_opacity 1 Opacity of grid background stripes.
grid_bottom NULL Position of bottom of grid.
grid_clip_overlap_x 2 Sets the grid clipping overlap to the left and right sides.
grid_clip_overlap_y 10 Sets the grid clipping overlap above and below the grid area.
grid_colour "rgb(220,220,220)" Colour of grid lines.
grid_colour_h NULL Colour of vertical grid lines.
grid_colour_v NULL Colour of horizontal grid lines.
grid_dash NULL Grid lines dash pattern.
grid_dash_h NULL Grid vertical lines dash pattern.
grid_dash_v NULL Grid horizontal lines dash pattern.
grid_division_h NULL Division interval on horizontal axis.
grid_division_v NULL Division interval on vertical axis.
grid_left NULL Position of left side of grid.
grid_right NULL Position of right side of grid.
grid_straight false Enables straight grid lines on radar graph.
grid_stroke_width 1 Sets the thickness of grid lines.
grid_stroke_width_h null Sets the thickness of grid lines drawn from the horizontal axis.
grid_stroke_width_v null Sets the thickness of grid lines drawn from the vertical axis.
grid_subdivision_colour "rgba(220,220,220,0.5)" Colour of grid subdivision lines.
grid_subdivision_colour_h NULL Colour of vertical grid subdivision lines.
grid_subdivision_colour_v NULL Colour of horizontal grid subdivision lines.
grid_subdivision_dash NULL Grid subdivision lines dash pattern.
grid_subdivision_dash_h NULL Grid vertical subdivision lines dash pattern.
grid_subdivision_dash_v NULL Grid horizontal subdivision lines dash pattern.
grid_subdivision_stroke_width null Sets the thickness of grid subdivision lines.
grid_subdivision_stroke_width_h null Sets the thickness of vertical grid subdivision lines.
grid_subdivision_stroke_width_v null Sets the thickness of horizontal grid subdivision lines.
grid_top NULL Position of top of grid.
increment NULL X-axis increment for histograms.
label_colour "rgb(0,0,0)" Colour for axis label text.
label_colour_h NULL Colour for horizontal axis label text.
label_colour_v NULL Colour for vertical axis label text.
label_font "Arial" Font for axis labels.
label_font_h NULL Font for horizontal axis label.
label_font_size 10 Font size for axis labels.
label_font_size_h NULL Font size for horizontal axis label.
label_font_size_v NULL Font size for vertical axis label.
label_font_v NULL Font for vertical axis label.
label_font_weight "normal" Font weight for axis labels.
label_font_weight_h NULL Font weight for horizontal axis label.
label_font_weight_v NULL Font weight for vertical axis label.
label_h "" Text label for horizontal axis.
label_line_spacing null Sets line spacing for axis labels.
label_line_spacing_h null Sets line spacing for label on horizontal axis.
label_line_spacing_v null Sets line spacing for label on vertical axis.
label_space 6 Spacing around axis labels.
label_v "" Text label for vertical axis.
label_x "" Text label for X axis.
label_y "" Text label for Y axis.
limit_text_angle true Limits the angle of axis text to between -90° and +90°.
log_axis_x false Enables logarithmic scale for X-axis.
log_axis_x_base 10 Specifies logarithm base for use on logarithmic X-axis.
log_axis_y false Enables logarithmic Y-axis divisions.
log_axis_y_base 10 Base of the logarithmic axis scale.
minimum_grid_spacing 15 Minimum distance between grid/axis divisions.
minimum_grid_spacing_h NULL Minimum distance between horizontal axis divisions.
minimum_grid_spacing_v NULL Minimum distance between vertical axis divisions.
minimum_subdivision 5 Minimum distance between subdivisions.
minimum_units_y 0 Minimum units to display on Y axis.
show_axes true Enables axis display.
show_axis_h true Enables horizontal axis line.
show_axis_text_h true Enables labelling of horizontal axis divisions.
show_axis_text_v true Enables labelling of vertical axis divisions.
show_axis_v true Enables vertical axis line.
show_divisions true Enables axis division marks.
show_grid true Disables displaying grid.
show_grid_h true Disables displaying horizontal grid lines.
show_grid_subdivisions false Enables displaying grid subdivisions.
show_grid_v true Disables displaying vertical grid lines.
show_subdivisions false Enables axis subdivision marks.
show_x_axis true Enables X-axis on radar graphs.
subdivision_colour NULL Colour of axis subdivision marks.
subdivision_colour_h NULL Colour of horizontal axis subdivision marks.
subdivision_colour_v NULL Colour of vertical axis subdivision marks.
subdivision_h NULL Horizontal axis subdivision interval.
subdivision_size 2 Length of axis subdivision marks.
subdivision_size_h NULL Length of horizontal axis subdivision marks.
subdivision_size_v NULL Length of vertical axis subdivision marks.
subdivision_style "out" Style of axis subdivision marks.
subdivision_style_h NULL Style of horizontal axis subdivision marks.
subdivision_style_v NULL Style of vertical axis subdivision marks.
subdivision_v NULL Vertical axis subdivision interval.
text_classes_file null Specifies an INI file for use with text classes.
units_before_x NULL Units shown before value on X-axis.
units_before_y NULL Units shown before value on Y-axis.
units_x NULL Units shown after value on X-axis.
units_y NULL Units shown after value on Y-axis.
Grid-based graph options

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

Marker options - Hide table

OptionDefaultDescription
block_position_markers false Positions markers between grid points.
figure null Defines a shape or group of shapes for reuse.
gantt_milestone_colour null Sets the colour of milestone markers on Gantt charts.
gantt_milestone_size 6 Sets the size of milestone markers on Gantt charts.
gantt_milestone_type "diamond" Sets the type of marker used for milestones on Gantt charts.
marker_angle 0 Sets a rotation angle for the markers.
marker_colour NULL Colour of markers.
marker_opacity 1 Sets the opacity of the markers.
marker_size 5 Size of markers.
marker_solid true Disables use of patterns and gradients in markers.
marker_stroke_colour NULL Colour of marker outlines.
marker_stroke_width 1 Thickness of marker outlines.
marker_type "circle" Shape of markers.
shape NULL Adds custom shapes to the graph.
Marker options

The best-fit line 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 Enables best-fit lines.
best_fit_above false Depth of best-fit lines.
best_fit_colour "rgb(0,0,0)" Colour of best-fit lines.
best_fit_dash NULL Best-fit lines dash pattern.
best_fit_opacity 1 Opacity of best-fit lines.
best_fit_project NULL Best-fit line projections.
best_fit_project_colour NULL Colour of best-fit line projections.
best_fit_project_dash 4 Dash pattern for best-fit line projections.
best_fit_project_opacity NULL Opacity of best-fit line projections.
best_fit_project_width NULL Thickness of best-fit line projections.
best_fit_range NULL Range for best-fit lines.
best_fit_type NULL Limits type of function used for curved best-fit lines.
best_fit_width 1 Thickness of best-fit lines.
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[1] false If true, the area under the line is filled with colour or gradient.
fill_opacity[2] 1 Opacity of the filled area.
line_figure false Set to TRUE to allow drawing shapes on line graphs.
line_figure_closed false Set to TRUE to close the shape path.
line_breaks false Set to TRUE to allow lines to break on NULL values.
line_curve 0 Sets the curvature of the lines.
Line graph options

« Back to top of page Bar and line graphs »

This site uses cookies - details here.