{"id":74213,"date":"2012-03-16T10:00:09","date_gmt":"2012-03-16T14:00:09","guid":{"rendered":"http:\/\/wpmu.org\/?p=74213"},"modified":"2012-03-16T13:43:08","modified_gmt":"2012-03-16T17:43:08","slug":"how-to-use-google-chart-tools-in-your-wordpress-site","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-use-google-chart-tools-in-your-wordpress-site\/","title":{"rendered":"How to Use Google Chart Tools in Your WordPress Site"},"content":{"rendered":"<p><a rel=\"lightbox[74213]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/how-to-use-google-chart-tools-in-your-wordpress-site\/pie-graph-big\/\" rel=\"attachment wp-att-74214\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-74214\" title=\"pie-graph-big\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/03\/pie-graph-big.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"642\" height=\"485\" \/><\/a><br \/>\nBecause it is technically still in beta (a testing phase), many may not be aware that Google has a free and sophisticated chart\/graph creation tool. Once you make up your chart, you can easily embed it into a page or a post on your site &#8212; either through an embed code or with a plugin.<\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Getting Started with Google Chart Tools<\/strong><\/h2>\n<p>Perhaps the easiest place to start is with the <a href=\"http:\/\/code.google.com\/apis\/chart\/image\/docs\/chart_wizard.html\" target=\"_blank\">Chart Wizard<\/a>.<\/p>\n<p><a rel=\"lightbox[74213]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/how-to-use-google-chart-tools-in-your-wordpress-site\/chart-wizard\/\" rel=\"attachment wp-att-74216\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-74216\" title=\"chart-wizard\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/03\/chart-wizard.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"641\" height=\"629\" \/><\/a><\/p>\n<p><br \/>\nOnce you have your chart\/graph the way you like it, copy the embed code on the right-hand side. And then paste the code into the HTML view of your WordPress editor.<\/p>\n<p><a rel=\"lightbox[74213]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/how-to-use-google-chart-tools-in-your-wordpress-site\/copy-embed-code\/\" rel=\"attachment wp-att-74217\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-74217\" title=\"copy-embed-code\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/03\/copy-embed-code.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"640\" height=\"559\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a rel=\"lightbox[74213]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/how-to-use-google-chart-tools-in-your-wordpress-site\/paste-embed-code\/\" rel=\"attachment wp-att-74218\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-74218\" title=\"paste-embed-code\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/03\/paste-embed-code.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"639\" height=\"338\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>And here\u2019s the result.<\/p>\n<p><a rel=\"lightbox[74213]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/how-to-use-google-chart-tools-in-your-wordpress-site\/google-chart-result2\/\" rel=\"attachment wp-att-74230\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-74230\" title=\"google-chart-result2\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/03\/google-chart-result2.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"638\" height=\"376\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n\n<p>&nbsp;<\/p>\n<h2><strong>Google Chart Generator Plugin<\/strong><\/h2>\n<p>I did find a handy plugin (<a href=\"http:\/\/wordpress.org\/extend\/plugins\/google-chart-generator\/\" rel=\"noopener\" target=\"_blank\">Google Chart Generator<\/a>) that lets you hook into the Google Chart tool API without need for an account or any type of sign-up; however, its one drawback is that you don\u2019t get all the options you would get if you went directly to Google (including styling and color options).<\/p>\n<p>Once installed, you will find the settings in your admin area (Settings &gt; Google Chart Generator).<\/p>\n<p><a><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-74220\" title=\"settings\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/03\/settings.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"642\" height=\"1323\" \/><\/a><\/p>\n<p>In order to get the chart to appear once you\u2019re satisfied with it, copy the URL provided, and then paste it into your post via the media uploader. Paste it into the URL box of the media uploader as if you were pulling in an image from another site (because that\u2019s essentially what you\u2019re doing).<\/p>\n<p><a rel=\"lightbox[74213]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/how-to-use-google-chart-tools-in-your-wordpress-site\/copy-paste-url\/\" rel=\"attachment wp-att-74221\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-74221\" title=\"copy-paste-url\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/03\/copy-paste-url.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"641\" height=\"1100\" \/><\/a><\/p>\n<p>And here\u2019s the result.<\/p>\n<p><a rel=\"lightbox[74213]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/how-to-use-google-chart-tools-in-your-wordpress-site\/chart-from-plugin\/\" rel=\"attachment wp-att-74222\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-74222\" title=\"chart-from-plugin\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/03\/chart-from-plugin.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"641\" height=\"496\" \/><\/a> <\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google Docs lets you easily create and embed all sorts of charts and graphs into your site.<\/p>\n","protected":false},"author":84404,"featured_media":74215,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4],"tags":[],"tutorials_categories":[],"class_list":["post-74213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/74213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=74213"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/74213\/revisions"}],"predecessor-version":[{"id":216159,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/74213\/revisions\/216159"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/74215"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=74213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=74213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=74213"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=74213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}