SVGGraph background image support
From version 2.2, SVGGraph supports using an image for the graph background. The examples on this page demonstrate what can be done with it.
Opacity
The back_image_opacity option modifies the opacity of the
background image. The "SVGGraph" image used in these examples is a PNG with an
alpha channel and a predominantly transparent background. The value given for
the SVGGraph back_colour (in this case '#333') shows
through the transparent areas.
back_image_opacity = 1.0(default value)
back_image_opacity = 0.3
Modes
There are three different modes available for how the image will be scaled
and/or stretched. The first and default mode is auto:
Auto
back_image_mode = auto
When back_image_mode is set to auto, the image is shown
using the correct aspect ratio, and fitted within a box with dimensions set
by the back_image_width and back_image_height
options. This box may be positioned using the back_image_left
and back_image_top options.
back_image_mode = auto(default mode)
back_image_width = 100
back_image_width = 100back_image_left = 50back_image_top = 60
For simplicity these captions are using pseudocode - values should be properly
specified as elements of the settings array passed into the SVGGraph constructor,
e.g. $settings['back_image_mode'] = 'auto';
The second background image mode is stretch:
Stretch
back_image_mode = stretch
With back_image_mode set to stretch, the image is
stretched non-uniformly to fit the whole rectangle specifed by the
back_image_width and back_image_height
options. As with auto mode, the position of the box is controlled
by the back_image_left and back_image_top options.
back_image_mode = stretch
back_image_mode = stretchback_image_width = 100
back_image_mode = stretchback_image_width = 100back_image_left = 50back_image_top = 60
And finally tile mode:
Tile
back_image_mode = tile
As with auto mode, the image is uniformly stretched to fit the
box specified with the back_image_width and back_image_height
options. The box is then used in an SVG <pattern> to tile the
image across the whole of the background.
The back_image_left and back_image_top options may
be used to offset the image box, as in the third example below.
back_image_mode = tile
back_image_mode = tileback_image_height = 60
back_image_mode = tileback_image_width = 100back_image_height = 60back_image_left = 50back_image_top = 30
In the first example above, no tiling takes place - this is because neither the width or height have been specified, therefore the image box takes up the whole of the SVG document.
In the second example above, the image height has been set so that the image is tiled vertically, and in the third example both width and height are set to tile the image in both directions.