{"id":244,"date":"2014-12-15T23:16:51","date_gmt":"2014-12-16T04:16:51","guid":{"rendered":"http:\/\/jkthinks.synology.me\/?p=1700"},"modified":"2020-09-04T22:58:36","modified_gmt":"2020-09-04T22:58:36","slug":"how-to-insert-interactive-tables-and-charts-into-wordpress","status":"publish","type":"post","link":"https:\/\/www.jkthinks.com\/?p=244","title":{"rendered":"How to Insert Interactive Tables and Charts into WordPress"},"content":{"rendered":"<p>There are several ways to put graphs and tables into a blog on WordPress. One of them is Visualizer plug-in, which is easy to handle and straightforward to input data.<\/p>\n<p style=\"text-align: center;\">[ Barchart using Visualizer (example: Monthly Bill for Utility) ]<br \/>\n[visualizer id=&#8221;1656&#8243;]<\/p>\n<p>However, the plug-in is limited to use CSV file and does not reflect real-time changes of data. If you need to use CSV file in your desktop or a folder in a dropbox without further changes, Visualizer will be enough. Otherwise, I recommend you to use iframe function of Google sheets to insert an interactive table as follows:<\/p>\n<p>1. Create (or open) a sheet in Google Drive.<\/p>\n<p>2. Click \u201cFile\u201d and choose \u201cPublish to the Web\u201d.<\/p>\n<p><a href=\"http:\/\/jkthinks.synology.me\/wp-content\/uploads\/2014\/12\/interactiveTable1.jpg\"><img loading=\"lazy\" class=\"aligncenter wp-image-1704\" src=\"http:\/\/jkthinks.synology.me\/wp-content\/uploads\/2014\/12\/interactiveTable1-1024x596.jpg\" alt=\"interactiveTable1\" width=\"600\" height=\"350\" \/><\/a><\/p>\n<p>3. Click \u201cEmbed\u201d and check \u201cSheet1\u201d. Copy the iframe statement. You can check the status is interactive, which means that data will sync according to changes in an original Google sheet.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1705\" src=\"http:\/\/jkthinks.synology.me\/wp-content\/uploads\/2014\/12\/interactiveTable2-1024x658.jpg\" alt=\"interactiveTable2\" width=\"600\" height=\"386\" \/><\/p>\n<p>4. Put this iframe statement into TEXT (HTML) window of your post.<\/p>\n<p>The following table is the interactive table example.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/docs.google.com\/spreadsheets\/d\/1h4XBF-1ovwjJpw6rWin1xBDGb4eFcCwH_6OOtSfrs4Y\/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false\" width=\"600\" height=\"300\" align=\"center\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Inserting charts into WordPress is very similar with the previous case. I\u2019ll use the same sheet that I made for the former example.<\/p>\n<p>1. Click \u201cInsert\u201d and then \u201cChart\u201d<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1706\" src=\"http:\/\/jkthinks.synology.me\/wp-content\/uploads\/2014\/12\/interactiveChart1-1024x712.jpg\" alt=\"interactiveChart1\" width=\"600\" height=\"418\" \/><\/p>\n<p>2. Make a chart for the purpose and click the arrow button on the top right.<\/p>\n<p>3. Click \u201cPublish Chart\u201d<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1707\" src=\"http:\/\/jkthinks.synology.me\/wp-content\/uploads\/2014\/12\/interactiveChart2-1024x654.jpg\" alt=\"interactiveChart2\" width=\"600\" height=\"384\" \/><\/p>\n<p>4. From \u201cEmbed\u201d tab, copy and paste the iframe statement (you can change set-up of chart such as width and height)<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1708\" src=\"http:\/\/jkthinks.synology.me\/wp-content\/uploads\/2014\/12\/interactiveChart3-1024x675.jpg\" alt=\"interactiveChart3\" width=\"600\" height=\"396\" \/><\/p>\n<p>You can insert the interactive chart like the following one.<br \/>\n<iframe loading=\"lazy\" width=\"600\" height=\"371\" seamless frameborder=\"0\" scrolling=\"no\" src=\"https:\/\/docs.google.com\/spreadsheets\/d\/1h4XBF-1ovwjJpw6rWin1xBDGb4eFcCwH_6OOtSfrs4Y\/pubchart?oid=1639302614&amp;format=interactive\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are several ways to put graphs and tables into a blog on WordPress. One of them is Visualizer plug-in, which is easy to handle and straightforward to input data. [ Barchart using Visualizer (example: Monthly Bill for Utility) ] [visualizer id=&#8221;1656&#8243;] However, the plug-in is limited to use CSV file and does not reflect [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/www.jkthinks.com\/index.php?rest_route=\/wp\/v2\/posts\/244"}],"collection":[{"href":"https:\/\/www.jkthinks.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jkthinks.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jkthinks.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jkthinks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=244"}],"version-history":[{"count":1,"href":"https:\/\/www.jkthinks.com\/index.php?rest_route=\/wp\/v2\/posts\/244\/revisions"}],"predecessor-version":[{"id":284,"href":"https:\/\/www.jkthinks.com\/index.php?rest_route=\/wp\/v2\/posts\/244\/revisions\/284"}],"wp:attachment":[{"href":"https:\/\/www.jkthinks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jkthinks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jkthinks.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}