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
Being DOM-based instead of a simple bitmap, 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 very 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 immediately 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 that to add some formatting to it 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.
A RGraph.SVG.link()
function may be added at a
later date if
there's enough demand to make this even easier.