SVGGraph Markers

« Return to SVGGraph page

Skip to:

The line, scatter and radar graph types all support the use of markers at data points on the graph. The default shape for markers is a circle, but there are several other shapes available by setting the marker_type option, and some other options for modifying the marker appearance.

Marker types

Here is a MultiScatterGraph that displays all the types of marker available:

circlesquaretrianglecrossxpentagondiamondhexagonoctagonasteriskstarthreestarfourstareightstar
Marker types

The code below shows how the marker types are set using an array so that each data set will use a different marker.

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

$settings = array( /* settings for grid, legend */ );
$values = array( /* values are generated */ );

$settings['marker_size'] = 10;
$settings['marker_type'] = array(
  "circle", "square", "triangle", "cross", "x",
  "pentagon", "diamond", "hexagon", "octagon",
  "asterisk", "star", "threestar",
  "fourstar", "eightstar"
);

$graph = new Goat1000\SVGGraph\SVGGraph(650, 400, $settings);
$graph->colours(array('#e11','#1b1','#11e','#e71','#333'));
$graph->values($values);
$graph->render('MultiScatterGraph');

The default marker size is 5 pixels, so I have increased their size in the example to 10 pixels to make them easier to see.

Version 2.24 of SVGGraph adds in support for custom SVG markers. The content of a marker shape should be specified in the marker_type string, for example:

// marker is a diamond 6 pixels high and 4 pixels wide
$settings['marker_type'] = '<path d="M0 -3L2 0L0 3L-2 0z"/>';

Note: the string must begin with the “<” character for SVGGraph to recognise it as a custom marker. The marker is positioned with its hotspot at (0,0) so your SVG code should centre the marker around the origin.

Marker styling

Apart from the shape of the marker, you can also set the colour, its size, and add a different-coloured border.

Marker styling

This example uses a StackedLineGraph to display the effects of changing the marker_size, marker_colour, marker_stroke_colour and marker_stroke_width options.

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

$settings = array( /* settings for grid */ );
$values = array( /* values are generated */ );

$settings["marker_type"] = array('square', 'circle');
$settings["marker_size"] = array(3, 4, 5, 6, 8);
$settings["marker_colour"] = array('#e11', '#1b1', 'red', 'green', 'blue');
$settings["marker_stroke_colour"] = array(null, '#fff', '#0f0', '#000', '#f00');
$settings["marker_stroke_width"] = array(null, 1, 2, 3, 4);

$colours = array(
  array('#e11','#fff'), array('#1b1','#fff'),
  array('#11e','#fff'), array('#e71','#fff'),
  array('#333','#fff')
);

$graph = new Goat1000\SVGGraph\SVGGraph(650, 200, $settings);
$graph->colours($colours);
$graph->values($values);
$graph->render('StackedLineGraph');

The marker_type is an array containing square and circle, so the markers for each data set will alternate between the two. marker_size goes from 3 pixels for the bottom line to 8 pixels on the top line. The default size of 5 pixels is used for the middle, blue line.

The marker_colour is set to the same shades of red and green as their lines for the bottom two data sets, and to contrasting colours for the other three. Not setting marker_colour would leave all the markers the same colour as their lines.

marker_stroke_colour and marker_stroke_width are used to draw the borders around the markers on the four upper lines. The bottom line's markers do not have a border because the colour is NULL - SVGGraph will only draw a border when the colour is set.

Version 2.24 adds the marker_opacity and marker_angle options for specifying the opacity of the markers and an angle of rotation too, and version 3.4 adds the marker_solid option for enabling the use of patterns and gradients for filling markers.

Image markers

Version 2.16 of SVGGraph adds the ability to use images as graph markers, as demonstrated by the graph below.

Image markers

The image to use for each marker is specified in the marker_type option by the string “image:” followed by the path to the image file. If you are using a relative path, you should note that the path is relative to the location of the PHP file generating the SVG and not to the page that includes the SVG output. (Though of course they could be the same file.)

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

$settings = array( /* settings for grid */ );
$values = array( /* values are generated */ );

$settings["marker_type"] = array(
  'image:../images/64x64/icon-11.png',
  'image:../images/64x64/icon-06.png',
  'image:../images/64x64/icon-08.png',
  'image:../images/64x64/icon-16.png',
);
$settings["marker_size"] = array(15, 14, 15, 16);

$colours = array(
  array('#e11','#fff'), array('#1b1','#fff'),
  array('#11e','#fff'), array('#e71','#fff'),
  array('#333','#fff')
);

$graph = new Goat1000\SVGGraph\SVGGraph(650, 200, $settings);
$graph->colours($colours);
$graph->values($values);
$graph->render('StackedLineGraph');

The example uses four icons with their sizes set using the marker_size option, since the default of 5 pixels would make them tiny. The marker_colour, marker_stroke_colour and marker_stroke_width options are not used with image markers.

All the usual web image formats are supported, including animated GIFs and other SVG files. If you really wanted to, you could use SVGGraph graphs as the markers on other SVGGraph graphs (but if you get yourself into an Inception-like situation I won't be there to pull you out.)

Figure markers

Figure markers (added in version 2.30) draw user-defined shapes as the markers. The figures must be defined using the figure option, described on the Shapes page.

Figure markers

To use a figure as a marker, specify the marker type as “figure:” followed by the name of the figure you want to use.

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

$settings = array( /* settings for grid */ );
$values = array( /* values are generated */ );

$settings["figure"] = array(
  array('box-outer',
    array('polyline', 'points' => array(
      -10, -10,
      -10, 10,
      10, 10,
      10, -10,
      -6, -22), 'stroke-width' => 2
    ),
  ),
  array('box-blue',
    array('rect', 'x' => -10, 'y' => -10, 'width' => 20, 'height' => 20,
      'fill' => array('#33e', '#eef'), 'stroke' => 'none'),
    array('figure', 'x' => 0, 'y' => 0, 'name' => 'box-outer'),
  ),
  array('box-red',
    array('rect', 'x' => -10, 'y' => -10, 'width' => 20, 'height' => 20,
      'fill' => array('#e33', '#e66'), 'stroke' => 'none'),
    array('figure', 'x' => 0, 'y' => 0, 'name' => 'box-outer'),
  ),
  array('box-yellow',
    array('rect', 'x' => -10, 'y' => -10, 'width' => 20, 'height' => 20,
      'fill' => array('#ff1', '#ff8'), 'stroke' => 'none'),
    array('figure', 'x' => 0, 'y' => 0, 'name' => 'box-outer'),
  ),
  array('box-purple',
    array('rect', 'x' => -10, 'y' => -8, 'width' => 20, 'height' => 18,
      'fill' => array('#f0f', '#9cf'), 'stroke' => 'none'),
    array('figure', 'x' => 0, 'y' => 0, 'name' => 'box-outer'),
  ),
);

$settings["marker_type"] = array(
  'figure:box-blue',
  'figure:box-red',
  'figure:box-yellow',
  'figure:box-purple',
);

$colours = array(
  array('#e11','#fff'), array('#1b1','#fff'),
  array('#11e','#fff'), array('#e71','#fff'),
  array('#333','#fff')
);

$graph = new Goat1000\SVGGraph\SVGGraph(650, 200, $settings);
$graph->colours($colours);
$graph->values($values);
$graph->render('StackedLineGraph');

This example defines five figures and uses four of them for the marker types. The fifth type is used internally by all the other figures to draw the same outline around different coloured boxes.

« Back to top of page Guide/target lines and averages »

This site uses cookies - details here.