{"id":27240,"date":"2017-05-16T15:03:45","date_gmt":"2017-05-16T07:03:45","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=27240"},"modified":"2020-11-11T17:01:23","modified_gmt":"2020-11-11T09:01:23","slug":"pie-chart","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/charts\/pie-chart\/","title":{"rendered":"Using a Pie Chart"},"content":{"rendered":"<p class=\"intro-text\"><\/p>\n<p class=\"intro-text\">The pie chart is a circular chart divided into sectors. Each sector represents a different value, and is sized in proportion to that sector's percentage of the sum of values.<\/p>\n<h2 class=\"page-subheading\">Features of the Pie Chart<\/h2>\n<table>\n<tbody>\n<tr>\n<td width=\"500\">\n<table>\n<tbody>\n<tr>\n<td width=\"500\"><strong>1. A separate label<\/strong>:<\/p>\n<p>An Explorer text label for the chart.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>2. Pie segment<\/strong>:<\/p>\n<p>The different pie segments are in proportion to their value as part of the sum of all values, and follow the same order (in a clockwise direction) as the list of legends.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>3. Hover for tool-tip, or click for interaction<\/strong>:<\/p>\n<p>Hover over the segment to see its numerical value, percentage of the total, and the legend. (The legend is highlighted as you do this.)<\/p>\n<p>If the pie has been configured to perform actions, then clicking on the segment may cause a change elsewhere on the page - for example, filtering a bar chart by the month represented by this segment.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Chart legend<\/strong>:<\/p>\n<p>These have colours and labels corresponding to the different segments. For interactive charts, you can click on a legend.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"400\">\n<table>\n<tbody>\n<tr>\n<td width=\"400\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8519 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/Features-of-a-Pie-Chart.png\" alt=\"\" width=\"358\" height=\"333\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/Features-of-a-Pie-Chart.png 358w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/Features-of-a-Pie-Chart-150x140.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/Features-of-a-Pie-Chart-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/Features-of-a-Pie-Chart-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/Features-of-a-Pie-Chart-48x45.png 48w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2 class=\"page-subheading\">Hover and Selection<\/h2>\n<p class=\"intro-text\">When you hover over a pie chart, a tooltip appears showing relevant values, and the segment is extended.\u00a0<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/pie-hover.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26746\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/pie-hover.png\" alt=\"\" width=\"204\" height=\"169\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/pie-hover.png 204w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/pie-hover-150x124.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/pie-hover-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/pie-hover-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/pie-hover-48x40.png 48w\" sizes=\"auto, (max-width: 204px) 100vw, 204px\" \/><\/a><\/p>\n<p class=\"intro-text\">When you click a segment, if the pie chart has been configured to link to other controls on the page, the selected segment can affect the values shown in the other linked controls.<\/p>\n<p class=\"note\"><strong>Watch the video below<\/strong> to see how the pie chart sections interact when different months and products are selected, and how a selected pie section changes the bar chart next to it.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_995231271\" class=\"video-js vjs-default-skin\" width=\"836\" height=\"426\" controls preload=\"auto\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/InteractivePieChart1.mp4\" type='video\/mp4' \/>\r\n\t\t\r\n\t\t\r\n\t<\/video>\r\n\t<!-- End Video.js -->\r\n\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The pie chart is a circular chart divided into sectors.  Read about how to use a pie chart.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/charts\/pie-chart\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4642,"parent":27232,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[15],"class_list":["post-27240","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-charts-2","Version-4-5-0","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/27240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=27240"}],"version-history":[{"count":1,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/27240\/revisions"}],"predecessor-version":[{"id":46058,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/27240\/revisions\/46058"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/27232"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/4642"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=27240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=27240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=27240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}