Embeds a published, public Google Spreadsheet in a WordPress post or page as an HTML table.
Author: | Meitar Moscovitz (profile at wordpress.org) |
WordPress version required: | 4.0 |
WordPress version tested: | 5.4.1 |
Plugin version: | 0.13.2 |
Added to WordPress repository: | 19-08-2010 |
Last updated: | 02-04-2020
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
|
Rating, %: | 88 |
Rated by: | 68 |
Plugin URI: | https://wordpress.org/plugins/inline-google-s... |
Total downloads: | 236 234 |
Active installs: | 9 000+ |
Click to start download |
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. Use a Google Spreadsheet or create a new one for your WordPress post or page. Make sure the Spreadsheet is "Public on the web." Learn more about Google Docs sharing settings. If your spreadsheet was created a while ago and still uses an "old" style Google Spreadsheet, use the "Publish as a webpage" option. Make a note of the URL of your Google Spreadsheet's editing page. On-screen help gives you instructions for using the plugin where you need it. Paste the address of your Google Spreadsheet into the By default, Inline Google Spreadsheet Viewer produces a feature-rich HTML table on your site. Sort columns, filter rows, browse long tables by page number, show and hide individual columns, or export the table data in three different formats (CSV, Excel, and PDF). The plugin's ouput includes plenty of CSS and JavaScript hooks for unlimited customizability. Read the FAQ for coding details. Transform your spreadsheet's data into an interactive graph or chart by adding a single shortcode attribute. More than a dozen chart types are supported, including Use all the features of the Google Query Language to pinpoint the exact data you want. Over 50 additional configuration options let you customize the exact way your graphs, charts, and tables look. This screenshot shows an example of what the previous screenshot might output with a given spreadsheet that contains data for the Aliens, Ninjas, Pirates, and Robots teams, and their player's respective points.
Yes. Changes you make to your Google Spreadsheets will be shown on your website within a few minutes. To improve your website’s performance, Inline Google Spreadsheet Viewer automatically caches spreadsheets for 10 minutes. If you are making many changes quickly and/or you don’t want to wait for the cache to expire on its own, you can add the After you save and reload the page, you should see near-instant updates. Note that disabling the plugin’s cache can result in decreased performance. Disabling the cache is recommended only for relatively small spreadsheets (less than 100 rows or so) or for debugging purposes.
Yes, if you’re able to change your theme’s style sheet. The plugin renders HTML with plenty of CSS hooks. Use the Additionally, each row ( Finally, both rows and cells (based on columns) are assigned an additional class of either
If you’re still using the “old” Google Spreadsheets, you should triple-check that you’ve published your spreadsheet. Google provides instructions for doing this. Be sure to follow steps 1 and 2 in Google Spreadsheets Help: Publishing to the Web. If you’re using the “new” Google Spreadsheets, be sure you’ve selected either the “Public on the web” or “Anyone with the link” Sharing options for your Google Spreadsheet.
If a Google Login page appears instead of the output of your GAS Web App, double check that you’ve deployed your Web App with the “Anyone, even anonymous” access permission. Learn more about GAS Web App permissions.
The best way to determine what’s wrong with a chart that isn’t displaying properly is to try displaying the chart’s data as a simple HTML table (by removing the Charts most likely fail to display because of a mismatch between the chart you are using and the format of your spreadsheet. Each type of chart expects to retrieve data with a certain number of rows and/or columns. If your Google Spreadsheet is not already designed to create data for a chart, you might be able to use the To learn more about the correct spreadsheet formats for each chart type, please refer to Google’s Chart Gallery documentation for the type of chart you are using.
If you’re using the “new” Google Spreadsheets, you can strip out columns by Alternatively, you can hide columns using CSS with code such as,
All of these DataTables options are accessible through shortcode attributes. The shortcode attribute is an underscore-separated version of the DataTables’s CamelCase’ed option name, prefixed with Similarly, to change how many rows appear per page, you need to use the DataTables Some DataTables options need to be given JavaScript array literals, such as in the case of the DataTables Note that when a JSON string literal is supplied in a shortcode attribute ( Alternatively, if you’re able to add JavaScript to your theme, you can do all of these things, and more because any and all DataTables-enhanced tables can be modified by using the DataTables API. For instance, to disable paging, add a JavaScript to your theme that looks like this: Or, to have your DataTables-enhanced table automatically sort itself by the second column in descending order: (Replace Please refer to the DataTables API reference manual for more information about customizing DataTables-enhanced tables. Another option for sorting your table, for example, is to use the
Using specific shortcode attributes, you can choose from a huge number of configurable options to customize the look and feel of your chart. The specific shortcode attributes available to you depend on the type of chart you chose. Refer to the Google Chart API documentation to learn which configuration options are available for which type of charts. Each configuration option is accessible through a shortcode of a similar name. For instance, the To create a 3D chart, specify With a few exceptions, the name of a shortcode attribute is always an underscore-separated translation of the camelCase name of the option in the Google Chart API. For instance, to disable chart interactivity by setting the chart’s Some configuration options call for an Note that when a JSON object is used as a value, the shortcode attribute’s value must be single-quoted. See Other Notes for a complete list of attribute for configurable chart options.
If your
Use the See the Other Notes page for a full list of registered script and stylesheet handles this plugin uses.
Screenshots
key
parameter of the plugin's shortcode ([gdoc key="YOUR_SPREADSHEET_URL_HERE"]
), then save your post.Area
, Bar
, Column
, Geo
, Pie
, Line
, Scatter
and more. Every chart can be customized with user-defined colors, opacity, and even 3D effects. There are over 50 configuration options to choose from. See the FAQ for a detailed list.
Will my website be updated when my Google Spreadsheets change?
use_cache="no"
attribute to your shortcode to disable the caching mechanism:[gdoc key="ABCDEFG" use_cache="no"]
The default style is ugly. Can I change it?
igsv-table
class from your style sheets to target the plugin’s <table>
element.<tr>
) and cell (<td>
) is assigned a specific class
attribute value. The first <tr>
element is assigned the row-1
class, the second is assigned row-2
, and the last row-N
where N
is the number of rows in the rendered table. Similarly, each cell is assigned a class based on its columnar position; the first cell in a row is assigned the col-1
class, the second col-2
, and so on:.igsv-table .row-2 .col-5 { /* styles for the cell in the 2nd row, 5th column */ }
odd
or even
, allowing for easy zebra-striping in CSS3 non-conformant browsers..igsv-table tr.odd { /* styles for odd-numbered rows (row 1, 3, 5...) */ }
.igsv-table tr.even { /* styles for even-numbered rows (row 2, 4, 6...) */ }
.igsv-table td.odd { /* styles for odd-numbered cells (column 1, 3, 5...) */ }
.igsv-table td.even { /* styles for even-numbered cells (column 2, 4, 6...) */ }
A table appears, but it’s not my spreadsheet’s data! And it looks weird!
A Google Login page appears where my Google Apps Script output should be.
Nothing appears where my chart should be.
chart
attribute from your shortcode), and seeing what the tabular data source looks like.query
attribute to select only the rows and/or columns that the chart
you’re using expects. Otherwise, consider creating a new sheet with the proper formatting and setting it as the key
in your shortcode.
Can I remove certain columns from appearing on my webpage?
select
ing only those columns you wish to retrieve by passing a Google Charts API Query Language query to the shortcode’s query
attribute. For example, to retrieve and display only the first, second, and third columns in a spreadsheet, use a shortcode like this:[gdoc key="ABCDEFG" query="select A, B, C"]
.col-4 { display: none; }
, for example.
How do I change the default settings, like can I turn paging off? Can I change the page length? Can I change the sort order?
datatables_
. For instance, to turn off paging, you need to set the DataTables paging
option to false
, so you would use a shortcode like this:[gdoc key="ABCDEFG" datatables_paging="false"]
pageLength
option, setting it to a number. Its default is 10
, so if you wanted to show 15 rows per page, you would use a shortcode like this:[gdoc key="ABCDEFG" datatables_page_length="15"]
order
option, which controls the initial sort order for a table. However, using square brackets ([
and ]
) inside a shortcode confuses the WordPress parser, so these characters must be URL-escaped (into %5B
and %5D
, respectively). Suppose you want your table to be sorted by the second column in descending order (instead of the first column in ascending order, which is the default). You need to supply a 2-dimensional array such as [[ 1, "desc" ]]
to DataTable’s order
option (column counting begins at 0). In a shortcode, with the square brackets URL-escaped, this becomes:[gdoc key="ABCDEFG" datatables_order='%5B%5B 2, "desc" %5D%5D']
"desc"
), it must be double-quoted, so the shortcode attribute value itself must be single-quoted.jQuery(window).load(function () {
jQuery('#igsv-MY_TABLE_KEY').dataTable().api().page.len(-1).draw();
});
jQuery(window).load(function () {
jQuery('#igsv-MY_TABLE_KEY').dataTable().api().order([1, 'desc']).draw();
});
MY_TABLE_KEY
with the Google Spreadsheet document ID of your spreadsheet, of course.)query
attribute and pass along an appropriate Google Charts API Query Language query that includes an order by
clause. In this case, however, you may want to disable DataTables’s client-side sorting, as the data will be sorted in the HTML source.
How do I customize my chart?
colors
configuration option is accessible to you through the chart_colors
attribute. It accepts a list of colors, which you supply to the shortcode in a similar way as you might provide a class
value:[godc key="ABCDEFG" chart="Pie" chart_colors="red green"]
chart_dimensions="3"
.enableInteractivity
option to false
, use a shortcode like:[gdoc key="ABCDEFG" chart="Pie" chart_enable_interactivity="false"]
Object
value. For these, the shortcode attribute value should be a JSON object. For instance, to use the different properties of the backgroundColor
option:[gdoc key="ABCDEFG" chart="Pie" chart_background_color='{"fill":"yellow","stroke":"red","strokeWidth":5}']
Why am I getting errors when I try to use the `query` attribute?
query
includes an angle bracket, such as a less than (<
) or a greater than (>
) sign, WordPress will assume you are trying to write HTML and strip everything except the first word of your query, resulting in a syntax error. Instead, use the URL-encoded equivalents of these characters (%3C
and %3E
, for <
and >
, respectively), which WordPress will pass to the plugin unmolested and which the plugin is specifically aware of how to handle correctly.
How do I remove unneeded stylesheets or JavaScripts that this plugin adds?
gdoc_enqueued_front_end_styles
or gdoc_enqueued_front_end_scripts
filter hooks. For instance, to prevent the plugin from enqueueing the JavaScript file for the Google Charts, use code like the following in your theme’s functions.php
file:function igsv_dequeue_google_charts_script ($scripts) {
unset($scripts['igsv-gvizcharts']);
return $scripts;
}
add_filter('gdoc_enqueued_front_end_scripts', 'igsv_dequeue_google_charts_script')
0.13.2
0.13.1
csv_headers
shortcode attribute adds support for Google Sheet Query Language HTTP endpoint headers
parameter. Using csv_headers=1
in your shortcode may help if you find headers exported from a Google Sheet are missing.0.13.0
key
value.0.12.9
0.12.8
0.12.7
0.12.6
0.12.5
chart_legend_position
attribute and update the documentation. This should be chart_legend
with a JSON object attribute value.0.12.4
0.12.3
0.12.2
Geo
chart type ([gdoc key="ABCDEFG" chart="Geo"]
).0.12.1
0.12
key
attribute values that are still using deprecated old-style document IDs.