{"id":4402,"date":"2013-11-22T13:32:57","date_gmt":"2013-11-22T13:32:57","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=4402"},"modified":"2013-11-22T13:35:10","modified_gmt":"2013-11-22T13:35:10","slug":"use-google-visualization-chart-data","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/","title":{"rendered":"How to use Google Visualization Chart for Your Data"},"content":{"rendered":"<p>This is very easy to use Google\u00a0Visualization Chart for your data to show amazing way to analyse your result<\/p>\n<p>Here is the simple code implementation and you can use this code in any programming language .<\/p>\n<p>There having various Google chart you can use here is the Pie Chart representation of your data.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"brush:js\">&lt;script type=\"text\/javascript\" src=\"https:\/\/www.google.com\/jsapi\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n      google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});\r\n      google.setOnLoadCallback(drawChart);\r\n      function drawChart() {\r\n        var data = google.visualization.arrayToDataTable([\r\n          ['Sale', 'Hours per Day'],\r\n\t  ['Hammer',14],['Nice Saw',13],\r\n          ['Hand Shovel heavy duty',10],\r\n          ['Shovel',6],['Circular Saw',6],\r\n          ['Plastic Ladder',5],['Chain Saw',5],\r\n          ['Hand Shovel cheap',4],\r\n          ['Metal Ladder',4],\r\n          ['Hand Shovel enforced',2],\r\n          ['Drill',2],['Wooden Ladder',1],\r\n          ['Smaller Shovel',1],\t\t\t  \r\n        ]);\r\n        var options = {\r\n          title: 'Top Selling Product'\r\n        };\r\n\r\n        var chart = new google.visualization.PieChart(document.getElementById('piechart-topproduct'));\r\n        chart.draw(data, options);\r\n      }\r\n    &lt;\/script&gt;\r\n\r\n&lt;div id=\"piechart-topproduct\" style=\"width: 900px; height: 500px; float:left;\"&gt;&lt;\/div&gt;<\/pre>\n<p>Display the Data like this<\/p>\n<p><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products.png\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-4403\" alt=\"top products\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products-300x187.png\" width=\"300\" height=\"187\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products-300x187.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products.png 693w\" sizes=\"(max-width: 300px) 100vw, 300px\" loading=\"lazy\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is very easy to use Google\u00a0Visualization Chart for your data to show amazing way to analyse your result Here is the simple code implementation and you can use this code in any programming language . There having various Google chart you can use here is the Pie Chart representation of your data. Code: &lt;script <a href=\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[251,4,79,137],"tags":[713,230,2064,3],"class_list":["post-4402","post","type-post","status-publish","format-standard","hentry","category-html5","category-joomla-2","category-jquery","category-virtuemart","tag-google","tag-html","tag-javascript","tag-joomla"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use Google Visualization Chart for Your Data - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Google Visualization Chart for Your Data - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"This is very easy to use Google\u00a0Visualization Chart for your data to show amazing way to analyse your result Here is the simple code implementation and you can use this code in any programming language . There having various Google chart you can use here is the Pie Chart representation of your data. Code: &lt;script [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-22T13:32:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-11-22T13:35:10+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products-300x187.png\" \/>\n<meta name=\"author\" content=\"Sandeep\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sandeep\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/\"},\"author\":{\"name\":\"Sandeep\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/53c1b6c4937da7467b0493e192cba16e\"},\"headline\":\"How to use Google Visualization Chart for Your Data\",\"datePublished\":\"2013-11-22T13:32:57+00:00\",\"dateModified\":\"2013-11-22T13:35:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/\"},\"wordCount\":69,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products-300x187.png\",\"keywords\":[\"Google\",\"html\",\"JavaScript\",\"joomla\"],\"articleSection\":[\"html5\",\"Joomla\",\"jQuery\",\"virtuemart\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/\",\"url\":\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/\",\"name\":\"How to use Google Visualization Chart for Your Data - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products-300x187.png\",\"datePublished\":\"2013-11-22T13:32:57+00:00\",\"dateModified\":\"2013-11-22T13:35:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#primaryimage\",\"url\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products-300x187.png\",\"contentUrl\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products-300x187.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Google Visualization Chart for Your Data\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/53c1b6c4937da7467b0493e192cba16e\",\"name\":\"Sandeep\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5beff2e054be0f90faa52b0b165374035b9d3f1ffa505dc3bfa0a1ac969bbbf2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5beff2e054be0f90faa52b0b165374035b9d3f1ffa505dc3bfa0a1ac969bbbf2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sandeep\"},\"sameAs\":[\"http:\/\/webkul.com\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/sandeep\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Google Visualization Chart for Your Data - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/","og_locale":"en_US","og_type":"article","og_title":"How to use Google Visualization Chart for Your Data - Webkul Blog","og_description":"This is very easy to use Google\u00a0Visualization Chart for your data to show amazing way to analyse your result Here is the simple code implementation and you can use this code in any programming language . There having various Google chart you can use here is the Pie Chart representation of your data. Code: &lt;script [...]","og_url":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2013-11-22T13:32:57+00:00","article_modified_time":"2013-11-22T13:35:10+00:00","og_image":[{"url":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products-300x187.png","type":"","width":"","height":""}],"author":"Sandeep","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sandeep","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/"},"author":{"name":"Sandeep","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/53c1b6c4937da7467b0493e192cba16e"},"headline":"How to use Google Visualization Chart for Your Data","datePublished":"2013-11-22T13:32:57+00:00","dateModified":"2013-11-22T13:35:10+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/"},"wordCount":69,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#primaryimage"},"thumbnailUrl":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products-300x187.png","keywords":["Google","html","JavaScript","joomla"],"articleSection":["html5","Joomla","jQuery","virtuemart"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/","url":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/","name":"How to use Google Visualization Chart for Your Data - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#primaryimage"},"thumbnailUrl":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products-300x187.png","datePublished":"2013-11-22T13:32:57+00:00","dateModified":"2013-11-22T13:35:10+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#primaryimage","url":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products-300x187.png","contentUrl":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2013\/11\/top-products-300x187.png"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/use-google-visualization-chart-data\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use Google Visualization Chart for Your Data"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/53c1b6c4937da7467b0493e192cba16e","name":"Sandeep","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5beff2e054be0f90faa52b0b165374035b9d3f1ffa505dc3bfa0a1ac969bbbf2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5beff2e054be0f90faa52b0b165374035b9d3f1ffa505dc3bfa0a1ac969bbbf2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sandeep"},"sameAs":["http:\/\/webkul.com"],"url":"https:\/\/webkul.com\/blog\/author\/sandeep\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/4402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=4402"}],"version-history":[{"count":1,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/4402\/revisions"}],"predecessor-version":[{"id":4404,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/4402\/revisions\/4404"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=4402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=4402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=4402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}