With RGraph you can put beautiful JavaScript charts and graphs on your website

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 (MIT license) - 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 bar
    new RGraph.CSV('/sample.csv', function (csv)
    {
        var labels  = csv.getCol(0), // Get the first column which becomes the labels
            data    = csv.getCol(1), // Get the second column which becomes the data
            numrows = csv.numrows,   // Get the number of rows in the CSV
            numcols = csv.numcols;   // Get the number of cols in the CSV
        

        // Create the bar
        var bar = new RGraph.Bar({
            id:'cvs',
            data: data,
            options: {
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                title: 'An example of 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 ID of the spreadsheet and
    // the callback function that creates the Bar. 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)
    {
        var labels = sheet.get('A2:A7'); // Get the labels from the spreadsheet
        var key    = sheet.get('B1:E1'); // Use the column headers (ie the names) as the key
        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 Bar; 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 using the information from the JSON data
        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,
                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");
    
    // Make a string out of the array of data
    $myData = join(',', array(78,16,26,23,25,51,34,64,84,84));

    // Print out the HTML <script> tags for the RGraph libraries
    print('<script src="RGraph.common.core.js"></script>' . LF);
    print('<script src="RGraph.line.js"></script>' . LF);

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

    // Print out the HTML <script> tag that contains the JavaScript code that creates the Line
    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>');
?>