Easily turn data stored in a Google Spreadsheet 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 your Google Spreadsheet changes.
• Create beautiful interactive graphs and charts from your spreadsheet with ease.
• Embed almost any online document to view without leaving your blog.
• Use a powerful and flexible query language and a plethora of configuration options.

Quick start

Paste the URL of your public Google Spreadsheet on its own line in your WordPress post or page, then save your post. That's it. :) Your spreadsheet will appear in a sorted, searchable HTML table. See the screenshots for an example.

Your 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.

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!

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.

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, use the following shortcode in your WordPress post or page:

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

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

To create an interactive chart from your Spreadsheet's data, use the chart attribute with 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"]

Depending on the type of chart you chose, 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"]

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).

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

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

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, 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.

You can also supply the URL of any file online to load a preview of that document 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;"]