How to use the RGraph.SVG.text.find() function

Summary
This HOWTO describes how you can use the SVG charts find() function (which is available from version 4.65) to get hold of text nodes - which you can then customise as required.

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:

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.

Example of finding text tags by the textual content

The chart above is made using the following code:

<script>
    var 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,
            hmargin: 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 lets 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
    var nodes = RGraph.SVG.text.find({
        object: bar,
        text: 'Tuesday'
    });
    
    // Now change its color to red and make it bold
    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
    var nodes = RGraph.SVG.text.find({
        object: bar,
        text: /^tues/i
    });
</script>

Example of finding text tags by querying the tag string thats assigned to it by RGraph

Tags 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) that you can see here for more information).

Here's an example that uses the tag option:

<script>
    // Get the X axis labels
    var 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
    var 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>