HOWTO: Turning a label into a link

• The full source code
• Create the SVG Bar chart
• Get a reference to the label
• Create an SVG link tag
• Wrap the label in the link
• Get hold of the SVG text node
• Add some formatting to the text tag
• Conclusion

Having a dom (instead of a being a simple bitmap like canvas), svg has certain advantages over canvas. One of those is the relative ease in adding links to your chart. This howto document shows you how to change a regular label into one that's a link that your users will be able to click. The chart here shows a single link in the labels (the June label) which you can click and be taken to Google (you can link to other places of course).

The full source code

Here's the full source code - and underneath it's broken down into sections and described.

<script>
    // 1. First - create the SVG Bar chart
    bar = new RGraph.SVG.Bar({
        id: 'cc',
        data: [4,8,6,3,5,9,4],
        options: {
            xaxisLabels: ['Harry','Paula','Bill','Lucy','May','June','Fred']
        }
    }).draw();

    // 2. Get hold of the relevant label by using jQuery. Remember that this
    // will be a jQuery object - not a DOM node
    $label = $('div#cc svg text:contains(June)');
    
    // 3. Create an SVG link tag that we'll wrap the label in
    a = RGraph.SVG.create({
        svg: bar.svg,
        type: 'a',
        parent: bar.svg.all,
        attr: {
           'xlink:href': 'https://www.google.com#q=june',
           target: '_blank'
        }
    });
    
    // 4. Using the jQuery wrap() function - wrap the label using the 
    // we've just created
    $label.wrap(a);
    
    // 5. Get hold of the SVG text node that we've just wrapped in the link
    svgnode = $label.get(0);
    
    // 6. Add some formatting to the text tag to make it look like a
    // regular HTML link
    svgnode.setAttribute('fill', 'blue')
    svgnode.setAttribute('font-weight', 'bold');
</script>

Create the SVG Bar chart

Nothing strange here - simply a basic Bar chart is being created.

// 1. First - create the SVG Bar chart
bar = new RGraph.SVG.Bar({
    id: 'cc',
    data: [4,8,6,3,5,9,4],
    options: {
        xaxisLabels: ['Harry','Paula','Bill','Lucy','May','June','Fred']
    }
}).draw();

Get a reference to the label

The next thing to do is get hold of the svg text node that we want to wrap in a link. By using jquery it makes it very easy to get the correct node - as you can see the selector string $('div#cc svg text:contains(June)') is quite specific and uses the jquery :contains() selector. This results in the correct svg text node being assigned to the $label variable (though remember - it's not the pure svg node - it's a jquery object that consists of the text node).

// 2. Get hold of the relevant label by using jquery. Remember that this
// will be a jquery object - not a DOM node
label = $('div#cc svg text:contains(June)');

Create an SVG link tag

The svg a tag is very similar to a regular html tag except that it also has a different attribute name for the href: xlink:href="https://www.google.com#q=june" You can use the RGraph.SVG.create function to create such a tag.

// 3. Create an SVG link tag that we'll wrap the label in
a = RGraph.SVG.create({
    svg: bar.svg,
    type: 'a',
    parent: bar.svg.all,
    attr: {
       'xlink:href': 'https://www.google.com#q=june',
       target: '_blank'
    }
});

Wrap the label in the link

Now, again using jquery, we wrap the a tag around the text node - making it clickable. The jquery wrap function makes this easy.

// 4. Using the jQuery wrap() function - wrap the label using the <a>
// we've just created
$label.wrap(a);

Get hold of the SVG text node

Now, technically, that is the absolute minimum required to make a link out of the svg text node. But this will result in the link being the same color as the rest of the text - and thus it won't stand out and won't be obvious to the user that it's a link that they can click on. So the best thing to do here would be to make it the same color as normal html links - which by default is blue.

So the first thing to do is to get the svg node that the jquery object contains. This is done using the jquery get function. You could also use the jquery square brackets notation here - but it makes no difference in this case.

// 5. Get hold of the SVG text node that we've just wrapped in the link
svgnode = $label.get(0);
// svgnode = $label[0];

Add some formatting to the text tag

So now we have the node we can use it to add some formatting so that it stands out and is obvious to the user that it's a link. Also, the pointer-events css option is set to all because by default RGraph turns pointer-events off.

// Add some formatting to the text tag to make it look like a
// regular HTML link
svgnode.setAttribute('fill', 'blue');        // Color it blue
svgnode.setAttribute('font-weight', 'bold'); // Make it bold

// Turn pointer-events on for the label because RGraph turns them off
$label.css('pointer-events', 'all');

Conclusion

So not difficult is it? With svg redrawing things for you automatically - you don't have to make the link constantly (ie you don't have to use the draw RGraph event) like you would with the canvas libraries.