HOWTO: Linkify a label (using accessible text)
- Getting hold of the relevant bit of text
- Setting the style of the tag
- An alternative method without jQuery
- Another alternative to jQuery
- See also
This howto
document tells you how you can, when using the textAccessible
option (which, as of version 6.08, RGraph no longer 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 api
's 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 a click
event
listener to the span
tag instead of wrapping
it. This
method uses the event listener 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, cursor and color options span.style.pointerEvents = 'auto'; span.style.color = 'blue'; span.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.