Using HTML keys in charts
Summary: RGraph can generate HTML (ie DIV/TABLE/SPAN) keys instead of drawing them on the canvas. In some cases these can be easier to interact with and they don't need to be redrawn.
- An example
- Configuration options
- Adding a link to the key
- The return value
- Getting all of the label SPAN tags
Because the key is not drawn onto the canvas it's not subject to redraws (see important note though) and you can script interactivity with it quite easily, such as add event handlers.
The list of configuration options is below.
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.
|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)
A list (array) of the labels that are used on the key
Default: None (required)
A list (array) of CSS properties and values that are applied to the table that holds the key.
A string that is used as the CSS class for the table that holds the key.
A list (array) of CSS properties and values that are applied to the color blob (eg. you could use the
border-radiusCSS property to get circular blobs).
A string that is used as the CSS class for the color blobs
A list (array) of CSS properties and values that are applied to the <SPAN> tag that the label sits in.
A string that is used as the CSS class for the span that holds the label.
An array of links that the labels link to.
Adding links 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
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.innerHTML;