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-based 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> key = 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
Property | Description | Default |
---|---|---|
colors | A list (array) of colors that are used as the key colors. | None (required) |
labels | A list (array) of the labels that are used on the key | None (required) |
A list (array) of colors that are used as the key colors.
Default: None (required)
labels
A list (array) of the labels that are used on the key
Default: None (required)
Other options
A list (array) of CSS properties and values that are applied to the table that holds the key.
Default: None
tableClass
A string that is used as the CSS class for the table that holds the key.
Default: None
blobCss
A list (array) of CSS properties and values that are applied to the color blob (eg. you could use the
border-radius
CSS property to get circular blobs).Default: None
blobClass
A string that is used as the CSS class for the color blobs
Default: None
labelCss
A list (array) of CSS properties and values that are applied to the <SPAN> tag that the label sits in.
Default: None
labelClass
A string that is used as the CSS class for the span that holds the label.
Default: None
links
An array of links that the labels link to.
Default: None
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;