RGraph

RGraph is a HTML5 software library for charting written in native JavaScript. It was created by English programmer Richard Heyes in 2008. RGraph started as an easy-to-use commercial tool based on HTML5 canvas only. However now, it's freely available to use under the open-source MIT license, and supports more than 50 chart types in both SVG and canvas.

RGraph is suitable for all websites. The size of the JavaScript files and the code to make a chart is small and can be further reduced by using techniques such as minification and compression.

Example code

An example of what the RGraph code looks like is below. This code is designed to be used on a canvas which has a black background like this:

<canvas id="cvs" width="600" height="250" style="background-color: #333">[No canvas support]</canvas>

<script>
    data = [[45,56],[75,32],[39,47],[34,48],[46,47],[48,52]];

    new RGraph.Bar({
        id: 'cvs',
        data: data,
        options: {
            shadow: false,
            colorsStroke: 'rgba(0,0,0,0)',
            grouping: 'grouped',
            colors: [
                'Gradient(white:#ccf:#ccf:#ccf:#ccf)',
                'Gradient(white:#faa:#faa:#faa:#faa)'
            ],
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            textColor: 'white',
            xaxisLabels: ['2007','2008','2009','2011','2012','2013'],
            marginTop: 15,
            marginRight: 5,
            xaxis: false,
            yaxis: false
        }
    }).draw();
</script>

Supported chart types

Because RGraph was originally a canvas only library there are more types of charts based around the canvas tag than the SVG tag. See the list below to see the types that are supported.

Canvas charts	SVG charts
Bar	Bar
Bipolar	Bipolar
Donut	Donut
Funnel	Funnel
Gantt	Gauge
Gauge	Horizontal bar
Horizontal bar	Line
Horizontal progress bar	Pie
Line	Radar
Meter	Rose
Odometer	Scatter
Pie	Semi-circular progress
Radar	Waterfall
Rose
Radial Scatter
Scatter
Semi-circular progress
Thermometer
Vertical progress bar
Waterfall

The SVG Bar chart library can be configured to show a Vertical progress bar and the Horizontal bar chart can be configured to show Horizontal progress bars.

Key features

Some of the key features of RGraph include:

• Responsive support (changing the chart based on the browser size) (Canvas, SVG)
• Accessible or native canvas text (selectable/copyable text) (Canvas)
• 3D chart support (Canvas, SVG)
• Animated charts (Canvas, SVG)
• Events (for example onclick, onmousemove, ondraw) (Canvas, SVG)
• Dynamic updates (dynamic, interactive charts) (Canvas, SVG)
• Download as image (Canvas)
• Interactive adjusting (Canvas)
• Tooltips (Canvas, SVG)
• Annotation (draw on the chart with your mouse) (Canvas)
• Context menus (canvas)

Data import tools

RGraph has data import utilities to help you retrieve your data and produce charts with it. These consist of a CSV file import utility for connecting to CSV files on your server, a Google Sheets import utility for connecting to a Google Sheets spreadsheet, AJAX functions for retrieving data via AJAX and documentation about importing data from server-side databases.

Documentation for the CSV import utility

Documentation for the Google Sheets import utility

Documentation for the AJAX functions

Documentation about using Server-side data

Ongoing development

New versions of RGraph are released every 2-3 months - development is ongoing. Currently (December 2019) the focus is on unifying the X and Y axis drawing across all the canvas libraries that use axes. This means that the Bar, Gantt, Horizontal bar, Line, Scatter and Waterfall will all use the same code to draw their X and Y axes just like the SVG libraries currently do.

License

RGraph is published using the Open Source MIT license and therefore free-to-use for any purpose.

Mentions

In July 2014, Salesforce made RGraph available to be plugged into the reporting and dashboard tools on its mobile platform Salesforce1 among six third-party visualization tools, together with Google Charts, D3.js, CanvasJS, Chart.js, and HighCharts.

In Ian F. Darwin's book "Android Cookbook: Problems and Solutions for Android Developers," RGraph is recommended as an alternative to creating Android charts in pure Java.

External links

• Official website