SVGGraph Markers
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:
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.
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.
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.
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.