<script src="RGraph.common.core.js"></script> <script src="RGraph.common.effects.js"></script> <script src="RGraph.rose.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="450" height="400"> [No canvas support] </canvas>This is the code that generates the chart:
<script> function transition () { var cvs = document.getElementById('cvs'); cvs.__object__.explode(null, function () { visible === 1 ? drawRose2() : drawRose1(); }); } /** * Draws the first Rose chart */ function drawRose1 () { var cvs = document.getElementById("cvs"); RGraph.reset(cvs); var rose = new RGraph.Rose({ id: 'cvs', data: [4,8,6,5,3,2,9,4,2,8], options: { backgroundGrid: false, strokestyle: 'rgba(0,0,0,0)', margin: 3, clearto: 'white', textAccessible: true } }).implode(); // A global visible = 1; } /** * Draws the second Rose chart */ function drawRose2 () { var cvs = document.getElementById("cvs"); RGraph.reset(cvs); var rose = new RGraph.Rose({ id: 'cvs', data: [1,8,8,8,4,6,3,2,5,6], options: { colorsSequential: true, backgroundGrid: false, strokestyle: 'rgba(0,0,0,0)', margin: 3, clearto: 'white', textAccessible: true } }).implode(); // A global visible = 2; } window.onload = function () { drawRose1(); }; </script>