A Bar chart showing the mouseout event

[No canvas support]

This goes in the documents header: 
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up: 
<div style="padding: 15px">
    <canvas id="cvs" width="750" height="250">[No canvas support]</canvas>
</div>
This is the code that generates the chart: 
<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [12,18,10,9,6,20,18],
        options: {
            labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            shadow: false,
            strokestyle: 'rgba(0,0,0,0)',
            textSize: 14,
            title: 'A Bar chart showing the mouseout pseudo-event',
            numyticks: 5,
            noxaxis: true,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            noaxes: true
        }
    }).draw().on('mouseover', function (e, shape)
    {
        // Highlight the bar
        RGraph.path2(
            shape.object.context,
            'b r % % % % s rgba(255,255,255,0.75) f rgba(255,255,255,0.75)',
            shape.x,
            shape.y,
            shape.width,
            shape.height
        );
    }).on('mouseout', function (obj)
    {
        RGraph.redraw();
    });
</script>

« Back