Fun with 'R' Graphs & Canvas

HTML

<link rel="stylesheet" href="http://beanerspace.com/RGraph/css/website.css">
<script src="http://beanerspace.com/RGraph/libraries/RGraph.common.core.js"></script>
<script src="http://beanerspace.com/RGraph/libraries/RGraph.common.dynamic.js"></script>
<script src="http://beanerspace.com/RGraph/libraries/RGraph.common.effects.js"></script>
<script src="http://beanerspace.com/RGraph/libraries/RGraph.common.tooltips.js"></script>
<script src="http://beanerspace.com/RGraph/libraries/RGraph.common.key.js"></script>
<script src="http://beanerspace.com/RGraph/libraries/RGraph.bar.js"></script>
<script src="http://beanerspace.com/RGraph/libraries/RGraph.common.context.js"></script>
<script src="http://beanerspace.com/RGraph/libraries/RGraph.funnel.js"></script>
<script src="http://beanerspace.com/RGraph/libraries/RGraph.pie.js"></script>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<h3>Fun with <a href="http://www.rgraph.net/">R-Graphs</a> &amp; Canvas</h3>
<!--[if lt IE 9]><script src="http://beanerspace.com/RGraph/libraries/excanvas.original.js"></script><![endif]-->
<div style="text-align: center">
     <canvas id="barchart-one" width="900" height="200">[No canvas support]</canvas>
    <canvas id="funnel1" width="500" height="400">[No canvas support]</canvas>
    <canvas id="donut1" width="430" height="350">[No canvas support]</canvas>
</div>
<script type="text/javascript">
  var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-442503-9']);
    _gaq.push(['_setDomainName', 'deanpeters.com']);
    _gaq.push(['_setCampNameKey', 'jsfiddle']);    
    _gaq.push(['_setCampMediumKey', navigator.userAgent ]);
    _gaq.push(['_setCampSourceKey', 'internet']);   
    _gaq.push(['_setCampTermKey', 'javascript']);       
    _gaq.push(['_setCampContentKey', document.title ]);
    _gaq.push(['_trackPageview']);

     (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' ==...

JavaScript

/* 1st bar chart */
var barOne = new RGraph.Bar('barchart-one', [[50,75],[32, 44],[61, 56],[91, 81],[92, 8],[34, 57],[56, 62],[55, 45],[36, 12],[44, 56],[51, 66],[68, 88]]);
barOne.Set('chart.background.barcolor1', 'white');
barOne.Set('chart.background.barcolor2', 'white');
barOne.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']);
barOne.Set('chart.key', ['John', 'Bob']);
barOne.Set('chart.key.position.y', 35);
barOne.Set('chart.key.position', 'gutter');
barOne.Set('chart.key.background', 'rgb(255,255,255)');
barOne.Set('chart.colors', ['#77f', '#7f7']);
barOne.Set('chart.shadow', true);
barOne.Set('chart.shadow.blur', 15);
barOne.Set('chart.shadow.offsetx', 0);
barOne.Set('chart.shadow.offsety', 0);
barOne.Set('chart.shadow.color', '#aaa');
barOne.Set('chart.strokestyle', 'rgba(0,0,0,0)');
barOne.Set('chart.gutter.left', 55);
barOne.Set('chart.gutter.right', 5);
barOne.Set('chart.variant', '3d');
barOne.Draw();   

/* funnel-chart */

var funnel = new RGraph.Funnel('funnel1', [100,45,45,26,24]);
funnel.Set('chart.gutter.top', 40);
funnel.Set('chart.gutter.left', 150);
funnel.Set('chart.text.boxed', false);
funnel.Set('chart.title', 'Leads progressing to sales');

funnel.Set('chart.shadow', true);
funnel.Set('chart.shadow.color', 'gray');
funnel.Set('chart.shadow.blur', 25);
funnel.Set('chart.shadow.offsetx', 0);
funnel.Set('chart.shadow.offsety', 0);

funnel.Set('chart.labels', ['Initial contact', 'Established lead', 'Telephone contact', 'Site visit', 'Sale finalised']);
funnel.Set('chart.labels.x', 10);
funnel.Set('chart.text.boxed', false);// This is the default
funnel.Set('chart.strokestyle', 'rgba(0,0,0,0)');
funnel.Set('chart.labels.sticks', true);
funnel.Set('chart.taper', false);
funnel.Draw();


/* -- mmmmm ... donuts .... -- */
var donut = new RGraph.Pie('donut1', [41,37,16,3,3]);
donut.Set('chart.variant', 'donut');
donut.Set('chart.linewidth', 5);
donut.Set('chart.strokestyle',...