A basic example of a page with two charts on it

This is a basic example that shows two charts on the same page. Both charts are created on seperate canvas tags and in the window.onload event.

[No canvas support] [No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.pie.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs1" width="300" height="250">[No canvas support]</canvas>
<canvas id="cvs2" width="300" height="250">[No canvas support]</canvas>
This is the code that generates the chart:
<script>
    window.onload = function ()
    {
        var bar = new RGraph.Bar({
            id: 'cvs1',
            data: [12,13,16,15],
            options: {
                textAccessible: true,
                gutterLeft: 35,
                colors: ['red'],
                labels: ['Kev', 'Brian', 'Fred', 'John'],
                tooltips: ['Kev', 'Brian', 'Fred', 'John']
            }
        }).draw();



        var pie = new RGraph.Pie({
            id: 'cvs2',
            data: [8,4,9,5,6,8],
            options: {
                labels: ['Rachel','Luis','June','Kevin','Pete','Lou'],
                textAccessible: true,
                textColor: '#999'
            }
        }).draw();
    };
</script>

Share on Facebook Share on Twitter