WordPress.org

Plugin Directory

Inline Google Spreadsheet Viewer

Embeds public Google Spreadsheets, Apps Scripts, or CSV files in WordPress posts or pages as HTML tables or interactive charts, and more.

Easily turn data stored in a Google Spreadsheet, CSV file, MySQL database, or the output of a Google Apps Script into a beautiful interactive chart or graph, a sortable and searchable table, or both. Embed live previews of PDF, XLS, DOC, and other file formats supported by the Google Docs Viewer. A built-in cache provides extra speed.

  • Update your blog post or page whenever a Google Spreadsheet or CSV file changes.
  • Create beautiful interactive graphs and charts from your Google Spreadsheet or CSV files with ease.
  • Customize the table's or chart's look and feel using a powerful and flexible query language and a plethora of configuration options.
  • Use data from a variety of different sources: Google Spreadsheets, Google Apps Scripts, CSV files, your WordPress database, or a remote MySQL database.
  • Embed almost any online document to view without leaving your blog.

Donations for this plugin make up a chunk of my income. If you continue to enjoy this plugin, please consider making a donation. :) Thank you for your support!

Quick start

Paste the URL of your public Google Spreadsheet or Google Apps Script Web App on its own line in your WordPress post or page, then save your post. That's it. :) Your data will appear in a sorted, searchable HTML table. Web App output will be displayed using the HTML defined by the Web App. See the screenshots for an example.

If using a Google Spreadsheet, the spreadsheet must be shared using either the "Public on the web" or "Anyone with the link" options (learn how to share your spreadsheet). Currently, private Google Spreadsheets or Spreadsheets shared with "Specific people" are not supported. Web Apps must be deployed with the "Anyone, even anonymous" access permissions. CSV files must be available to the public, without the need to log in to the site where they're hosted.

User guide

You can transform your spreadsheet into an interactive chart or graph, embed documents other than spreadsheets, and customize the HTML of your table using a [gdoc key=""] WordPress shortcode. The only required parameter is key, which specifies the document you'd like to retrieve. All additional attributes are optional.

Google Spreadsheets

After saving the appropriate Sharing setting, copy the URL you use to view the Google 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#gid=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"]

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"]

CSV files

Using a CSV file works the same way as Google Spreadsheets. Set the key to the URL of the file to display it as an HTML table:

[gdoc key="http://example.com/research_data.csv"]

HTML Tables

Customizing the HTML tables that are produced is easy. For instance, to supply 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>

By 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"]

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"]

Each table can be customized per-table, using shortcode attributes, or globally for your entire site, using the plugin's settings screen. You can freeze the table header, columns, control pagination length, and more. Refer to the Other Notes section for a full listing of supported customization attributes.

Charts

Data from Google Spreadsheets or CSV files can be graphed in interactive charts. To visualize your data as a chart, add the chart attribute to your shortcode and supply a supported chart type. You can make:

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

For example, if you have data 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"]

You can customize your chart with a number of options, such as colors. For example, to create a 3D red and green pie chart whose slices are labelled with your data's values:

[gdoc key="ABCDEFG" chart="Pie" chart_colors="red green" chart_dimensions="3" chart_pie_slice_text="value"]

Pre-processing data with Google Queries

You can pre-process your Google Spreadsheets or CSV files before retrieving data from them 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 or CSV file as though it 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, where the team name is the first column (column A) and that team's score is the second column (column B):

[gdoc key="ABCDEFG" query="select A where max(B)"]

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.

Using a MySQL Database

After an administrator enables the SQL queries option in the plugin's settings screen, privileged users can also retrieve data from the WordPress database by supplying the keyword wordpress to the key attribute of your shortcode along with a valid MySQL SELECT statement. This can be useful for displaying information that other plugins save in your website's database or that WordPress itself maintains for you.

For example, to show a table of user registration dates from the current blog:

[gdoc key="wordpress" query="SELECT display_name AS Name, user_registered AS 'Registration Date' FROM wp_users"]

Remote MySQL databases are also accessible by supplying a MySQL connection URL with valid access credentials. For example, to show the prices from an inventory database hosted by a MySQL server at server.example.com by logging in as user with the password password and querying for items that are in stock:

[gdoc key="mysql://user:password@server.example.com/inventory" query="SELECT sku AS 'Item No.', product_name AS Product, price AS Price WHERE in_stock=TRUE"]

Using Google Apps Script Web Apps

You can also supply the URL endpoint of any Google Apps Script Web App to retrieve the output from that app and insert it directly into your WordPress post or page. This works exactly the same way as Google Spreadsheets do, so you can use this feature to display arbitrary data on your WordPress site.

For example, suppose you maintain a GMail account for fans of your podcast to write you questions, and you want to automatically display some information from these emails on your website. Using GMail filters and labels, you can access these emails through a Google Apps Script that reads your email, counts the number of mail messages in your different labels, and returns that count as an HTML list fragment. Deploy that Google Apps Script as a Web App and supply its URL to the gdoc shortcode:

[gdoc key="https://script.google.com/macros/s/ABCDEFG/exec"]

Now your website is automatically updated whenever you receive a new question in email from your listeners.

Embedding other documents

You can also supply the URL of any file online to load a preview of that file on your blog. To do so, supply the file's URL as your key:

[gdoc key="http://example.com/my_final_paper.pdf"]

To tweak the way your preview looks, you can use the width, height, or style attributes:

[gdoc key="http://example.com/my_final_paper.pdf" style="min-height:780px;border:none;"]

Requires: 3.5 or higher
Compatible up to: 4.3
Last Updated: 2015-8-19
Active Installs: 4,000+

Ratings

4.5 out of 5 stars

Support

59 of 60 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
100,3,3
0,1,0
50,2,1
0,1,0
33,3,1
50,2,1
0,1,0 100,1,1
0,1,0
50,2,1
0,1,0
0,1,0
100,1,1 0,1,0
100,1,1
100,1,1
100,1,1
100,1,1 100,1,1 100,1,1 100,1,1
0,1,0
100,1,1