https://github.com/zingchart/google-spreadsheet-plugin

Module to import data from your Google Spreadsheet into ZingChart.
https://github.com/zingchart/google-spreadsheet-plugin

Last synced: 9 months ago
JSON representation

Module to import data from your Google Spreadsheet into ZingChart.

• Host: GitHub
• URL: https://github.com/zingchart/google-spreadsheet-plugin
• Owner: zingchart
• Created: 2016-04-22T00:01:29.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2016-04-22T16:48:15.000Z (about 10 years ago)
• Last Synced: 2025-01-15T00:43:58.597Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 97.7 KB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Importing From a Published Google Spreadsheet

---------------------------------------------

To import data from your Google Spreadsheet there are three easy steps that need to happen before you can use it in your charts.

1. You must publish your Google Spreadsheet to the web.

	- With your spreadsheet open select *File* and then click on *'Publish to the web...'*

	- Copy your spreadsheet's *key* which you can pull out of the URL as follows: `https://docs.google.com/spreadsheets/d//edit#gid=0`

2. Include the script from this repo in your chart's html file. `',

        id: '<Your Chart Id>',

        width: 600,

        height: 400,

        data: yourConfig

   });

	```

### Formatting the Spreadsheet

To specify a **chart title** set the 'sheet' label on your GSS like this:

![Chart Title](imgs/gss-chart-title.png)

To specify the x-axis labels, this will be the first column. As in the image above, the first column with 'Time (sec)' will be treated as the x-axis title and the subsequent data will be treated as the x-axis-labels.

In this case there are three series: Device 1, Device 2, and Device 3. The label for each series is that of the first entry in each of these columns. So if you instantiate a legend, the legend-items will be: 'Device 1', 'Device 2', 'Device 3'.

Here is a chart rendered from the sample spreadsheet above.

![Rendered Chart](imgs/gss-chart-render.png)

The config used to render this chart is as follows:

```

var myConfig = {

    type: 'line',

    legend: {

        header: {

            text: 'Legend'

        },

        draggable: true

    },

    crosshairX: {

        lineColor: "#565656",

        lineStyle: "dashed",

        lineWidth: 2,

        alpha: 0.5,

        plotLabel: { //label assoicated to data points

            backgroundColor: "#ffffff",

            borderColor: "#d2d2d2",

            borderRadius: "5px",

            bold: true,

            fontSize: "12px",

            fontColor: "#111",

            shadow: true,

            shadowDistance: 2,

            shadowAlpha: 0.4

        },

        scaleLabel: { //label associated to scaleX index

            bold: true,

            backgroundColor: "#787878",

            borderRadius: 3,

            fontColor: "#eaeaea",

            fontSize: "12px",

            callout: true,

            paddingTop: 2

        },

        marker: {

            visible: false //default

        }

    },

    series: [

     // values will always be overridden by GSS

     // anything else will have precedense over GSS

     {lineColor: 'purple', values:[1,2,3,4,5]},

     {lineColor: 'green', values:[2,3,4,5,6,7]},

     {lineColor: 'black', values:[3,4,5,6,7,8]}

    ],

    scaleX: {

        zooming: true,

        label: {

            _text: 'this will overwrite the GSS label'

        }

    }

};

```