{"id":3332,"date":"2018-06-28T20:58:50","date_gmt":"2018-06-28T20:58:50","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3332"},"modified":"2018-06-28T21:07:31","modified_gmt":"2018-06-28T21:07:31","slug":"make-responsive-pie-chart-with-google-charts","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/","title":{"rendered":"Make Responsive Pie Chart with Google Charts"},"content":{"rendered":"

A Pie Chart<\/b> is a circular graph that divided into slices to represent statistics. In the web application, the pie chart is very useful to display data statistic in percentages. Google Charts<\/b> provides an easy way to visualize data statistic in the website. In this tutorial, we will show you how to build and embed pie chart to display demographics data in the web page using Google Charts. Also, we will make the Google pie chart responsive<\/b> for different screen resolution.<\/p>\n

Create Pie Chart with Google Charts<\/h2>\n

Google Visualization API provides the quickest way to create charts and add pie chart in the web page. You can embed a pie chart on your website within minutes using Google Charts.<\/p>\n

The following code creates a pie chart with Google Charts.<\/p>\n

JavaScript Code:<\/b>
\nLoad Google Chart library.<\/p>\n

<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"https:\/\/www.gstatic.com\/charts\/loader.js\"<\/span>><\/script<\/span>>\r\n<\/pre>\n
Use chart<\/code> object with drawChart callback. You need to specify the div id (piechart) in the PieChart() method where you want to display the pie chart.<\/p>\n
<script<\/span> type<\/span>=\"text\/javascript\"<\/span>>\r\n  google.charts.load<\/span>('current'<\/span>, {'packages'<\/span>:['corechart'<\/span>]});\r\n  google.charts.setOnLoadCallback(drawChart);\r\n\r\n  function<\/span> drawChart<\/span>() {\r\n\r\n    var<\/span> data =<\/span> google.visualization.arrayToDataTable([\r\n      ['Language'<\/span>, 'Rating'<\/span>],\r\n      ['PHP'<\/span>, 79<\/span>],\r\n            ['JavaScript'<\/span>, 71<\/span>],\r\n            ['Swift'<\/span>, 68<\/span>],\r\n            ['SQL'<\/span>, 56<\/span>],\r\n            ['Java'<\/span>, 45<\/span>],\r\n            ['Perl'<\/span>, 45<\/span>],\r\n            ['Ruby'<\/span>, 35<\/span>],\r\n            ['Python'<\/span>, 30<\/span>],\r\n            ['AngularJS'<\/span>, 29<\/span>],\r\n            ['Node.js'<\/span>, 28<\/span>],\r\n            ['Objective-C'<\/span>, 19<\/span>],\r\n            ['C#'<\/span>, 17<\/span>],\r\n            ['C++'<\/span>, 15<\/span>],\r\n            ['C'<\/span>, 14<\/span>]\r\n    ]);\r\n\r\n    var<\/span> options =<\/span> {\r\n      title: 'Most Popular Programming Languages'<\/span>\r\n    };\r\n\r\n    var<\/span> chart =<\/span> new<\/span> google.visualization<\/span>.PieChart(document<\/span>.getElementById<\/span>('piechart'<\/span>));\r\n\r\n    chart.draw(data, options);\r\n  }\r\n<\/script<\/span>>\r\n<\/pre>\n
HTML Code:<\/b>
\nCreate a <div<\/span>> element with id to display the Google Chart in this div.<\/p>\n
<div<\/span> id<\/span>=<\/span>\"piechart\"<\/span> style<\/span>=\"width: 900px; height: 500px;\"<\/span>><\/div<\/span>>\r\n<\/pre>\n
You can make the Google pie chart dynamic using PHP and MySQL. See this tutorial to create different types of dynamic pie chart with PHP and MySQL – Create Dynamic Pie Chart in PHP with Google Charts<\/a><\/p>\n
Make Google Pie Chart Responsive<\/h2>\n
In a particular screen size, the Google pie chart will display properly. But if you want to load Google pie chart properly in different screen resolution, it needs to responsive. To make Google pie chart responsive<\/b>, HTML and JavaScript code need to be modified.<\/p>\n
The following code creates a responsive Google pie chart with CSS.<\/p>\n
JavaScript Code:<\/b>
\nAdd width and height in the draw() method of chart object.<\/p>\n
<script<\/span> type<\/span>=\"text\/javascript\"<\/span>>\r\n  google.charts.load<\/span>('current'<\/span>, {'packages'<\/span>:['corechart'<\/span>]});\r\n  google.charts.setOnLoadCallback(drawChart);\r\n\r\n  function<\/span> drawChart<\/span>() {\r\n\r\n    var<\/span> data =<\/span> google.visualization.arrayToDataTable([\r\n      ['Language'<\/span>, 'Rating'<\/span>],\r\n      ['PHP'<\/span>, 79<\/span>],\r\n            ['JavaScript'<\/span>, 71<\/span>],\r\n            ['Swift'<\/span>, 68<\/span>],\r\n            ['SQL'<\/span>, 56<\/span>],\r\n            ['Java'<\/span>, 45<\/span>],\r\n            ['Perl'<\/span>, 45<\/span>],\r\n            ['Ruby'<\/span>, 35<\/span>],\r\n            ['Python'<\/span>, 30<\/span>],\r\n            ['AngularJS'<\/span>, 29<\/span>],\r\n            ['Node.js'<\/span>, 28<\/span>],\r\n            ['Objective-C'<\/span>, 19<\/span>],\r\n            ['C#'<\/span>, 17<\/span>],\r\n            ['C++'<\/span>, 15<\/span>],\r\n            ['C'<\/span>, 14<\/span>]\r\n    ]);\r\n\r\n    var<\/span> options =<\/span> {\r\n      title: 'Most Popular Programming Languages'<\/span>,\r\n      width: '100%'<\/span>,\r\n      height: '500px'<\/span>\r\n    };\r\n\r\n    var<\/span> chart =<\/span> new<\/span> google.visualization<\/span>.PieChart(document<\/span>.getElementById<\/span>('piechart'<\/span>));\r\n\r\n    chart.draw(data, options);\r\n  }\r\n<\/script<\/span>>\r\n<\/pre>\n
HTML Code:<\/b>
\nPut the piechart<\/code> div in a parent div.<\/p>\n
<div<\/span> id<\/span>=<\/span>\"chart_wrap\"<\/span>>\r\n    <div<\/span> id<\/span>=<\/span>\"piechart\"<\/span>><\/div<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\n
CSS Code:<\/b>
\nAdd the following CSS for the parent and piechart<\/code> div.<\/p>\n
#chart_wrap<\/span> {\r\n    position<\/span>:<\/span> relative<\/span>;\r\n    padding-bottom<\/span>:<\/span> 100%<\/span><\/span>;\r\n    height<\/span>:<\/span> 0<\/span>;\r\n    overflow<\/span>:<\/span>hidden<\/span>;\r\n}\r\n\r\n#piechart<\/span> {\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    top<\/span>:<\/span> 0<\/span>;\r\n    left<\/span>:<\/span> 0<\/span>;\r\n    width<\/span>:<\/span>100%<\/span><\/span>;\r\n    height<\/span>:<\/span>500px<\/span><\/span>;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
A Pie Chart is a circular graph that divided into slices to represent statistics. In the web application, the pie chart is very useful to display data statistic in percentages. Google Charts provides an easy <\/p>\n","protected":false},"author":1,"featured_media":3334,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[159],"tags":[278,66,279],"class_list":["post-3332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-googleapi","tag-google-charts","tag-javascript","tag-piechart","cat-159-id","has_thumb"],"yoast_head":"\nMake Responsive Pie Chart with Google Charts - CodexWorld<\/title>\n<meta name=\"description\" content=\"Google pie chart responsive - Create pie chart with Google Charts and make pie chart responsive using CSS. Example code to embed Google pie chart in the web page and make a responsive pie chart with Google Visualization API.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make Responsive Pie Chart with Google Charts - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Google pie chart responsive - Create pie chart with Google Charts and make pie chart responsive using CSS. Example code to embed Google pie chart in the web page and make a responsive pie chart with Google Visualization API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-28T20:58:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-28T21:07:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/make-responsive-pie-chart-with-google-charts-api-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Make Responsive Pie Chart with Google Charts\",\"datePublished\":\"2018-06-28T20:58:50+00:00\",\"dateModified\":\"2018-06-28T21:07:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/\"},\"wordCount\":314,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/make-responsive-pie-chart-with-google-charts-api-codexworld.png\",\"keywords\":[\"Google Charts\",\"JavaScript\",\"PieChart\"],\"articleSection\":[\"GoogleAPI\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/\",\"name\":\"Make Responsive Pie Chart with Google Charts - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/make-responsive-pie-chart-with-google-charts-api-codexworld.png\",\"datePublished\":\"2018-06-28T20:58:50+00:00\",\"dateModified\":\"2018-06-28T21:07:31+00:00\",\"description\":\"Google pie chart responsive - Create pie chart with Google Charts and make pie chart responsive using CSS. Example code to embed Google pie chart in the web page and make a responsive pie chart with Google Visualization API.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/make-responsive-pie-chart-with-google-charts-api-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/make-responsive-pie-chart-with-google-charts-api-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"make-responsive-pie-chart-with-google-charts-api-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/make-responsive-pie-chart-with-google-charts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make Responsive Pie Chart with Google Charts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Make Responsive Pie Chart with Google Charts - CodexWorld","description":"Google pie chart responsive - Create pie chart with Google Charts and make pie chart responsive using CSS. Example code to embed Google pie chart in the web page and make a responsive pie chart with Google Visualization API.","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:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/","og_locale":"en_US","og_type":"article","og_title":"Make Responsive Pie Chart with Google Charts - CodexWorld","og_description":"Google pie chart responsive - Create pie chart with Google Charts and make pie chart responsive using CSS. Example code to embed Google pie chart in the web page and make a responsive pie chart with Google Visualization API.","og_url":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2018-06-28T20:58:50+00:00","article_modified_time":"2018-06-28T21:07:31+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/make-responsive-pie-chart-with-google-charts-api-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Make Responsive Pie Chart with Google Charts","datePublished":"2018-06-28T20:58:50+00:00","dateModified":"2018-06-28T21:07:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/"},"wordCount":314,"commentCount":1,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/make-responsive-pie-chart-with-google-charts-api-codexworld.png","keywords":["Google Charts","JavaScript","PieChart"],"articleSection":["GoogleAPI"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/","url":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/","name":"Make Responsive Pie Chart with Google Charts - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/make-responsive-pie-chart-with-google-charts-api-codexworld.png","datePublished":"2018-06-28T20:58:50+00:00","dateModified":"2018-06-28T21:07:31+00:00","description":"Google pie chart responsive - Create pie chart with Google Charts and make pie chart responsive using CSS. Example code to embed Google pie chart in the web page and make a responsive pie chart with Google Visualization API.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/make-responsive-pie-chart-with-google-charts-api-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/make-responsive-pie-chart-with-google-charts-api-codexworld.png","width":1366,"height":768,"caption":"make-responsive-pie-chart-with-google-charts-api-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/make-responsive-pie-chart-with-google-charts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Make Responsive Pie Chart with Google Charts"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/make-responsive-pie-chart-with-google-charts-api-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-RK","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=3332"}],"version-history":[{"count":3,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3332\/revisions"}],"predecessor-version":[{"id":3336,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3332\/revisions\/3336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/3334"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}