Beautiful and free JavaScript charts for your website

What's new with RGraph?

Using the SVG key in your charts
8th October 2017
A page illustrating the SVG key option was added. The SVG is supported in gutter mode only (the canvas key supports gutter and graph mode).
Read more...

How to lazy load images to make pages faster
3rd October 2017
A new HTML5 Effects blog post has been added that illustrates how you can utilise lazy loading of images to increase the load time of your webpage. Increasing the speed of your web pages has multiple benefits including better SEO, less user drop-off and less bandwidth usage (which if you pay for your bandwidth can be a god-send!
Read more...

How to use AJAX to update forms without pressing a submit button
12th September 2017
This is a blog post that demonstrates how you can use AJAX to auto-save the contents of forms instead of relying on the user pressing a submit button. If nothing else it could be used to autosave the contents of a form so that if the page is inadvertently refreshed then no data is lost.
Read more...

Open Source and Free to use

Fed up with the high cost of JavaScript charting libraries? RGraph isn't like that - it's Open Source and Free to use! And none of that faux Open Source Creative Commons licensing either. It's good old fashioned MIT licensed for maximum freedoms. No up-front payment, no recurring fees and no usage caps. You can use it as much or as little as you wish without paying anything. Just think of all the money you'll save! Maybe you'll have a pile of cash like the one pictured here...

Combine different types of charts

Many types of charts can be combined on a single SVG or canvas tag. This means you can combine types to create rich charts and dashboards. Here are some examples of combined charts:

A combined SVG Line and Bar chart

A combined SVG filled line and Bar chart

A wider than usual combined canvas Line and Bar chart

A canvas grouped Bar chart combined with VProgress bars

A canvas Bar chart combined with a Pie chart

A canvas Line chart that uses color transparency

If your data is stored in Google Sheets, a CSV file or via AJAX then RGraph has utilities for you! They allow you to fetch data directly without storing it as a file on your web-server first.

The Google Sheets importer talks directly to the Sheets app without having to download anything first so you can show real time representations of the data in your spreadsheets.

Similarly the CSV reader reads from your CSV file directly so you can again update the CSV and it is immediately reflected on your chart. If your CSV file is actually a script that outputs the results of database queries this can be a good way of handling database integration.

The CSV reader can also read the contents of tags in the page - so you could embed the CSV data in a tag and read that information with the CSV reader.

And finally both the canvas and SVG code bases have a set of AJAX functions that make it easy to perform AJAX queris and handle the resulting information. Such as:

<script>
    RGraph.SVG.AJAX.getJSON('/getdata.html?json', function (json)
    {
        new RGraph.SVG.Bar({
            id: 'chart-container',
            data: json.data,
            options: {
                xaxisLabels: json.labels
            }
        }).draw();
    });
</script>