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

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;