How to use the background layers in your SVG charts

Share RGraph:   Share or Like RGraph on Facebook!

Summary
There are a number (10 by default) of background 'layers' available to you to use in your SVG charts - these are achieved by using the SVG <g> element.

SVG has no concept of layers. So elements cannot be moved "to the back" of things that have been added previously. Elements that you add are simply appended and appear "on top" of anything that's been added previously.

Pseudo SVG layers with groups

There is a hack that is both simple to write and achieve. This method is to use groups (<g> tags). Simply add the group to the scene before anything else, and then when you want to add new elements at the back of what you've drawn, append it this group. Example code would look like this:

<svg id="mysvg" width="300" height="300" style="border: 1px solid gray" xmlns="http://www.w3.org/2000/svg">
    
    <!-- This is the background "layer" -->
    <g id="svg-background-group"></g>
    
    <!-- A rect that we can add somethind to the back of -->
    <rect x="10" y="10" width="150" height="150" fill="red"></rect>
</svg>

<button onclick="append()" style="font-size: 16pt">Add a green circle at the back</button>

And the JavaScript is thus (it uses the RGraph .create() function for convenience only - there's no monkey business going on!).

<script>
    // Create a new SVG circle element and position it behind
    // the red square
    function append ()
    {
        var svg        = document.getElementById('mysvg'),
            background = document.getElementById('svg-background-group');

        // The RGraph function to create SVG elements is
        // used here as a convenience
        RGraph.SVG.create({
            svg: svg,
            type: 'circle',
            parent: background,
            attr: {
                cx: 150,
                cy: 150,
                r: 50,
                fill: 'green'
            }
        });
    }
</script>

A live example

Simply click the button to add a green circle at the back of the red rectangle (nothing is being redrawn).


So how is this implemented in RGraph?

In RGraph, in the RGraph.svg.common.core.js function RGraph.SVG.createSVG() there is a short loop that creates ten (by default) of these layers before the all-elements group is added. So anything that you add to these background groups will appear behind any elements that are added by RGraph. In effect this gives you the background layers. References to these layers are stored on the obj.layers array and are also added to the SVG tag itself. So you could do this:

<script>
    bg1 = obj.layers.background1;
    bg2 = obj.layers.background2;
    
    bg3 = document.getElementById('mysvg').background4;
    bg4 = document.getElementById('mysvg').background5;
</script>

So you could add an rect behind your chart using them like this (assume that obj is your chart object):

<script>
    RGraph.SVG.create({
        svg: obj.svg,
        type: 'rect',
        parent: obj.layers.background5,
        attr: {
            x: 10,
            y: 10,
            width: 50,height: 50,
            fill: 'red'
        }
    });
</script>