HOWTO: Use the background layers

• Pseudo SVG layers with groups
• A live example
• So how is this implemented in RGraph?

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 to 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 something 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).

Add a green circle at the back

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 a <rect> element behind your chart using them like this (assume that the obj variable 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>