Using HTML keys in charts

Share RGraph:   

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.

[No canvas support]

 

Introduction

The new (December 2013) HTML and JavaScript based key gives you a way to have a key thats 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 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.


 

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>
    var 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: '#dd0 ! important',
                'font-weight': 'bold'
            },
            labelCss_1: {
                color: 'red ! important',
                'font-weight': 'bold'
            }
        }
    );
</script>

 

Configuration options

 

Required options

colors
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

tableCss
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 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 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;

Comments

Add a new comment...