An adjustable Line chart

This goes in the documents header:

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

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas><br />
<button style="padding: 5px; font-size: 16pt" onclick="line.set('outofboundsClip', !line.get('outofboundsClip')); RGraph.redraw()">Toggle the outofboundsClip option</button>

This is the code that generates the chart:

<script>
    line = new RGraph.Line({
        id:'cvs',
        data: [
            [4,5,8,7,6,4,3,5],
            [7,1,6,9,4,6,5,2]
        ],
        options: {
            labels: ['Kev','Matt','Rich','Dave','Iggy','Polly','Fiona','Fred','Pete','Lou','Fred','Bob'],
            gutterBottom: 35,
            linewidth: 2,
            hmargin: 10,
            shadow: true,
            adjustable: true,
            title: 'An adjustable line chart',
            titleVpos: 0.5,
            spline: true,
            tickmarks: 'circle',
            ticksize: 2
        }
    }).draw();
</script>

« Back