About
RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 16 years
old) and has a wealth of features making it an ideal
choice to use for showing charts on your website.
Download
Get the latest version of RGraph (version 6.20, 1st December 2024) from
the download page. You can read the changelog here. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
License
RGraph can be used for free under the GPL or if
that doesn't suit your situation there's an
inexpensive (£129) commercial license available.A switch animation effect
It's a nice transition effect where one chart blends into
another with a "folding-away" type motion. The other chart
is shown in the reverse direction. The effect is not
animated by using javascript
animation but by
using javascript
to apply css
properties. The css
transitions that are also
specified on the canvas
then take care of doing
the animating.
The charts themselves are quite straightforward - with the
Line chart
having a larger linewidth
and bigger tickmarks than normal.
This goes in the documents header:
<script src="RGraph.common.core.js"></script> <script src="RGraph.line.js"></script> <script src="RGraph.bar.js"></script> <style> div#canvas-container { position: relative; width: 600px; height: 250px; } div#canvas-container canvas { position: absolute; top: 0; left: 0; width: 600px; height: 250px; background-color: white; transition: all 1s; opacity: 1; } div#canvas-container canvas#cvs1 { top: 125px; left: 300px; width: 0; height: 0; opacity: 0; transform: rotate(90deg); } </style>Put this where you want the chart to show up:
<div id="canvas-container" style="display: inline-block; float: right"> <canvas id="cvs1" width="600" height="250">[No canvas support]</canvas> <canvas id="cvs2" width="600" height="250">[No canvas support]</canvas> </div>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):
<script> // First create the Bar chart but don't call the draw() function. bar = new RGraph.Bar({ id: 'cvs1', data: [4,8,12], options: { colors: ['#5690C9'], marginInner: 25, colorsStroke: 'transparent', textSize: 16, titleSize: 12, yaxisTickmarksCount: 0, xaxisTickmarksCount: 0, xaxis: false, yaxis: false, shadow: false, title: 'A Bar chart (click to switch to the Line chart)', backgroundGridVlines: false, backgroundGridBorder: false, xaxisLabels: ['John','Fred','Lucy'] } }).draw(); // Create the Line chart with no X-axis line = new RGraph.Line({ id: 'cvs2', data: [ [1,6,4], [5,3,8] ], options: { colors: ['#B71A1A','#54A4CF'], // Use a custom tickmark function so that we can draw the mark manually tickmarksStyle: function myTick (obj, data, value, index, x, y, color, prevX, prevY) { // This is an RGraph function for drawing paths on the canvas. As of // version 5.02 you can use the RGraph.path() function instead if you // prefer. obj.path( 'b a % % % % % false f %', x, y, 15, 0, 2 * Math.PI, false, color ); }, linewidth: 10, shadow: false, xaxisLabels: ['John','Fred','Lucy'], title: 'A Line chart (click to switch to the Bar chart)', backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, marginInner: 25, textSize: 16, textColor: '#000', titleSize: 12, yaxisColor: '#999' } }).draw(); // This is the click event handler that swaps the canvas // tag width/height/opacity CSS properties. document.getElementById('cvs1').onclick = document.getElementById('cvs2').onclick = function (e) { var id = e.target.id; var el1 = document.getElementById('cvs1'); var el2 = document.getElementById('cvs2'); // If the canvas that was clicked on was cvs1 then do this // (hide cvs1 and show cvs2) if (id === 'cvs1') { el1.style.width = 0; el1.style.height = 0; el1.style.top = '125px'; el1.style.left = '300px'; el1.style.opacity = 0; el1.style.transform = 'rotate(180deg)'; el2.style.width = '600px'; el2.style.height = '250px'; el2.style.top = 0; el2.style.left = 0; el2.style.opacity = 1; el2.style.transform = 'rotate(0)'; // If the canvas that was clicked on was cvs2 then do // this (hide cvs2 and show cvs1) } else { el2.style.width = 0; el2.style.height = 0; el2.style.top = '125px'; el2.style.left = '300px'; el2.style.opacity = 0; el2.style.transform = 'rotate(180deg)'; el1.style.width = '600px'; el1.style.height = '250px'; el1.style.top = 0; el1.style.left = 0; el1.style.opacity = 1; el1.style.transform = 'rotate(0)'; } }; </script>