{"id":136,"date":"2011-02-25T19:47:20","date_gmt":"2011-02-25T19:47:20","guid":{"rendered":"http:\/\/demo.aivahthemes.com\/hostme\/?page_id=136"},"modified":"2011-02-25T19:47:20","modified_gmt":"2011-02-25T19:47:20","slug":"google-chart","status":"publish","type":"page","link":"https:\/\/www.aivahthemes.com\/hostme\/shortcodes\/google-chart\/","title":{"rendered":"Google Chart"},"content":{"rendered":"<h1>Google Charts Shortcode<\/h1>\n<p>The Google Charts is extremely simple way to create charts  from some data and embed it in a website. The theme provides your Google Chart shortcode that makes the process even easier and lets create few types of charts. It is really simple to post using the shortcode.<\/p>\n<h2>3D Pie Chart Title<\/h2>\n    <script type=\"text\/javascript\">\n        google.charts.load(\"current\", {packages:[\"corechart\"]});\n\t\tgoogle.charts.setOnLoadCallback(function() {\n\t\t\tdraw_chart_6a6f8ba4c493e();\n\t\t});\n\n        function draw_chart_6a6f8ba4c493e() {\n            var data = new google.visualization.DataTable();\n\t\t\tdata.addColumn('string', 'Label');\n\t\t\tdata.addColumn('number', 'Value');\n\t\t\tdata.addRows([\n\t\t\t\t['Reffering+sites', 70],['Google', 25],['Yahoo', 20.01],['Other', 4.99]\t\t\t]);\n\n            var options = {\n                title: '3D Pie Chart Title',\n                backgroundColor: '#bg,s,ffffff',\n                width: 630,\n                height: 250,\n\t\t\t\tcolors: [\"058DC7\",\"50B432\",\"ED561B\",\"EDEF00\"]            };\n\n            var chart = new google.visualization.PieChart(document.getElementById('chart_6a6f8ba4c493e'));\n            chart.draw(data, options);\n        }\n    <\/script>\n    <div id=\"chart_6a6f8ba4c493e\" style=\"width: 630px; height: 250px;\"><\/div>\n    \n<h4 class=\"toggle\"><a href=\"#\">Get The Code<\/a><\/h4><div class=\"toggle_content\" style=\"display: none;\"><div class=\"toggleinside\">\n<pre>\n&#091;chart\ndata=\"70,25,20.01,4.99\"\nlabels=\"Reffering+sites|Google|Yahoo|Other\"\ncolors=\"058DC7,50B432,ED561B,EDEF00\"\nbg=\"bg,s,ffffff\"\nsize=\"630x250\"\ntitle=\"3D Pie Chart Title\"\ntype=\"pie\"]\n<\/pre>\n<\/div><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n<h2>Line Chart Title<\/h2>\n    <script type=\"text\/javascript\">\n        google.charts.load(\"current\", {packages:[\"corechart\"]});\n\t\tgoogle.charts.setOnLoadCallback(function() {\n\t\t\tdraw_chart_6a6f8ba4c4a0a();\n\t\t});\n\n        function draw_chart_6a6f8ba4c4a0a() {\n            var data = new google.visualization.DataTable();\n\t\t\tdata.addColumn('string', 'Label');\n\t\t\tdata.addColumn('number', 'Value');\n\t\t\tdata.addRows([\n\t\t\t\t['2010', 70],['2011', 25],['2012', 20.01],['2013', 4.99]\t\t\t]);\n\n            var options = {\n                title: 'Line Chart Title',\n                backgroundColor: '#bg,s,ffffff',\n                width: 630,\n                height: 250,\n\t\t\t\tcolors: [\"058DC7\",\"50B432\",\"ED561B\",\"EDEF00\"]            };\n\n            var chart = new google.visualization.ColumnChart(document.getElementById('chart_6a6f8ba4c4a0a'));\n            chart.draw(data, options);\n        }\n    <\/script>\n    <div id=\"chart_6a6f8ba4c4a0a\" style=\"width: 630px; height: 250px;\"><\/div>\n    \n<h4 class=\"toggle\"><a href=\"#\">Get The Code<\/a><\/h4><div class=\"toggle_content\" style=\"display: none;\"><div class=\"toggleinside\">\n<pre>\n&#091;chart\ndata=\"70,25,20.01,4.99\"\nlabels=\"2010|2011|2012|2013\"\ncolors=\"058DC7,50B432,ED561B,EDEF00\"\nbg=\"bg,s,ffffff\"\nsize=\"630x250\"\ntitle=\"Line Chart Title\"\ntype=\"line\"]\n<\/pre>\n<\/div><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n<h2>Line Chart Title 2<\/h2>\n    <script type=\"text\/javascript\">\n        google.charts.load(\"current\", {packages:[\"corechart\"]});\n\t\tgoogle.charts.setOnLoadCallback(function() {\n\t\t\tdraw_chart_6a6f8ba4c4a74();\n\t\t});\n\n        function draw_chart_6a6f8ba4c4a74() {\n            var data = new google.visualization.DataTable();\n\t\t\tdata.addColumn('string', 'Label');\n\t\t\tdata.addColumn('number', 'Value');\n\t\t\tdata.addRows([\n\t\t\t\t\t\t\t]);\n\n            var options = {\n                title: 'Line Chart Title 2',\n                backgroundColor: '#bg,s,ffffff',\n                width: 630,\n                height: 250,\n\t\t\t\tcolors: [\"058DC7\",\"50B432\"]            };\n\n            var chart = new google.visualization.ColumnChart(document.getElementById('chart_6a6f8ba4c4a74'));\n            chart.draw(data, options);\n        }\n    <\/script>\n    <div id=\"chart_6a6f8ba4c4a74\" style=\"width: 630px; height: 250px;\"><\/div>\n    \n<h4 class=\"toggle\"><a href=\"#\">Get The Code<\/a><\/h4><div class=\"toggle_content\" style=\"display: none;\"><div class=\"toggleinside\">\n<pre>\n&#091;chart\ndata=\"0,25,50,75,100|2,33,43,17,25|0,25,50,75,100|0,20,25,40,75\"\nlabels=\"Begin|25|50|75|End\"\ncolors=\"058DC7,50B432\"\nbg=\"bg,s,ffffff\"\nsize=\"630x250\"\ntitle=\"Line Chart Title 2\"\ntype=\"xyline\"]\n<\/pre>\n<\/div><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n<h2>Scatter Chart Title<\/h2>\n    <script type=\"text\/javascript\">\n        google.charts.load(\"current\", {packages:[\"corechart\"]});\n\t\tgoogle.charts.setOnLoadCallback(function() {\n\t\t\tdraw_chart_6a6f8ba4c4ac7();\n\t\t});\n\n        function draw_chart_6a6f8ba4c4ac7() {\n            var data = new google.visualization.DataTable();\n\t\t\tdata.addColumn('string', 'Label');\n\t\t\tdata.addColumn('number', 'Value');\n\t\t\tdata.addRows([\n\t\t\t\t\t\t\t]);\n\n            var options = {\n                title: 'Scatter Chart Title',\n                backgroundColor: '#bg,s,ffffff',\n                width: 630,\n                height: 250,\n\t\t\t\tcolors: [\"058DC7\"]            };\n\n            var chart = new google.visualization.ColumnChart(document.getElementById('chart_6a6f8ba4c4ac7'));\n            chart.draw(data, options);\n        }\n    <\/script>\n    <div id=\"chart_6a6f8ba4c4ac7\" style=\"width: 630px; height: 250px;\"><\/div>\n    \n<h4 class=\"toggle\"><a href=\"#\">Get The Code<\/a><\/h4><div class=\"toggle_content\" style=\"display: none;\"><div class=\"toggleinside\">\n<pre>\n&#091;chart\ndata=\"0,10,20,30,40,50,60,70,80,90,100|50,52,56,63,70,80,92,85,75,60,43\"\nlabels=\"1|2|3|4|5|6|7|8|9|10\"\ncolors=\"058DC7\"\nbg=\"bg,s,ffffff\"\nsize=\"630x250\"\ntitle=\"Scatter Chart Title\"\ntype=\"scatter\"]\n<\/pre>\n<\/div><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n<h2>Pie Chart Title<\/h2>\n    <script type=\"text\/javascript\">\n        google.charts.load(\"current\", {packages:[\"corechart\"]});\n\t\tgoogle.charts.setOnLoadCallback(function() {\n\t\t\tdraw_chart_6a6f8ba4c4b19();\n\t\t});\n\n        function draw_chart_6a6f8ba4c4b19() {\n            var data = new google.visualization.DataTable();\n\t\t\tdata.addColumn('string', 'Label');\n\t\t\tdata.addColumn('number', 'Value');\n\t\t\tdata.addRows([\n\t\t\t\t['Reffering+sites', 70],['Google', 25],['Yahoo', 20.01],['Other', 4.99]\t\t\t]);\n\n            var options = {\n                title: 'Pie Chart Title',\n                backgroundColor: '#bg,s,ffffff',\n                width: 630,\n                height: 250,\n\t\t\t\tcolors: [\"058DC7\",\"50B432\",\"ED561B\",\"EDEF00\"]            };\n\n            var chart = new google.visualization.ColumnChart(document.getElementById('chart_6a6f8ba4c4b19'));\n            chart.draw(data, options);\n        }\n    <\/script>\n    <div id=\"chart_6a6f8ba4c4b19\" style=\"width: 630px; height: 250px;\"><\/div>\n    \n<h4 class=\"toggle\"><a href=\"#\">Get The Code<\/a><\/h4><div class=\"toggle_content\" style=\"display: none;\"><div class=\"toggleinside\">\n<pre>\n&#091;chart\ndata=\"70,25,20.01,4.99\"\nlabels=\"Reffering+sites|Google|Yahoo|Other\"\ncolors=\"058DC7,50B432,ED561B,EDEF00\"\nbg=\"bg,s,ffffff\"\nsize=\"630x250\"\ntitle=\"Pie Chart Title\"\ntype=\"pie2d\"]\n<\/pre>\n<\/div><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n<h2>Gom Chart Title<\/h2>\n    <script type=\"text\/javascript\">\n        google.charts.load(\"current\", {packages:[\"corechart\"]});\n\t\tgoogle.charts.setOnLoadCallback(function() {\n\t\t\tdraw_chart_6a6f8ba4c4b80();\n\t\t});\n\n        function draw_chart_6a6f8ba4c4b80() {\n            var data = new google.visualization.DataTable();\n\t\t\tdata.addColumn('string', 'Label');\n\t\t\tdata.addColumn('number', 'Value');\n\t\t\tdata.addRows([\n\t\t\t\t['Forty', 40]\t\t\t]);\n\n            var options = {\n                title: 'Gom Chart Title',\n                backgroundColor: '#bg,s,F7F9FA',\n                width: 630,\n                height: 250,\n\t\t\t\tcolors: [\"058DC7\",\"50B432\",\"ED561B\",\"EDEF00\"]            };\n\n            var chart = new google.visualization.ColumnChart(document.getElementById('chart_6a6f8ba4c4b80'));\n            chart.draw(data, options);\n        }\n    <\/script>\n    <div id=\"chart_6a6f8ba4c4b80\" style=\"width: 630px; height: 250px;\"><\/div>\n    \n<h4 class=\"toggle\"><a href=\"#\">Get The Code<\/a><\/h4><div class=\"toggle_content\" style=\"display: none;\"><div class=\"toggleinside\">\n<pre>\n&#091;chart\ndata=\"40\"\nlabels=\"Forty\"\ncolors=\"058DC7,50B432,ED561B,EDEF00\"\nbg=\"bg,s,F7F9FA\"\nsize=\"630x250\"\ntitle=\"Gom Chart Title\"\ntype=\"gom\"]\n<\/pre>\n<\/div><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n<h2>Venn Chart Title<\/h2>\n    <script type=\"text\/javascript\">\n        google.charts.load(\"current\", {packages:[\"corechart\"]});\n\t\tgoogle.charts.setOnLoadCallback(function() {\n\t\t\tdraw_chart_6a6f8ba4c4bd2();\n\t\t});\n\n        function draw_chart_6a6f8ba4c4bd2() {\n            var data = new google.visualization.DataTable();\n\t\t\tdata.addColumn('string', 'Label');\n\t\t\tdata.addColumn('number', 'Value');\n\t\t\tdata.addRows([\n\t\t\t\t\t\t\t]);\n\n            var options = {\n                title: 'Venn Chart Title',\n                backgroundColor: '#bg,s,F7F9FA',\n                width: 630,\n                height: 250,\n\t\t\t\tcolors: [\"FF6342\",\"ADDE63\",\"63C6DE\"]            };\n\n            var chart = new google.visualization.ColumnChart(document.getElementById('chart_6a6f8ba4c4bd2'));\n            chart.draw(data, options);\n        }\n    <\/script>\n    <div id=\"chart_6a6f8ba4c4bd2\" style=\"width: 630px; height: 250px;\"><\/div>\n    \n<h4 class=\"toggle\"><a href=\"#\">Get The Code<\/a><\/h4><div class=\"toggle_content\" style=\"display: none;\"><div class=\"toggleinside\">\n<pre>\n&#091;chart\ndata=\"100,80,60,30,30,30,10\"\ncolors=\"FF6342,ADDE63,63C6DE\"\nbg=\"bg,s,F7F9FA\"\nsize=\"630x250\"\ntitle=\"Venn Chart Title\"\nadvanced=\"&amp;chdl=A|B|C\"\ntype=\"venn\"]\n<\/pre>\n<\/div><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Google Charts Shortcode The Google Charts is extremely simple way to create charts from some data and embed it in a website. The theme provides your Google Chart shortcode that makes the process even easier and lets create few types of charts. It is really simple to post using the shortcode. 3D Pie Chart Title [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":126,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-136","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.aivahthemes.com\/hostme\/wp-json\/wp\/v2\/pages\/136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aivahthemes.com\/hostme\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.aivahthemes.com\/hostme\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.aivahthemes.com\/hostme\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aivahthemes.com\/hostme\/wp-json\/wp\/v2\/comments?post=136"}],"version-history":[{"count":0,"href":"https:\/\/www.aivahthemes.com\/hostme\/wp-json\/wp\/v2\/pages\/136\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.aivahthemes.com\/hostme\/wp-json\/wp\/v2\/pages\/126"}],"wp:attachment":[{"href":"https:\/\/www.aivahthemes.com\/hostme\/wp-json\/wp\/v2\/media?parent=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}