{"id":2684,"date":"2017-12-20T01:09:15","date_gmt":"2017-12-19T17:09:15","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=2684"},"modified":"2024-10-23T14:20:55","modified_gmt":"2024-10-23T06:20:55","slug":"pie-chart","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/pie-chart\/","title":{"rendered":"Pie Chart"},"content":{"rendered":"<p class=\"page-subheading\"><\/p>\n<p class=\"left-bar\">This article applies to versions 4.4 and later of IFS OI Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"overview\">The Pie Chart\u00a0shows\u00a0a circular shape divided into coloured sectors that each represent a proportion of the whole. It is best used when the\u00a0parts sum up to a meaningful whole and do not overlap.<\/p>\n<p class=\"intro-text\">The Pie Chart shows up to 10 unique segments. If there are more than 10 segments, the Pie Chart will aggregate the minor segments into an \"other\" segment. \u00a0<\/p>\n<p class=\"intro-text\">The following diagram shows a Pie Chart\u00a0being configured:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie44-config.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15385 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie44-config.png\" alt=\"Pie Chart 4.4\" width=\"1040\" height=\"517\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie44-config.png 1040w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie44-config-768x382.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie44-config-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie44-config-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie44-config-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie44-config-48x24.png 48w\" sizes=\"auto, (max-width: 1040px) 100vw, 1040px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"130\"><strong>Data<\/strong>:<\/td>\n<td>The source\u00a0from which the Pie Chart gets\u00a0its data.<\/td>\n<\/tr>\n<tr>\n<td><strong>Name Column<\/strong>:<\/td>\n<td>The column that contains the values that will be used as the labels of each slice (i.e. the legend).<\/td>\n<\/tr>\n<tr>\n<td><strong>Value Column<\/strong>:<\/td>\n<td>The column that contains the values that will be represented as a segment\u00a0of the pie.<\/td>\n<\/tr>\n<tr>\n<td><strong>Selected<\/strong>:<\/td>\n<td>The variable\u00a0that stores the\u00a0segment\u00a0that the user selects.\u00a0<\/td>\n<\/tr>\n<tr>\n<td><strong>Legend<\/strong>:<\/td>\n<td>Select the check box if you want to display the legend for the Pie Chart. The legend is displayed to the right of the chart.<\/td>\n<\/tr>\n<tr>\n<td><strong>Style<\/strong>:<\/td>\n<td>The style you want to apply to the Pie Chart component.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar-p2blue\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/charts\/pie-chart\/\">Using the Pie Chart<\/a>\u00a0in display mode<\/p>\n<p class=\"page-subheading\">\u00a0<\/p>\n<div style=\"position: relative;\">\n<hr \/>\n<h2 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial:\u00a0Creating a Pie Chart That Displays Downtime<\/span><\/h2>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\">The Pie Chart\u00a0is a useful component for displaying portions of a whole. In this topic, we\u2019ll show you how to use the Pie Chart\u00a0to display a breakdown of\u00a0the reasons for downtime from a dataset. This is often used in production summary reports.\u00a0<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"border-image alignnone wp-image-15383 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut.png\" alt=\"Pie Chart 4.4\" width=\"664\" height=\"525\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut.png 664w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-150x119.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-48x38.png 48w\" sizes=\"auto, (max-width: 664px) 100vw, 664px\" \/><\/a><\/p>\n<p class=\"intro-text\">Let\u2019s go through this process, step-by-step.<\/p>\n<p class=\"left-bar\"><strong>Note<\/strong>: This configuration uses the <em>Sample Data table<\/em> that can be optionally made available\u00a0during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14281\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-400x100.png 400w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-250x62.png 250w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-48x12.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png 438w\" alt=\"New Page button on ribbon\" width=\"438\" height=\"109\" \/><\/p>\n<p class=\"intro-text\">Before you start, click the <strong>New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Grid layout.<\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14282\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose.png\" sizes=\"auto, (max-width: 863px) 100vw, 863px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-150x93.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-400x248.png 400w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-768x475.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-800x495.png 800w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-242x150.png 242w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose.png 863w\" alt=\"Grid Layout 4.4\" width=\"863\" height=\"534\" \/><\/p>\n<ul class=\"intro-text\">\n<li>For this exercise, we'll keep the 4 grid cells.<\/li>\n<li>Assign the first row a height of 60.<\/li>\n<li>Assign a row spacing of 20.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Grid Layout tutorial<\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 2. Add\u00a0the\u00a0Pie Chart<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-2.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15386 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-2.png\" alt=\"Pie Chart 4.4\" width=\"1378\" height=\"611\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-2.png 1378w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-2-768x341.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-2-150x67.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-2-1280x568.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-2-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-2-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-2-48x21.png 48w\" sizes=\"auto, (max-width: 1378px) 100vw, 1378px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop the Pie Chart component\u00a0onto a grid cell.\u00a0The Pie Chart is in the Chart\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1837 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/chartsicon_sm.png\" alt=\"chartsicon_sm\" width=\"22\" height=\"17\" \/>\u00a0group.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 3. Configure the\u00a0Pie Chart<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15388 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3.png\" alt=\"Pie Chart 4.4\" width=\"772\" height=\"395\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3.png 772w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-768x393.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-48x25.png 48w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this example, we want the Pie Chart\u00a0to show us the downtime hours for each downtime reason within\u00a0the dataset.\u00a0<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Data Selector<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">Variables<\/a><\/p>\n<p class=\"intro-text\"><strong>Configuring the Data<\/strong>:\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Open the <strong>Data<\/strong>\u00a0Data Selector by clicking on the field. You will notice that the Dataset <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14669\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Dataset icon\" width=\"16\" height=\"13\" \/>\u00a0tab is automatically selected. Staying on that tab, fill in the fields as follows:\u00a0\n<ul class=\"intro-text\">\n<li>Dataset Query:\u00a0MiningDowntimePivot<em>\u00a0<br \/>\n<\/em><\/li>\n<li>EndDate: (Variable) endTime<\/li>\n<li>StartDate: (Variable) startTime<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-1.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15389\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-1.png\" alt=\"Pie Chart 4.4\" width=\"329\" height=\"275\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-1.png 329w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-1-150x125.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-1-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-1-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-1-48x40.png 48w\" sizes=\"auto, (max-width: 329px) 100vw, 329px\" \/><\/a><\/p>\n<div class=\"best-prac\"><i class=\"fa fa-star fa-2x fa-pull-left\"><\/i><span class=\"best-prac-text\">TOP TIP<\/span><\/p>\n<p class=\"intro-text\">Click the Preview button to check that you are getting data. If the preview window is blank, you may have filled in a parameter incorrectly.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Configuring the Name Column<\/strong>:<\/p>\n<ul class=\"intro-text\">\n<li>Click away from the Data Selector.<\/li>\n<li>For the <strong>Name Column<\/strong> you have the option of choosing a variable or a data column from the dataset. The names of the columns in the dataset are shown in a drop-down list.\u00a0<\/li>\n<li>Click the highlighted <em>Column Name<\/em> box and choose <strong>DowntimeReason<\/strong> from the drop-down list.<\/li>\n<\/ul>\n<\/div>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-2a.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15391 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-2a.png\" alt=\"Pie Chart 4.4\" width=\"329\" height=\"304\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-2a.png 329w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-2a-150x139.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-2a-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-2a-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-2a-48x44.png 48w\" sizes=\"auto, (max-width: 329px) 100vw, 329px\" \/><\/a><\/p>\n<div style=\"position: relative;\">\n<p class=\"intro-text\"><strong>Configuring the Value\u00a0Column<\/strong>:<\/p>\n<ul class=\"intro-text\">\n<li>For the <strong>Value\u00a0Column<\/strong> you also have the option of choosing a variable or a data column from the dataset. The names of the allowable\u00a0columns in the dataset are shown in a drop-down list.\u00a0<\/li>\n<li>Click the highlighted <em>Column Name<\/em> box and choose <strong>DowntimeHours<\/strong> from the drop-down list.<\/li>\n<\/ul>\n<\/div>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-3.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15392\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-3.png\" alt=\"Pie Chart 4.4\" width=\"325\" height=\"141\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-3.png 325w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-3-150x65.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-3-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-3-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-3-48x21.png 48w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><\/p>\n<div style=\"position: relative;\">\n<p class=\"intro-text\"><strong>Configuring Selected<\/strong>:<\/p>\n<ul class=\"intro-text\">\n<li>Open the <strong>Selected\u00a0<\/strong>Data Selector by clicking on the field. Stay on the Value <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15215 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/dataselectorvalueicon.png\" alt=\"Data selector Value icon\" width=\"15\" height=\"15\" \/>\u00a0tab.\u00a0<\/li>\n<li>This time we want to specify a variable, so click the Variable <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14462 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" alt=\"Variable 4.4\" width=\"14\" height=\"21\" \/>\u00a0icon.<\/li>\n<li>Type <strong>selectedOption\u00a0<\/strong>into the <strong>Value<\/strong> field.<\/li>\n<\/ul>\n<p class=\"intro-text\">Here we are saying that when the user clicks on a segment of the pie chart, the value\u00a0of what they click will be stored in the <em>selectedOption<\/em> variable. We can then use this variable for other components on the page.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-4.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15393\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-4.png\" alt=\"Pie Chart 4.4\" width=\"334\" height=\"235\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-4.png 334w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-4-150x106.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-4-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-4-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-3-4-48x34.png 48w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Configuring the Legend<\/strong>:<\/p>\n<p class=\"intro-text\">It is often useful to show the legend next to the Pie Chart, so select the <strong>Legend<\/strong> check box.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add and configure a Text Label<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15394\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4.png\" alt=\"Pie Chart 4.4\" width=\"1352\" height=\"287\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4.png 1352w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-768x163.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-150x32.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-1280x272.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-48x10.png 48w\" sizes=\"auto, (max-width: 1352px) 100vw, 1352px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, we're going to add a Text Label that will show the details of the segment of the Pie Chart that a user clicks on. We're going to show the selected downtime reason and the corresponding downtime hours.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the Text Label component\u00a0onto the canvas.<\/li>\n<li>In the Content box, type: <strong>Downtime for reason\u00a0<\/strong><\/li>\n<li>Click the <strong>Add Data<\/strong> button. We're going to add some text that will show the downtime reason. Configure as follows:\n<ul class=\"intro-text\">\n<li><strong>Type<\/strong>: Text<\/li>\n<li><strong>Data<\/strong>: Click the Data Selector, stay on the Value <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15215 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/dataselectorvalueicon.png\" alt=\"Data selector Value icon\" width=\"15\" height=\"15\" \/>\u00a0tab, click the Variable <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14462 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" alt=\"Variable 4.4\" width=\"14\" height=\"21\" \/>\u00a0icon, and type <strong>selectedOption<\/strong>.<\/li>\n<li>Click the <strong>Add<\/strong> button.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-1.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15396 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-1.png\" alt=\"Pie Chart 4.4\" width=\"319\" height=\"244\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-1.png 319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-1-150x115.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-1-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-1-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-1-48x37.png 48w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>In the Content box, type a colon <strong>:\u00a0<\/strong><\/li>\n<li>Click the <strong>Add Data<\/strong> button again. We're going to add a number that will show the downtime hours for the selected segment. We will need to get this from the dataset. Configure as follows:\n<ul class=\"intro-text\">\n<li><strong>Type<\/strong>:\u00a0Number<\/li>\n<li><strong>Data<\/strong>: Click the Data Selector.\u00a0Configure\u00a0the <strong>Dataset Query<\/strong>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14669 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Data selector 4.4\" width=\"16\" height=\"13\" \/>\u00a0tab as follows:\n<ul class=\"intro-text\">\n<li>Dataset Query: MiningDowntimePivot<\/li>\n<li>Filter Column: DowntimeReason<\/li>\n<li>Filter Value: (Variable) selectedOption<\/li>\n<li>Value Column: DowntimeHours<\/li>\n<li>End Date: endTime<\/li>\n<li>Start Date: startTime<\/li>\n<\/ul>\n<\/li>\n<li>Click away from the Data Selector.<\/li>\n<li>Click the <strong>Add<\/strong> button.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label tutorial<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/filter-column-and-filter-value\/\">Filter Column and Filter Value<\/a><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-3.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15398 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-3.png\" alt=\"Pie Chart 4.4\" width=\"330\" height=\"531\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-3.png 330w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-3-93x150.png 93w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-3-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-3-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-4-3-30x48.png 30w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><\/p>\n<div style=\"position: relative;\">\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 5. All done!<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"border-image alignnone wp-image-15383 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut.png\" alt=\"Pie Chart 4.4\" width=\"664\" height=\"525\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut.png 664w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-150x119.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/pie-tut-48x38.png 48w\" sizes=\"auto, (max-width: 664px) 100vw, 664px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a Pie Chart that will show you a breakdown of\u00a0the reasons for downtime for a selected well. A text label shows you information about the segment you have clicked.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/>\u00a0button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li>Select different segments\u00a0and observe the changes in the Pie Chart and Text Label.<\/li>\n<\/ul>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" alt=\"save\" width=\"48\" height=\"53\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" \/> Don\u2019t forget to <a title=\"Saving Your Page\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\">save your page<\/a>!<\/p>\n<\/div>\n<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/pie-chart\/pie-chart-4-3-2\/\">Pie Chart 4.3.2<\/a>\u00a0<\/li>\n<\/ul>\n<div>\u00a0<\/div>\n<div>\u00a0<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Pie Chart shows a circular shape divided into coloured sectors that each represent a proportion of the whole. It is best used when the parts sum up to a meaningful whole and do not overlap.  This article describes how to configure a pie chart in versions 4.4 and later of IFS OI Explorer.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/pie-chart\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4642,"parent":1407,"menu_order":363,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[15],"class_list":["post-2684","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-charts-2","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/2684","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=2684"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/2684\/revisions"}],"predecessor-version":[{"id":67047,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/2684\/revisions\/67047"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1407"}],"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=2684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=2684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=2684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}