SVGGraph Scatter Graphs

« Return to SVGGraph page

Skip to:

• MultiScatter styling
• Scatter graph data
• Best-fit or trend lines
• General options
• Grid-based graph options
• Marker options
• Best-fit options
• Scatter graph options

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

Example code

Here are the settings and PHP code used to generate the multi-scatter graph 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,
  '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 Goat1000\SVGGraph\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 Goat1000\SVGGraph\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 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 Goat1000\SVGGraph\SVGGraph(300, 200, $settings);
$graph->values($values);
$graph->render('ScatterGraph');

Note: to use data in this format you must set the scatter_2d option to true; none of the other graph types support data in this format. The scatter_2d format has been superseded by the structured data format, which would look like this:

$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['structure'] = array(
  'key' => 0,
  'value' => 1
);

$graph = new Goat1000\SVGGraph\SVGGraph(300, 200, $settings);
$graph->values($values);
$graph->render('ScatterGraph');

The $values array is the same, but the scatter_2d option has been replaced by the structure option, describing how the data values are arranged.

Best-fit or trend lines

Version 2.10 of SVGGraph added a new option for the scatter graphs, best_fit - this defaults to null for no best-fit line, though it may be set to either “straight” or “curve” to produce either straight or curved lines. Curved line support was added in version 3.20 and best-fit line support was added for line graphs in version 2.21.

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.

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_colour' => 'fillColour',
  '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.

Curved best-fit lines

The example below shows the same data with the best_fit option set to “curve”. The graph is produced using random points, so drawing a curved line through them doesn't make much sense, but I have done it to show how it looks.

All of these lines are using the default, “quintic” curve type, though that can be changed using the best_fit_type option.

Using fillColour and fill

In earlier versions you needed to specify the colours of the lines explicitly, but from version 3.5 the fillColour value can be used to make the lines match the datasets. You can also use fillColour separately for the best_fit_project_colour option, but I don't recommend using fill for either option (because gradients applied to vertical or horizontal stroked lines make the lines disappear - that's a weird SVG thing, not something I've done).

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:

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

« Back to top of page Radar graphs »

Copyright © 2021, Goat 1000