Want to add beautiful charts to your website?

    // 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.column(0),  // Get the first column which becomes the labels
            data    = csv.column(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'],
                xaxis: false,
                yaxis: false,
                marginTop: 35,
                shadow: false,
                colorsStroke: 'rgba(0,0,0,0)',
                textSize: 14,
                labelsAbove: true,
                labelsAboveSpecific: labels,
                labelsAboveSize: 14,
                labelsAboveOffset: -35,
                labelsAboveColor: 'white'
            }
        }).wave();
    }

    // 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', '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: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();
    });

    // 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,
                marginInner: 10,
                xaxisLabels: json.labels,
                tooltips: json.labels,
                colors: ['Gradient(red:#a00)'],
                shadow: true,
                shadowOffsetx: 3,
                shadowOffsety: -3,
                shadowBlur: 3
            }
        }).draw();
    });

    // 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();
    });

<?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>');
?>

    //
    // This shows a 3D Bar chart that has an offset X-axis.
    // The colors are gradients - which goes a bit further
    // to creating a realistic 3D appearance. Smaller
    // screens are accommodated by the responsive()
    // function.
    //
    bar = new RGraph.Bar({
        id: 'cvs',
        
        // The data array is a 2-dimension array which results
        // in a grouped chart being displayed.
        data: [[-4,5,3],[5,-2,1],[4,4,2],[8,16,11],[15,11,13],[-2,-5,1],[-1,-2,-3]],
        
        options: {
            variant: '3d',
            colorsStroke: 'rgba(0,0,0,0)',
            colors: [
                'Gradient(#faa:#fbb)',
                'Gradient(#aaa:#bfb)',
                'Gradient(#aaf:#bbf)'
            ],
            marginTop: 30,
            marginLeft: 45,
            marginBottom: 80,
            xaxisColor: '#ddd',
            xaxisTickmarks: false,
            yaxisColor: '#ddd',
            yaxisScaleUnitsPost: 'km',
            yaxisScaleMax: 20,
            yaxisScaleMin: -5,
            yaxisTickmarks: false,
            
            // Add and configure the tooltips. They have a
            // Larger font size and a bit more padding than
            // the default. They also use tooltip template macros
            // so you only have to give a single tooltip template
            // (ie a single string of text) and then RGraph will
            // insert the relevant values.
            tooltips: 'Result: %{value},000m',
            tooltipsOffsetx: 3,
            tooltipsCss: {
                fontSize: '105%',
                fontFamily: 'Arial, sans-serif',
                fontWeight: 'bold',
                paddingRight: '10px',
                paddingLeft: '10px',
                paddingTop: '10px',
                paddingBottom: '10px',
                textAlign: 'center'
            },
            shadow: false,
            backgroundGridColor: '#eee'
        }
    }).draw()

    // The responsive configuration has two options - one for
    // screens which are at most 850 pixels wide and one for
    // larger screens
    .responsive([
        {maxWidth: null, width: 600, height: 250, options: {xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],textSize: 12,marginInner:10}},
        {maxWidth: 850,  width: 350, height: 200, options: {xaxisLabels: ['Mon','Tue','Wed','Thu'],textSize: 8, marginInner: 2}}
    ]);