A Line chart using the Google Sheets connector

Here we have a Line chart that is fetching its data and labels from a Google Sheet using the connector utility that's provided with RGraph.

The Sheets utility is created using the key of the spreadsheet - you can get this from the URL of your spreadsheet. The Line chart in the arguments to the Sheets import utility (see below) is the ID of the worksheet that's used.

// The constructor call to the Sheets import utility showing the use of your OAuth ID, the key and
// the worksheet to use.
new RGraph.Sheets(
    'AIzaSyDCODMgxGo6q4qgkw8haCwXr__8d5r7IIg',
    '1ncvARBgXaDjzuca9i7Jyep6JTv9kms-bbIzyAxbaT0E',
    'Line chart',
    function (sheet) {/* Create the chart here */});

The data is retrieved using this: sheet.get('B2:M2') So this would get the B thru M columns on row 2.

The labels are fetched with this: xaxisLabels: sheet.get('B1:M1') which fetches the B thru M columns on the first row.

The other configuration for the chart is pretty standard stuff and the chart uses the trace animation effect.

Note: The Google Sheets connector works standalone - ie without the RGraph common library. This means that you're free to use it in your own projects, without RGraph, if you want to.

This goes in the documents header:

<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.common.sheets.js" ></script>
<script src="../libraries/RGraph.line.js" ></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

<script>
    // Create a new RGraph Sheets instance that allows you to connect
    // to your Google Sheet spreadsheet and retrieve data from it. The
    // first argument is the OAuth ID (see the Google Sheets documentation
    // on the RGraph website). The second argument is the key (ie the
    // unique identifier) of the spreadsheet. This can be found in the URL
    // of your spreadsheet. The third argument is the worksheet if you
    // need to give one - this argument is optional
    new RGraph.Sheets(
        'AIzaSyBPofvjcDhOdet_U2Tr4-rSLItAgaCsMCM',
        '1ncvARBgXaDjzuca9i7Jyep6JTv9kms-bbIzyAxbaT0E',
        'Line chart',
    function (sheet)
    {
        // Now, in the Sheets object callback, the Line chart can be created
        // as normal
        new RGraph.Line({
            id: 'cvs',
            
            // Use the sheets object to retrieve some data from the spreadsheet that acts
            // as the data
            data: sheet.get('B2:M2'),

            options: {
                linewidth: 5,
                tickmarksStyle: null,
                
                // Use the sheets object again to retrieve some data from the
                // spreadsheet that acts as the X-axis labels on the chart
                xaxisLabels: sheet.get('B1:M1'),

                xaxisLabelsOffsety: 5,
                colors: ['#f66'],
                shadowOffsetx: 2,
                shadowOffsety: 2,
                colorsStroke: 'rgba(0,0,0,0)',
                xaxis: false,
                yaxis: false,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                marginLeft: 35,
                marginInner: 10,
                spline: true,
                responsive: [
                    {maxWidth: null,width:600,height:250,options:{textSize: 12}},
                    {maxWidth: 900,width:400,height:200,options:{textSize: 10}}
                ]
            }
        
        // Animate the chart using the trace() effect and add some responsive capability
        // to accommodate smaller screens
        }).trace();
    });
</script>