MENU
.net Powerful JavaScript charts
About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.19, 28th September 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

Download »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

HTML keys

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

[No canvas support]

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

Name: colors
Description: 
A list (array) of colors that are used as the key colors.
Default: None (required)
Name: labels
Description: 
A list (array) of the labels that are used on the key
Default: None (required)

Other options

Name: tableCss
Description: 
A list (array) of css properties and values that are applied to the table that holds the key.
Default: None
Name: tableClass
Description: 
A string that is used as the css class for the table that holds the key.
Default: None
Name: blobCss
Description: 
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
Name: blobClass
Description: 
A string that is used as the css class for the color blobs
Default: None
Name: labelCss
Description: 
A list (array) of css properties and values that are applied to the <SPAN> tag that the label sits in.
Default: None
Name: labelClass
Description: 
A string that is used as the css class for the span that holds the label.
Default: None
Name: links
Description: 
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;