About
RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 17 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 pink Pie chart
Another quite basic Pie chart
that is predominantly a pinkish theme. All of the colors
are defined using rgb
values instead of hex
values or named colors.
The linewidth
is set to 2 so the resultant effect is a small amount of segment
separation.
The labels are defined and the textSize
option is enlarged slightly so
that those labels are a little bit clearer.
It's quite a basic example of a Pie chart
but the resulting aesthetic is quite nice.
This goes to show that your charts don't need to be fancy to look good!
This goes in the documents header:
<script src="RGraph.common.core.js"></script> <script src="RGraph.pie.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="550" height="450"> [No canvas support] </canvas>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):
<script> // A pretty straight-forward Pie chart. The only thing to note here // really is the use of the linewidth property to create a small // segment separation effect. The default color for the stroke is // white so it just blends into the background of the page (the // default background color of the canvas tag is transparent). new RGraph.Pie({ id: 'cvs', data: [3,7.9,2,10.3,11.1,1,63.9], options: { colors: [ 'rgb(51,102,204)', 'rgb(220,57,18)', 'rgb(255,153,0)', 'rgb(16,150,24)', 'rgb(153,0,153)', 'rgb(0,153,198)', 'rgb(221,68,119)' ], linewidth: 2, shadow: false, labels: ['3%','7.9%','2%','10.3%','11.1%','1%','62.9%'], textSize: 10, textColor: '#444' } }).draw(); </script>