• RGRAPH IS OPEN SOURCE. With its beautiful data visualizations RGraph can make your datasets come alive as colorful charts and graphs across your webpages. So why should you use RGraph to make charts?
• Free and Open Source (MIT license) Read about RGraph and Richard Heyes here
• More than 60 types of free charts with 2D and 3D options
• RGraph offers SVG and canvas charts that are 100% JavaScript
• Multiple ways to import your data (eg Google Sheets, CSV files & AJAX)
• Web based reporting that's easy to use, customise and add to your website
• Fully documented with over 650 examples and active support to get you started
• Read reviews about RGraph (send me your page address or testimonial and I'll add it here)

Download and try it! Setup documentation See examples

What are JavaScript charts?

You can use a JavaScript charts library to put pretty, interactive charts on your websites. They're quick to load, good looking and they integrate easily with your website. Due to their typically small size they can reduce the footprint of your website and so lead to speed increases. They can be made to be interactive and so they can easily act as a centerpoint focus for your pages.

Since the charts came into popular usage in 2009 the abilities of these charts has grown and they now work well with technologies such as AJAX, CSV files, Google Sheets and server-side scripting (eg PHP, ASP and JSP). There are specific utilities for CSV files and Google docs and detailed documentation for server integration .

There are lots of tpes of visualisation available to you from straight-forward Bar charts to more esoteric chart types such as Fan charts for monetary visualisations or Funnel charts for visualising sales processes so there's sure to be one for you. More visualisations can be created by combining two or more chart types together.

Free for any type of use...

Are you running a commercial website? Perhaps your company website or webapp? Want to use RGraph on it? Go right ahead! RGraph is free for any sort of commercial use.

RGraph is also free for non-commercial use - so if you want to use it on your website then go right ahead. Blogs, charity sites, educational sites, NGOs - all types of websites are allowed.

RGraph is Free and Open Source!

RGraph is Free and Open Source - so you can do exactly what you want with it. You don't need permission or to crawl through a massive license agreement. Help yourself and have fun with RGraph!

    // Create the CSV object and pass it the file location of the CSV file and a function that
    // creates the chart
    new RGraph.CSV('/sample.csv', function (csv)
    {
        // Get the first column which becomes the labels
        var labels  = csv.getCol(0),
        
            // Get the second column which becomes the data
            data    = csv.getCol(1),
            
            // Get the number of rows in the CSV
            numrows = csv.numrows,
            
            // Get the number of cols in the CSV
            numcols = csv.numcols;
        

        // Create the chart
        var bar = new RGraph.Bar({
            id:'cvs',
            data: data,
            options: {
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                title: 'A chart using the CSV reader',
                colors: ['#000'],
                strokestyle: 'white',
                noaxes: true,
                gutterTop: 35,
                shadow: false,
                strokestyle: 'rgba(0,0,0,0)',
                textSize: 14,
                labelsAbove: true,
                labelsAboveSpecific: labels,
                labelsAboveSize: 14,
                labelsAboveOffset: -35,
                labelsAboveColor: 'white'
            }
        }).wave();
    }

    // Create a new RGraph Sheets object using the key 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('1ncvARBgXaDjzuca9i7Jyep6JTv9kms-bbIzyAxbaT0E', function (sheet)
    {
        // Get the labels from the spreadsheet by retrieving part of the first row
        var labels = sheet.get('A2:A7');
        
        // Use the column headers (ie the names) as the key
        var key = sheet.get('B1:E1');
        
        // Get the data from the sheet as the data for the chart
        var data   = [
            sheet.get('B2:E2'), // January
            sheet.get('B3:E3'), // February
            sheet.get('B4:E4'), // March
            sheet.get('B5:E5'), // April
            sheet.get('B6:E6'), // May
            sheet.get('B7:E7')  // June
        ];

        // 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,
                labels: labels,
                xlabelsOffset: 5,
                colors: ['#A8E6CF','#DCEDC1','#FFD3B6','#FFAAA5'],
                shadow: false,
                strokestyle: 'rgba(0,0,0,0)',
                scaleZerostart: true,
                noxaxis: true,
                gutterLeft: 50,
                gutterBottom: 70,
                key: key,
                keyBoxed: false,
                keyPosition: 'gutter',
                keyTextSize: 12,
                axisColor: '#aaa'
            }
        }).wave();
    });

    // Fetch the getdata.html file from the server
    RGraph.AJAX.getJSON('/getdata.html?json', function (json)
    {
        // Create a Bar chart using the information from the JSON structure - namely
        // the data and the labels
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: json.data,
            options: {
                gutterLeft: 25,
                gutterRight: 25,
                gutterTop: 25,
                gutterBottom: 25,
                hmargin: 10,
                tickmarks: 'endcircle',
                linewidth: 2,
                
                // Set the labels and tooltips to the labels that
                are in the JSON structure
                labels: json.labels,
                tooltips: json.labels,

                colors: ['Gradient(red:#a00)'],
                shadow: true,
                shadowOffsetx: 3,
                shadowOffsety: -3,
                shadowBlur: 3
            }
        }).draw();
    });

<?php
    // Makes the code a bit clearer
    define('LF', "\n");
    
    // This simply makes a string out of the array of data
    $myData = join(',', array(78,16,26,23,25,51,34,64,84,84));

    // This prints out the required HTML SCRIPT tags
    print('<script src="RGraph.common.core.js"></script>' . LF);
    print('<script src="RGraph.line.js"></script>' . LF);

    // This prints out the required HTML CANVAS tag
    print('<canvas id="cvs" width="600" height="200">[No canvas support]</canvas>' . LF . LF);

    // This prints out the HTML SCRIPT tag that contains the JavaScript code that creates the chart
    print('<script>' . LF);
    print('    var data = [' . $myData . '];' . LF . LF);
    print('    var line = new RGraph.Line({' . LF);
    print('        id: "cvs",' . LF);
    print('        data: data,' . LF);
    print('        options: {' . LF);
    print('            labels: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"],' . LF);
    print('        }' . LF);
    print('    }).draw();' . LF);
    print('</script>');
?>