HOWTO: Using the RGraph.SVG.text.find() function

• An example of finding text tags by the text content
• An example of finding text tags by querying the tag string that's assigned to it by RGraph
• The callback function option to the find function

RGraph provides you with an easy way to get hold of the svg text nodes that it creates in the form of the RGraph.SVG.text.find function.

This function accepts two main criteria to use to look for text. These are:

• text - The text to match against
• tag - The tag that the text is assigned (eg title, subtitle, labels.xaxis, labels.yaxis)

By using these criteria you can get the svg text objects and then manipulate them as required - eg set the color of one of the labels to red.

An example of finding text tags by the text content

The chart above is made using the following code:

<script>
    bar = new RGraph.SVG.Bar({
        id: 'cc',
        data: [8,9,4,5,6,3,6],
        options: {
            labelsAbove: true,
            labelsAboveUnitsPost: 'Kg',
            labelsAboveSize: 10,
            shadow: true,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            marginInner: 20,
            xaxis: false,
            yaxis: false,
            xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
        }
    }).draw();
</script>

In this case the x-axis labels are hard-coded and thus not overly difficult to get hold of. But let's say, for arguments sake, that we wanted to use the RGraph.SVG.text.find function to get the second x-axis label. This is how you could do that using this function:

<script>
    // Get the Tuesday label
    nodes = RGraph.SVG.text.find({
        object: bar,
        // svg: bar.svg // Optionally you can also specify the SVG tag
        text: 'Tuesday'
    });
    
    
    nodes[0].setAttribute('fill','red');
    nodes[0].setAttribute('font-weight','bold');
</script>

As well as a string to compare the text against you can also use a regular expression like this (note the lack of quotes around the regular expression):

<script>
    // Get the Tuesday label
    nodes = RGraph.SVG.text.find({
        object: bar,
        // svg: bar.svg // Optionally you can also specify the SVG tag
        text: /^tues/i
    });
</script>

An example of finding text tags by querying the tag string that's assigned to it by RGraph

Tag strings are assigned to the text elements by the RGraph.SVG.text function. You can use these tags to get any bit of text (labels for example). If you want to find out the tag for a bit of text the best thing to do is inspect the text in your browser (in Chrome you can right-click on the text and choose "inspect". There's an old video (circa 2010) here that you can see for more information).

Here's an example that uses the tag option:

<script>
    // Get the X-axis labels
    labels = RGraph.SVG.text.find({
        object: bar,
        tag: 'labels.xaxis'
    });
    
    for (var i=0,len=labels.length; i<len; ++i) {
        labels[i].setAttribute('fill','red');
        labels[i].setAttribute('font-weight','bold');
    }
</script>

Alternatively there's also a regular expression option for the tag. So you can do this as well:

<script>
    // Get the X-axis labels
    labels = RGraph.SVG.text.find({
        object: bar,
        tag: /xaxis$/
    });
    
    for (var i=0,len=labels.length; i<len; ++i) {
        labels[i].setAttribute('fill','red');
        labels[i].setAttribute('font-weight','bold');
    }
</script>

The callback function option to the find() function

From version 4.69 you can give a callback option to the find function that is run when the find function has completed. It's passed an object as the sole argument which contains two properties - the object property and the nodes property.

The object property is the RGraph chart object that created the chart. When multiple charts are on one svg tag then the object returned is the one that created the svg tag. This is usually the first chart object that was created.

The nodes property is an array of the matching svg text nodes that were found.

You can then manipulate the text nodes that were found as you would normal svg nodes.

Here's some example code using the callback option:

<script>
    RGraph.SVG.text.find({
        object: bar,
        text: /(1|2|3|4|5)Kg/,
        callback: function (opt)
        {
            var obj   = opt.object,
                nodes = opt.nodes;
            
            alert(opt.nodes.length + ' node(s) found');
        }
    });
</script>