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.
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!
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.
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.
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:
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:
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"]
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:
Customizing the HTML tables that are produced is easy. For instance, to supply the table's
<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
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.
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:
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
[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:email@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
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
To tweak the way your preview looks, you can use the
[gdoc key="http://example.com/my_final_paper.pdf" style="min-height:780px;border:none;"]