Using HTML keys in charts
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
- Conguration 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.
Important note: 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)|
Adding links to the key
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;