A Line chart using the Google Sheets connector

A Line chart using the Google Sheets connector. If you use Google Sheets to store your data then RGraph can connect directly to Google to retrieve your data.

View the bare-bones, stripped-down version of this demo

[No canvas support]

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="700" height="250">
    [No canvas support]
</canvas>
This is the code that generates the chart: