Need technical support? Please visit the WordPress Plugin directory for up-to-date information about this plugin. Posting to the Support Forum for Inline Google Spreadsheet Viewer is where you’re more likely to get more help faster, rather than leaving a comment here.

Here are some live examples showing charts, graphs, and tables made with the Inline Google Spreadsheet Viewer that all use this Google Spreadsheet:

The default HTML table displayed by Inline Google Spreadsheet Viewer:

Player
Team
Points
Games
John SmithPirates33
Andrea MillerNinjas62
Nancy GlasskillAliens33
José RodriguezRobots25
Keith McGrawPirates63
Lily RiverrunNinjas26
Kim SettlebackRobots53
Judy DemeterAliens82

A Column chart comparing individual players:

The above column chart is created using the shortcode:

[gdoc
    key="https://docs.google.com/spreadsheets/d/16SrlMkySbxfpxD1zi7ssvZAYkpS1gC91fk2wAl4ngVg/edit"
    title="Points earned and games played, by player"
    chart="Column"
    query="select A, C, D"
]

A Bar chart showing the relative ranking of each team:

The above bar chart is created using the shortcode:

[gdoc
    key="https://docs.google.com/spreadsheets/d/16SrlMkySbxfpxD1zi7ssvZAYkpS1gC91fk2wAl4ngVg/edit"
    title="Team ranking, by total score"
    chart="Bar"
    query="select B, sum(C) group by B order by sum(C)"
]

A Pie chart showing the relative breakdown of points earned by players on the Aliens team:

The above pie chart is created using the shortcode:

[gdoc
    key="https://docs.google.com/spreadsheets/d/16SrlMkySbxfpxD1zi7ssvZAYkpS1gC91fk2wAl4ngVg/edit"
    title="Points scored by Aliens team members, by player"
    chart="Pie"
    query="select A, C where B='Aliens'"
]

You can also set an arbitrary CSV file (or web service endpoint that produces CSV data) to be your datasource. These CSV files can also be query‘ed just like Google Spreadsheets. Here’s what the default DataTables-enhanced view looks like, using an arbitrary CSV file, with a custom query:

Error requesting data: cURL error 28: Operation timed out after 5001 milliseconds with 0 bytes received

The above table was created using the shortcode:

[gdoc
    key="http://viewportsizes.com/devices.csv"
    query="select `Device Name`,`OS Version`,`Release Date` where `Platform`='Android'"
]

Overview of Inline Google Spreadsheet Viewer features

The Inline Google Spreadsheet Viewer readme file contains a thorough overview of its features. A brief summary of those features are below. Please read the readme file for a complete description of all included features.

Easily turn data stored in a Google Spreadsheet into a beautiful interactive chart or graph, a sortable and searchable table, or both!

The Inline Google Spreadsheet Viewer fetches a publicly shared Google Spreadsheet using a [gdoc key=""] WordPress shortcode, then renders it as an HTML table or interactive chart, embedded in your blog post or page. The only required parameter is key, which specifies the document you’d like to retrieve and will render a feature-rich table. Additional parameters let you customize how you display your data in the table, or transforms the table into an interactive bar chart, pie chart, or other information visualization.

Your spreadsheet must be shared using either the “Public on the web” or “Anyone with the link” options. Currently, private Google Spreadsheets or Spreadsheets shared with “Specific people” are not supported.

After setting the appropriate Sharing setting, copy the URL you use to view the Spreadsheet from your browser’s address bar into the shortcode. For example, to display the spreadsheet at https://docs.google.com/spreadsheets/d/ABCDEFG/edit#gid=123456, use the following shortcode in your WordPress post or page:

[gdoc key="https://docs.google.com/spreadsheets/d/ABCDEFG/edit#123456"]

If your spreadsheet uses the “old” Google Spreadsheets, you need to ensure that your spreadsheet is “Published to the Web” and you need to copy only the “key” out of the URL. For instance, if the URL of your old Google Spreadsheet is https://docs.google.com/spreadsheets/pub?key=ABCDEFG, then your shortcode should look like this:

[gdoc key="ABCDEFG"]

To create an interactive chart from your Spreadsheet’s data, use the chart attribute to a supported chart type. These include:

  • Area charts
  • Bar charts
  • Bubble charts
  • Candlestick charts
  • Column charts
  • Combo charts
  • Histogram charts
  • Line charts
  • Pie charts
  • Scatter charts
  • Stepped area charts

For example, if you have a Google Spreadsheet for a sports league that records the goals each team has scored (where the first column is the team name and the second column is their total goals), you can create a bar chart, with an optional title, from that data using a shortcode like this:

[gdoc key="ABCDEFG" chart="Bar" title="Total goals per team"]

To render an HTML table with additional metadata, such as supplying the table’s title, summary, <caption>, and a customized class value, you can do the following:

[gdoc key="ABCDEFG" class="my-sheet" title="Tooltip text displayed on hover" summary="An example spreadsheet, with a summary."]This is the table's caption.[/gdoc]

The above shortcode will produce HTML that looks something like the following:

<table id="igsv-ABCDEFG" class="igsv-table my-sheet" title="Tooltip text displayed on hover" summary="An example spreadsheet, with a summary.">
    <caption>This is the table's caption.</caption>
    <!-- ...rest of table code using spreadsheet data here... -->
</table>

You can also strip a certain number of rows (e.g., strip="3" omits the top 3 rows of the spreadsheet).

For “old” Google Spreadsheets, you can use the gid attribute to fetch data from a worksheet other than the first one (the one on the far left). For example, to display a worksheet published at https://spreadsheets.google.com/pub?key=ABCDEFG&gid=4, use the following shortcode in your WordPress post or page:

[gdoc key="ABCDEFG" gid="4"]

The header_rows attribute lets you specify how many rows should be rendered as the table header. For example, to render a worksheet’s top 3 rows inside the <thead> element, use:

[gdoc key="ABCDEFG" header_rows="3"]

Be default, all tables are progressively enhanced with jQuery DataTables to provide sorting, searching, and pagination functions on the table display itself. If you’d like a specific table not to include this functionality, use the no-datatables class in your shortcode. For instance:

[gdoc key="ABCDEFG" class="no-datatables"]

For DataTables-enhanced tables, you can also specify columns that you’d like to “freeze” when the user scrolls large tables horizontally. To do so, use the FixedColumns-left-N and FixedColumns-right-N classes, where N is the number of columns you’d like to freeze. For instance, to display the three left-most columns and the right-most column in a fixed (frozen) position, use the following in your shortcode:

[gdoc key="ABCDEFG" class="FixedColumns-left-3 FixedColumns-right-1"]

Web addresses and email addresses in your data are turned into links. If this causes problems, you can disable this behavior by specifying no to the linkify attribute in your shortcode. For instance:

[gdoc key="ABCDEFG" linkify="no"]

You can pre-process your Google Spreadsheet before retrieving data from it by passing a Google Charts API Query Language query to the shortcode’s query attribute. This lets you interact with the data in your Google Spreadsheet as though the spreadsheet were a relational database table. For instance, if you wish to display the team that scored the most goals on your website, you might use a shortcode like this to query your Google Spreadsheet and display the highest-scoring team:

[gdoc key="ABCDEFG" query="SELECT team WHERE max(goals)"]

Queries are also useful if your spreadsheet contains complex data from which many different charts can be created, allowing you to select only the parts of your spreadsheet that you’d like to use to compose the interactive chart.

107 comments

  1. Sheldon says:

    Hi,

    Great plugin. I would like to know how to display multiple worksheets of the same file in one. The example at the top of this page is exactly what I’m looking for i.e. “Sheet1” and “Sheet2”.

    Thanks
    Sheldon

  2. Garvin says:

    Hi there,

    thanks for the greatful Plugin.

    Is it possible, that the view will automaticaly switch to “show 25 entries”?

    Best regards

  3. Meitar says:

    I am interested in removing all the buttons (print, csv, pdf, etc.) and rewriting the labels (e.g., “1 to 1 of 1 entries”) to be in my local language, Hebrew. How is this possible? Thanks!

    Yes, add the attribute/value pair lang="he-IL" to your shortcode.

    a) Is it possible to fit the contents to the screen width

    Yes, this is controlled in your theme. Just style your table however you want in your theme’s style.css file. You can also apply inline styles via the style attribute of this shortcode.

    How to have a fixed header row at the bottom.

    You can do this with plain CSS or you can add the FixedHeader extension yourself, although this is slated for inclusion into the plugin proper in the next major release.

    I would like to know how to display multiple worksheets of the same file in one. The example at the top of this page is exactly what I’m looking for i.e. “Sheet1″ and “Sheet2″.

    Each shortcode invocation can only display one sheet, but you can have as man shortcodes as you want. If both shortcodes reference the same Google Spreadsheet with different sheets, use the gid to choose which sheet from within the Spreadsheet you want to view.

    Is it possible, that the view will automaticaly switch to “show 25 entries”?

    Yes, add the attribute/value pair datatables_page_length="25" to your shortcode. Refer to the plugin’s README file for a complete list of available attributes.

    I’m looking to format the spreadsheet to auto fit or allow me to control the widths of the columns…Is this possible?

    Is there a way to have Horizontal and Vertical lines like a spreadsheet has?

    Both of these things are controlled by your theme’s style.css file. Write whatever CSS you want to style your table however you want.

  4. Alicia says:

    I only want users to be able to search the Google spreadsheet, then only one cell pops up. I do not want them to be able to see the contents of the entire spreadsheet. Just what they type into the search bar. Is that possible?

Leave a Reply

Your email address will not be published. Required fields are marked *

You can encrypt your comment so that only Meitar can read it.