Interactive keys

Share RGraph:   

Summary
Documentation about making your key interactive (ie clickable). An interactive key can be used to highlight data series on your chart.

Note: The interactive key will use standard canvas text for the key - not DOM text. You can enable textAccessible if you want but the interactive key will ignore it.

A Line chart with interactive key
[No canvas support]

Formerly the interactive key was only implemented for the Line and Pie charts. As of June 2013, however, it has been re-implemented and it's now available with the following chart types. The types are linked to demo pages each of which are included in the download archive.

You can view demos of each by clicking on the links. Having been re-implemented the interactive key now uses the drawing API Rect object and the dynamic library:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.drawing.rect.js"></script>

<script>
    window.onload = function ()
    {
        var line = new RGraph.Line({
            id: 'cvs',
            data: [
                [458,435,466,148,396,485,456],
                [153,245,256,33,216,248,344],
                [55,56,43,374,76,78,85]
            ],
            options: {
                labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                tickmarks: 'endcircle',
                linewidth: 3,
                numxticks: 12,
                spline: true,
                key: ['Rob','Julie','Jack'],
                keyPosition: 'gutter',
                keyInteractive: true,
                textSize: 14
            }
        }).draw()
    }
</script>

Comments

Add a new comment...