# A line chart with an HTML key

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.key.js"></script>
    <script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

    <div style="position: relative">
        <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
        <div style="position: absolute; left: 600px; top: 25px" id="myKey"></div>
    </div>

This is the code that generates the chart:

    <script>
        window.onload = function ()
        {
            var line = new RGraph.Line({
                id: 'cvs',
                data: [
                    [5,4,1,6,8,5,3],
                    [23,26,27,21,24,25,26],
                    [3,1,5,6,2,4,5],
                    [15,16,13,18,16,13]
                ],
                options: {
                    textAccessible: true,
                    labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
                }
            }).draw()

            document.getElementById('myKey').style.top = line.Get('gutter.top') + 'px';

            RGraph.HTML.Key('myKey', {
                'colors': line.Get('colors'),
                'labels': ['John','Fred','Joe','Luis'],
                'labelCss_0': {'color':'red'}
            });
        };
    </script>

« Back