A Line chart using the Google Sheets connector

Summary: 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.

[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 2 is the number representing the Worksheet to use.

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: