Beautiful JavaScript charts for your websites

    // 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'],
                axes: false,
                marginTop: 35,
                shadow: false,
                colorsStroke: '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 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)
    {
        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 chart using the information retrieved above
        // from the spreadsheet
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: data,
            options: {
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                xaxisLabels: labels,
                xaxisLabelsOffsety: 5,
                colors: ['#A8E6CF','#DCEDC1','#FFD3B6','#FFAAA5'],
                colorsStroke: 'rgba(0,0,0,0)',
                shadow: false,
                xaxis: false,
                marginLeft: 50,
                marginBottom: 70,
                key: key,
                keyBoxed: false,
                keyPosition: 'margin',
                keyTextSize: 12,
                axesColor: '#aaa'
            }
        }).wave();
    });

    // Fetch the getdata.html file from the server
    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,
                hmargin: 10,
                tickmarks: 'endcircle',
                linewidth: 2,
                xaxisLabels: json.labels,
                tooltips: json.labels,
                colors: ['Gradient(red:#a00)'],
                shadow: true,
                shadowOffsetx: 3,
                shadowOffsety: -3,
                shadowBlur: 3
            }
        }).draw();
    });

<?php
    // This makes the code a bit clearer
    define('LF', "\n");
    
    // Make a string out of the 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 <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('            xaxisLabels: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"],' . LF);
    print('        }' . LF);
    print('    }).draw();' . LF);
    print('</script>');
?>