HTML keys
- Introduction
- An example
- Configuration options
- Adding a link to the key
- The return value
- Getting all of the label <span> tags
Introduction
The new (December 2013) html
and javascript
key give you a way to
have a key that's generated outside of the canvas
and
that's a part of the page just like your other html
. The key is made up
of a table
tag - which contains the list
of key entries.
Because the key is not drawn onto the canvas
it's not subject to
redraws (see important note below though) and you can script interactivity
with it quite easily,
such as add event handlers.
The list of configuration options is below.
Important:
Because the rendering of the key involves setting the
innerHTML
property of the container that means that
any canvas
tag that's inside will be reset. So, like it is here,
you may need to draw the key before you
draw the chart.
An example
Remember!
This is javascript
and NOT css
- meaning that strings (eg css
property names and values) need to be surrounded by single
or double quotes.
<script src="RGraph.common.core.js" ></script> <script src="RGraph.common.key.js" ></script> <script src="RGraph.line.js" ></script> <div style="width: 800px; margin-left: auto; margin-right: auto"> <canvas id="cvs" width="600" height="250">[No canvas support]</canvas> <div id="container" style="float: right;position: relative; width: 200px; height: 200px"></div> </div> <script> RGraph.HTML.Key( 'container', { colors: ['red','#0f0', 'blue','orange'], labels:[ 'Louise', 'Fred<br /><span style="font-size:70%">Warning!</span>', 'Charley', 'Lucy' ], links: [ 'http://www.google.com#q=louise', "javascript: window.open('http://www.google.com#q=fred');" + "event.stopPropagation()" ], tableCss:{ position:'absolute', top:'25px', left:'590px' }, tableClass: 'rgraph_key', blobCss: { 'border-radius': '0' }, blobClass: 'rgraph_key_blob', labelCss: { }, labelClass: 'rgraph_key_label', labelCss_0: { color: 'red', 'font-weight': 'bold' }, labelCss_1: { color: '#00f', 'font-weight': '900' }, } ); </script>
Configuration options
Required options
Other options
css
properties and values that are applied to the table that holds the key.css
class for the table that holds the key.css
properties and values that are applied to the color blob (eg. you could use the border-radius
css
property to get circular blobs).css
properties and values that are applied to the <SPAN> tag that the label sits in.Adding a link to the key
Adding a link to the key so that it can be clicked to get (eg) more information or to trigger something on the chart
is easy as the links option is provided. Normally this is a URL that opens in the same window as the current page. You
can change this behaviour by using the window.open
javascript
function as the example above shows.
The return value
The return value from the function is a div
object (like you
get back from document.getElementById
). You can then
manipulate it as you would any other dom
node.
Getting all of the label <span> tags
You can get hold of the span
tags that hold the labels by, again, using the dom
methods:
// The key variable is what the RGraph.HTML.Key() function returns
span_tags = key.getElementsByTagName('SPAN');
name = span_tags[0].innerHTML;