SVGGraph Markers

« Return to SVGGraph page

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:


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.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 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.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);
 
$graph = new SVGGraph(650, 200, $settings);
$graph->colours = array(array('#e11','#fff'), array('#1b1','#fff'),
  array('#11e','#fff'), array('#e71','#fff'), array('#333','#fff'));
$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.

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.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);
 
$graph = new SVGGraph(650, 200, $settings);
$graph->colours = array(array('#e11','#fff'), array('#1b1','#fff'),
  array('#11e','#fff'), array('#e71','#fff'), array('#333','#fff'));
$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.)

« Back to top of page Guide or target lines »