SVGGraph Scatter Graphs

« Return to SVGGraph page

Skip to:

SVGGraph currently contains the ScatterGraph and MultiScatterGraph PHP classes for drawing SVG scatter graphs. An example of each type is shown below.


ScatterGraph
MultiScatterGraph

Example code

Here are the settings and PHP code used to generate the multi-scatter graph 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,
  'marker_colour'     => array('red', 'blue', 'green', 'orange'),
  'marker_type'       => array('square', 'triangle', 'x', 'cross'),
  'marker_size'       => array(2, 3, 4, 3),
  'scatter_2d'        => true,
  'best_fit'          => 'straight', 'best_fit_dash'     => '2,2',
  'best_fit_colour'   => array('red', 'blue', 'green', 'orange'),
);
 
$graph = new SVGGraph(300, 200, $settings);
 
$graph->Values($values);
$graph->Render('MultiScatterGraph');

This is not the actual code used by the graph - most of the example graphs on these pages are generated by a single PHP script. The scatter graph data is generated at random by a simple function, not shown here.

MultiScatter styling

The marker_size, marker_type, marker_colour, marker_stroke_colour and marker_stroke_width options all support the use of arrays to specify different options for each data set, as explained on the line graphs page and demonstrated in the example above.

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

Scatter and MultiScatter graph 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.

Best-fit or trend lines

Version 2.10 of SVGGraph added a new option for the scatter graphs, best_fit - at the moment the only valid option (other than the default of null) is “straight” for drawing a straight line through the points of a data set. In version 2.21, best-fit line support was extended to the line graphs as well.

For some extra control over the appearance of the line there are some more options: best_fit_colour, best_fit_width and best_fit_dash. All of these options (and best_fit itself) support using arrays to specify different options for each data set.


Best-fit lines

This example uses four datasets, each with its own best-fit line. For clarity I have used the same colour for the best-fit lines and markers from the same dataset. The options required for this are shown below.

// The datasets in order are red, green, blue and grey
$settings = array(
  'best_fit' => 'straight',
  'best_fit_colour' => array('#e11', '#1b1', '#11e', '#888'),
  'best_fit_range' => array(array(NULL, NULL), array(1, 6), array(0, 9)),
  'best_fit_project' => 'both',
  'best_fit_project_opacity' => 0.5,
);

Datasets 0 and 3 (red and grey) are using the full width of the grid area for calculating the line, specified using a range of array(NULL, NULL). Dataset 1 (green) is using a best_fit_range of array(1, 6) to limit the markers used in calculating the angle of the line. I've added a pale green shape to highlight the area here. Only the green markers inside the shaded area are used to calculate the line angle, those outside are ignored.

The best_fit_project option is set to both to continue all the lines outside their ranges. For datasets 0 and 3 this makes no difference because they have no ranges set, but for datasets 1 and 2 the projected part is visible as the dashed line segments, with its opacity reduced to 50% using best_fit_project_opacity.

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:

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 scatter graphs:

Scatter graph options - Hide table

OptionDefaultDescription
scatter_2d NULL If true data is in (x,y) pairs, as described above
Scatter graph options

« Back to top of page Radar graphs »