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 is the number representing the Worksheet to use.
The data is retrieved using this:
sheet.get('B2:M2') So this would get the
M columns on row
The labels are fetched with this:
xaxisLabels: sheet.get('B1:M1') which fetches the
M columns on the first row.
The other configuration for the chart is pretty standard stuff and the chart uses the
trace2() 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: