How to turn a label into a link (canvas version)

Summary: This document shows you how, when using the textAccessible option, to turn one of your labels into a functioning link that you can click.

A Bar chart with a linked label
[No canvas support]

This HOWTO document tells you how you can, when using the textAccessible option (which RGraph does by default), easily turn a bit of text into a link. This method makes use of jQuery but you should be able to easily adapt it to your own preferred JavaScript library.

Getting hold of the relevant bit of text

The first thing that you need to do is get a reference to the bit of text that you wish to turn into a link. By using the RGraph.text.find() function this is made very easy. The function returns the DOM node which you can then manipulate. 

<script>
    text = RGraph.text.find({
        id: 'cvs',
        text: /james/i
    });
</script>

The function can accept a few different search criteria to find the relevant bit of text - but in this case it's using the text option which can be a regular expression to match the text with. You'll find the other options documented in the canvas API documentation here

The RGraph.text.find() function returns an array of <span> tags that match the specified search criteria. So here, the function returns an array of just a single <span> tag.

Setting the style of the tag

Now that we have the <span> tag we can set some style on it as required. Here I've used jQuery (because it makes it nice and easy to do so) but you don't have to. Indeed if you have a preferred library then you can use that instead because the <span> tag node is just a normal HTML node. 

<script>
    // Use jQuery to wrap the text in a link
    $(text[0]).wrap('<a href="http://www.google.com#q=James" target="_blank"></a>')
    
    // Make the text look like a link
    $(text[0]).css({
        color: 'blue',
        fontWeight: 'bold',
        
        /* By default pointer events are disabled so reset that */
        pointerEvents: 'auto'
    });
</script>

You can see the results in the labels of the chart above - one of the labels is made to be a link and will take you to Google.


An alternative method without jQuery

If you prefer not to, or cannot use jQuery then the alternative is to use the native APIs to add the anchor element to the text. If you're using accessible text then this is very easy as the text is already a <span> tag and it's just left to wrap the <span> tag in an anchor. 

// Define the function that wraps the <span> tags
RGraph.wrap = function(args)
{
    args.element.parentNode.insertBefore(args.wrapper, args.element);
    args.wrapper.appendChild(args.element);
};

// Find the labels <span> nodes
nodes = RGraph.text.find({
    id: 'cvs',
   text: 'John'
});

// Create the wrapper <a> element
anchor  = document.createElement('a');
anchor.href = 'https://www.google.com';

// Set the color of the <span> tag and enable the pointer-events CSS property
span = nodes[0];
span.style.color = "#00f";
span.style.pointerEvents = 'auto';

// And finally wrap the <span> tag in the <a> tag that was just created
RGraph.wrap({
    element: span,
    wrapper: anchor
});

Another alternative to jQuery

As well as the above method you can add click and mousemove event listeners to the <span> tags instead of wrapping them. This method uses the events to redirect the browser when the text is clicked on. Like the code above, the text is colored to make it look like a link. 

// Find the labels <span> nodes
nodes = RGraph.text.find({
    id: 'cvs',
   text: 'John'
});

span = nodes[0];

// Set the CSS pointer-events and color options
span.style.pointerEvents = 'auto';
span.style.color         = 'blue';

// Add the mousemove event listener that changes the cursor to a hand
span.onmousemove = function (e)
{
    e.target.style.cursor = 'pointer';
}

// Add the click event listener that changes the URL
span.onclick = function (e)
{
    location.href = 'https://www.google.com/search?q=john';
}

See also