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-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.SVG.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

You can view the example by clicking the button. This example draws a red <rect> on the SVG. There's a button beneath the tag which, when clicked, adds a green <circle> to the group on the SVG. Because the group was added first - before the rectangle - the circle then appears behind the rect.

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>