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.
- Getting hold of the relevant bit of text
- Setting the style of the tag
- An alternative method without jQuery
- An alternative method without jQuery
- See also
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
-
How to add links to your charts
This HOWTO document shows you the various ways that you can add links to your charts.