A demo of the Chrome-only dotted or dashed background grid

This uses the relatively new Chrome only addition to canvas from the canvas v5 specification - dotted and dashed lines with HTML5 canvas. As browsers add support you will be able to use the option in them too but currently (May 2013) it's only supported in Chrome.

obj.Set('background.grid.dashed', true);
obj.Set('background.grid.dotted', true);
[No canvas support] [No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
<canvas id="cvs2" width="600" 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: [4,5,3,8,4,9,6,5,3],
            options: {
                backgroundGridDashed: true,
                labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                title: 'A dashed background grid',
                strokestyle: 'rgba(0,0,0,0)',
                textAccessible: true
            }
        }).draw();

        var bar2 = new RGraph.Bar({
            id: 'cvs2',
            data: [4,5,3,8,4,9,6,5,3],
            options: {
                labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                backgroundGridDotted: true,
                title: 'A dotted background grid',
                strokestyle: 'rgba(0,0,0,0)',
                textAccessible: true
            }
        }).draw();
    };
</script>

Share on Facebook Share on Twitter