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 2 in the arguments to the Sheets import utility (see below) is the number representing the worksheet to use.

// The constructor call to the Sheets import utility showing the use of the key along
// with specifying the worksheet to use.
new RGraph.Sheets('1ncvARBgXaDjzuca9i7Jyep6JTv9kms-bbIzyAxbaT0E', 2, 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.

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

<canvas id="cvs" width="700" height="250">
    [No canvas support]
</canvas>