Want to easily add JavaScript charts to your webpages?

• Download v6.11
• Demos...

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 (see the Sheets documentation for more details),
// 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 HTML <script> tags for the RGraph libraries -->
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>

<!-- Print out the <canvas> tag -->
<canvas id="cvs" width="700" height="300">[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();

Examples of charts