2D/3D JavaScript charts, MIT license, new SVG charts

Recommend RGraph:  
    Read comments...
[No canvas support]
Animate!

RGraph is a free charts library that creates charts dynamically with JavaScript and both the HTML5 canvas and HTML5 SVG tags.

It supports lots of different kinds of visualisations from Bar and Line charts through to Meters and Progress bars.

SVG charting is new to RGraph in November 2016 initially with just the Bar and Line charts. More are coming, including a Waterfall chart, a Horizontal Bar chart and a Scatter chart. More types will follow.

RGraph is quick, attractive, easy and free to use.

Built on the widely supported canvas element and SVG element desktop and mobile support is excellent and that allows you to create charts and dashboards that you can use on a wide range of devices. Owing to the fast rendering of the canvas and SVG tags, your charts can be up to 10x faster than Flash or HTML based libraries.

This means you can create good looking and informative charts and dashboards.

For example here's a blog post that shows off 9 examples of good looking charts that you'll find in the demos that are bundled with the archive.

New demos and examples

Recent examples and demos (the demos are included in the archive). Think you can create better looking charts? Just post it in the forum and if I like it I'll add it!

Like the Bar and Line charts the Scatter chart now supports having an offset Y axis.
5th December 2016
Like the Bar and Line charts the Scatter chart now supports having an offset Y axis.
An offset Y axis Bar chart showing the UK current account deficit. It uses the .grow() effect and has thin bars (mainly due to there being lots of bars).
5th December 2016
An offset Y axis Bar chart showing the UK current account deficit. It uses the .grow() effect and has thin bars (mainly due to there being lots of bars).
A Horizontal Bar chart showing the results of the UK referendum. Animated using the grow effect and with tooltips.
8th November 2016
A Horizontal Bar chart showing the results of the UK referendum. Animated using the grow effect and with tooltips.
An animated Line chart that uses embedded CSV values (they're embedded in a DIV in the page) and the trace effect.
12th October 2016
An animated Line chart that uses embedded CSV values (they're embedded in a DIV in the page) and the trace effect.
A combined Scatter/Bubble/Pie chart where the Bubbles are Pie charts. The Pie charts vary in size as bubbles do on Bubble charts and also are using the RoundRobin animation effect.
9th October 2016
A combined Scatter/Bubble/Pie chart where the Bubbles are Pie charts. The Pie charts vary in size as bubbles do on Bubble charts and also are using the RoundRobin animation effect.
A large grouped animated Bar chart that shows financial contributions to the EU in 2013. It has thin bars (using the vmargin property) and uses the grow effect.
8th October 2016
A large grouped animated Bar chart that shows financial contributions to the EU in 2013. It has thin bars (using the vmargin property) and uses the grow effect.
A Pie chart with a gray color scheme using tooltips, the halo highlight effect and which bolds the labels using the new Pie chart labelsBold option.
6th October 2016
A Pie chart with a gray color scheme using tooltips, the halo highlight effect and which bolds the labels using the new Pie chart labelsBold option.
A wide, grouped Bar chart with thinner  bars than usual, facilitated by using the <b>hmargin</b> property. It's also animated using <b>the grow effect</b>
5th October 2016
A wide, grouped Bar chart with thinner bars than usual, facilitated by using the hmargin property. It's also animated using the grow effect

Open source

RGraph is Open Source using the MIT license. This means that you are able to do with it whever you wish!

HTML5 Technology

RGraph uses up-to-date and quick HTML5 canvas, HTML5 SVG, JavaScript technology. SVG is a recent addition and the number of SVG charts is growing.

People love it! Just read our reviews and testimonials...

A lightweight, easy to use chart generator. I have used it in one of my projects and I would recommend anyone who want to have graphs on their webpages in minutes.

Ved Prakash, Web developer

Lots of charts, features and documentation

There are lots of plus points to using RGraph to make your charts with, and it can make many different chart types, which you can see from the RGraph documentation and the examples.

To see all of the examples (there are over 500!) you can take a look at the demo area.

Versatile and customisable

The charts can be customised using the properties to look attractive and they can fit into your website easily. The charts are customised using simple JSON such as the code below.

<script src="RGraph.common.core.js"></script>     // Always required
<script src="RGraph.common.dynamic.js"></script>  // Only required for dynamic features
<script src="RGraph.common.tooltips.js"></script> // Only required for tooltips
<script src="RGraph.bar.js"></script>             // Required for Bar charts

<canvas id="cvs" width="650" height="250">[No canvas support]</canvas>

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [ [4,8,3],[5,2,1], [8,4,2],[3,6,1],[5,1,0],[2,5,1],[1,2,2] ],
        options: {
            variant: '3d', 
            strokestyle: 'rgba(0,0,0,0)',
            colors: ['Gradient(#fbb:red)', 'Gradient(#bfb:green)','Gradient(#bbf:blue)'],
            gutterBottom: 80,
            labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            shadowColor:'#ccc',
            shadowOffsetx: 3,
            backgroundGridColor: '#eee',
            variantThreedAngle: 0.1,
            axisColor: '#ccc'
        }
    }).draw();
</script>

As well as customising the charts to look how you want you can manipulate the data to show different kinds of things - such as the fan style Line chart showing deviation from a predicted set of values .

Download it and try it out

The best way to find out what RGraph is like is to download it and try it out!

Download the latest version of RGraph Download the latest version of RGraph

Other pages to look at include:


Comments