Want to easily add JavaScript charts to your website?

RGraph is a JavaScript charting library that makes fast and pretty charts for the web - it makes it easy to add interactive charts to your website
[No canvas support]
  • 100% Free and Open Source
  • Easy to use
  • Over 50 styles of responsive charts
  • Built on HTML5 technology
  • Great online documentation
  • Data import tools [more info]
  • Support straight from the developer
  • First released in 2008

 

 

Benefits of using RGraph to show charts on your website

  • Open Source
  • Charts can be responsive
  • Very versatile
  • 900+ demo pages available
  • 300+ pages of docs
  • 50+ chart types
  • Integrates easily
  • Cross-browser
  • Support direct from the author
  • First established in 2008
  • Open Source
  • Charts can be responsive
  • Very versatile
  • 900+ demo pages are available
  • 300+ pages of docs
  • 50+ chart types
  • Integrates easily
  • Cross-browser
  • Support direct from the author
  • First established in 2008

 

 

Demos of charts

Go to the demos section

In the download archive there are roughly 1000 demo pages which you can look at for either ideas or demonstrations of how things are done. About 70 of these are shown in the demos section on the website to give you an idea of what RGraph can do.

 

 

Four reasons to use RGraph

  • Four reasons to use RGraph: Number 1 - it's Free and Open Source
    Open Source
    RGraph uses the MIT license so it's completely unrestricted
  • Four reasons to use RGraph: Number 2 - it uses modern HTML5 and JavaScript technology
    HTML5 tech
    RGraph uses SVG, canvas and JavaScript
  • Four reasons to use RGraph: Number 3 - it's made from pure JavaScript
    Pure JavaScript
    Fast client-side JavaScript is used for easy integration
  • Four reasons to use RGraph: Number 4 - there are 50+ charts and variations available
    50+ charts
    There are lots of chart types and features available

 

 

Over 50 HOWTO guides

Looking to do a particular task? The RGraph documentation has over 50 HOWTO guides that take you through achieving specific tasks in straightforward, easy-to-follow steps. Some examples include:

 

 

Authentic-looking 3D charts

RGraph can make authentic-looking 3D Bar charts (as you can see above), Pie and Donut charts, Horizontal Bar charts and progress bars. There are lots of examples across both SVG and canvas of other types of charts. The configuration of these 3D charts is very easy to understand.

Read more about the 3D chart support in RGraph...

 

 

Six ways to easily connect to and import your data

1. CSV file connector

The csv import utility in RGraph makes it easy to fetch csv files and parse the data contained within them. It works via ajax, making a request to your server for the file and then parsing it into a usable format. View the CSV connector documentation page...

// Create the CSV object and pass it the location
// of the file to be read along with a function that creates
// the Bar chart. The function is given the data from the
// file as an argument.
new RGraph.CSV('/sample.csv', function (csv)
{
    // Get the first column of the data which is used as the labels
    var labels = csv.column(0),
        
        // Get the second column of the data which is used as the data
        data = csv.column(1),
        
        // Get the number of rows in the file
        numrows = csv.numrows,
        
        // Get the number of columns in the file
        numcols = csv.numcols;


    // Create the Bar chart
    var bar = new RGraph.Bar({
        id:'cvs',
        
        // Pass the data to the chart that was retrieved from the file
        data: data,

        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            title: 'An example of reading a CSV file',
            colors: ['#000'],
            xaxis: false,
            yaxis: false,
            marginTop: 35,
            shadow: false,
            colorsStroke: 'rgba(0,0,0,0)',
            textSize: 14,
            labelsAbove: true,
            
            // Use the labels that were retrieved from the data file
            labelsAboveSpecific: labels,

            labelsAboveSize: 14,
            labelsAboveOffset: -35,
            labelsAboveColor: 'white'
        }
    }).wave();
}

2. Google Sheets connector

If you keep your data in a Google Sheets spreadsheet (a free, cloud-based spreadsheet web-application) then by using the Google Sheets connector you can fetch that data and use it to create your RGraph charts. There are javascript versions of the connector (one for canvas and one forsvg but they're virtually identical) and also a php version should you prefer to connect to Google Sheets behind-the-scenes. View the Google Sheets connector documentation page...

// To connect to your Gooogle Sheets spreadsheet create a new RGraph Sheets
// object using your OAuth ID (<a href=\"/canvas/sheets.html#Setting-up-a-chart-thats-integrated-with-google-sheets\">see the Sheets documentation for more details</a>),
// the ID of the spreadsheet and the callback function that creates the chart.
// The RGraph.Sheets object is passed to the callback function as an
// argument so it doesn't need to be assigned to a variable when it's created
new RGraph.Sheets('YOUR OAUTH ID', 'SPREADSHEET ID', function (sheet)
{
    var labels = sheet.get('A2:A7'); // Get the labels from the spreadsheet
    var key    = sheet.get('B1:E1'); // Use the column headers (the names) as the key
    var data   = sheet.get('B2:E7'); // Get the data

    // Create and configure the chart using the information retrieved above
    // from the spreadsheet
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: data,
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            xaxisLabels: labels,
            xaxisLabelsOffsety: 5,
            xaxisColor: '#aaa',
            yaxisColor: '#aaa',
            colors: ['#A8E6CF','#DCEDC1','#FFD3B6','#FFAAA5'],
            colorsStroke: 'rgba(0,0,0,0)',
            shadow: false,
            marginLeft: 50,
            marginBottom: 70,
            key: key,
            keyBoxed: false,
            keyPosition: 'margin',
            keyTextSize: 12
        }
    }).wave();
});

3. AJAX connector

You can use the ajax functions in RGraph to fetch resources from your web-server. If you have your own ajax routines (eg the jquery functions) then they will work just as well. View the AJAX functions documentation page...

// Fetch the getdata.html file from the server. Remember that
// AJAX doesn't usually work across domains so the resource should
// be on the same web-server as the HTML file that contains your
// RGraph chart.
RGraph.AJAX.getJSON('/getdata.html?json', function (json)
{
    // Create a chart using the information from the JSON data
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: json.data,
        options: {
            marginLeft: 25,
            marginRight: 25,
            marginTop: 25,
            marginBottom: 25,
            marginInner: 10,
            xaxisLabels: json.labels,
            tooltips: json.labels,
            colors: ['Gradient(red:#a00)'],
            shadow: true,
            shadowOffsetx: 3,
            shadowOffsety: -3,
            shadowBlur: 3
        }
    }).draw();
});

4. HTML table connector

The html table connector allows you to import data directly from a <table> that's on the same page. If you want to, instead of giving it the id of a table you can also give it the entire html as a string. Once parsed there's an easy-to-use api that allows you to get hold of the data. View the HTML table utility documentation page...

// Fetch the data from an HTML table on the same page.
// Pass the function the ID of the table and a callback
// function which creates the chart.
RGraph.HTMLTable('myTable', function (table)
{
    // Fetch the data and the labels from the table
    var data   = table.column(1);
    var labels = table.column(0);

    // Another way of fetching your data and labels
    // that you might want to use, using the first row of
    // the column as the label (this works in a similar
    // way with the row() method):
    //
    // var data2   = table.column('data');
    // var labels2 = table.column('labels');

    // Create a chart using the information from the table data
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: data,
        options: {
            marginLeft: 25,
            marginRight: 25,
            marginTop: 25,
            marginBottom: 25,
            marginInner: 10,
            xaxisLabels: labels,
            colors: ['Gradient(red:#a00)'],
            shadow: true,
            shadowOffsetx: 3,
            shadowOffsety: -3,
            shadowBlur: 3
        }
    }).draw();
});

5. Server-side databases

Integrating with server-side data-retrieval is quite straight-forward and is just a matter of outputting the correctly formatted data and putting it in the right place on the page so that RGraph can make sense of it. View the server-side databases installation page...

<?php
    // Create some empty arrays and connect to the database
    $data   = [];
    $labels = [];
    $mysqli = new Mysqli("[hostname]","[username]","[password]","[database]");

    // Ensure that the database connection was successful
    if ($mysqli->connect_error) {
        printf('Error connecting to database: (%s) %s',
            $mysqli->connect_errno),
            $mysqli->connect_error,
        );
        exit;
    }

    // Perform the MySQL query to get the data that's needed for the chart
    $result = $mysqli->query(
        'SELECT `age_days`,
                COUNT(`id`) AS `count`
           FROM accounts
       GROUP BY `age_days`
       ORDER BY `age_days` DESC'
    );

    // Fetch the resultant data that the SQL query produces
    while($row = $result->fetch_assoc()) {
        $labels[] = $row['age_days'];
        $data[]   = $row['count'];
    }

    // Make strings out of the data and labels so that
    // they can be output as part of the HTML page
    $data_str   = sprintf('[%s]', join(', ', $data));
    $labels_str = sprintf('["%s"]', join(' days", "', $labels));
?>




<!-- Print out the <script> tags for the RGraph libraries -->
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>

<!-- Print out the &lt;canvas&gt; tag -->
<canvas id="cvs" width="700" height="300"></canvas>[No canvas support]</canvas>

<!--
    Print out the HTML <script> tag that contains the
    JavaScript code that creates the chart. Here is where we
    use the PHP variables that were created above.
-->
<script>
    new RGraph.Bar({
        id: "cvs",
        data: <?php echo $data_str ?>,
        options: {
            xaxisLabels: <?php echo $labels_str ?>
        }
    }).draw();
</script>

6. Query-string data

If you have data being passed to your page via the query-string (perhaps from an external source) then the query-string functions can help you retrieve it and parse it into a format that's usable by the RGraph charts. View the query-string documentation page...

// Get a JSON object from the query string (you might need to URLencode
// the query string when it's created). The entire URL might look like this:
//
// /script.html?myData={"data":[48,56],labels:["Dave","Robbie"],title:"Results"}
var myData = RGraph.GET.json('myData');

// Create and configure the chart using the object retrieved above
// from the query string
var bar = new RGraph.Bar({
    id: 'cvs',
    data: myData.data,
    options: {
        backgroundGridBorder: false,
        backgroundGridVlines: false,
        xaxis: false,
        yaxis: false,
        xaxisLabels: myData.labels,
        title: myData.title,
        titleSize: 18
    }
}).wave();

 

« Back to the top