{"id":15227,"date":"2016-05-24T11:36:06","date_gmt":"2016-05-24T03:36:06","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=15227"},"modified":"2017-12-14T14:38:22","modified_gmt":"2017-12-14T06:38:22","slug":"target-bar-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/target-bar\/target-bar-4-3-2\/","title":{"rendered":"Target Bar (4.3.2)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.3.2 and earlier of P2 Explorer.\u00a0For help on the latest version of the Target Bar, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/target-bar\/\">Target Bar<\/a>.<\/p>\n<h3 class=\"page-subheading\">Overview<\/h3>\n<p class=\"intro-text\">The Target Bar shows a numeric value as a bar in relation to a target marker. By default, the bar is red when the value is below target, or grey when the value is at or above target.<\/p>\n<p class=\"intro-text\">The following diagram shows a target bar being configured:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbar1.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3352 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbar1-800x422.png\" alt=\"\" width=\"800\" height=\"422\" \/><\/a><\/p>\n<div style=\"position: relative;\">\u00a0<\/div>\n<table>\n<tbody>\n<tr>\n<td width=\"130\"><strong>Source Data<\/strong>:<\/td>\n<td>The\u00a0dataset from which the values are obtained.<\/td>\n<\/tr>\n<tr>\n<td><strong>Actual Column:<\/strong><\/td>\n<td>The column from the dataset that determines the actual value used for the bar fill.<\/td>\n<\/tr>\n<tr>\n<td><strong>Target Column<\/strong>:<\/td>\n<td>The column from the dataset that determines the vertical black target bar.<\/td>\n<\/tr>\n<tr>\n<td><strong>Max Column:<\/strong><\/td>\n<td>The column from the source data that determines the maximum value that the bar should have. This can be above the target value. For example, you may have a sales target of 90% but the maximum would be 100%.<\/td>\n<\/tr>\n<tr>\n<td><strong>Filter Column:<\/strong><\/td>\n<td>The column of the dataset that provides the values that will be assessed. This is used in conjunction with the <a title=\"Filter Column and Filter Value\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/filter-column-and-filter-value\/\">Filter Value<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Filter Value:<\/strong><\/td>\n<td>The row of the dataset that provides the values that will be assessed.<\/td>\n<\/tr>\n<tr>\n<td><strong>Colours<\/strong>:<\/td>\n<td>The number of colours specified should be the number of Thresholds + 1. The order in which the colours are specified should be the same order that the thresholds are specified.<\/td>\n<\/tr>\n<tr>\n<td><strong>Thresholds<\/strong>:<\/td>\n<td>The values at which the bar colour should change. The highest threshold value should be less than the value of Max Field.<\/p>\n<p>By default, the thresholds are set to 60% under, 30% under, and 0%. So if the actual value is more than 60% under target, the colour of the bar is deep red. At 0% (i.e. the target has been met), the colour changes to grey.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Reverse<\/strong>:<\/td>\n<td>Select this check box to invert the good and bad thresholds, so that lower is good and higher is bad.<\/td>\n<\/tr>\n<tr>\n<td><strong>Percentage<\/strong>:<\/td>\n<td>Select this check box if the thresholds are expressed in percentages.<\/td>\n<\/tr>\n<tr>\n<td><strong>Decimals<\/strong>:<\/td>\n<td>The number of decimal points for the actual value displayed in the tooltip.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3 class=\"page-subheading\"><span id=\"Tutorial\"><span id=\"Tutorial\"><span id=\"Tutorial\">Tutorial<\/span><\/span><\/span><\/h3>\n<p class=\"intro-text\">The Target Bar\u00a0is a useful component to display target vs actual. In this topic, we\u2019ll show you how to use the Target Bar\u00a0to display actual vs planned\u00a0production data for a selected well. This is often used in production summary reports.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3589\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal.png\" alt=\"targetbarfinal\" width=\"470\" height=\"547\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal.png 470w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal-129x150.png 129w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal-41x48.png 41w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/a><\/p>\n<p class=\"intro-text\">Let\u2019s look at how we\u2019re actually going to do this, step-by-step.<\/p>\n<hr \/>\n<h3 class=\"page-subheading\"><span id=\"Step_by_Step_Creating_a_Target_LabelThat_Displays_Targetvs_Actual_Data\"><span id=\"Step_by_Step_Creating_a_MeterThat_Displays_Planned_vs_Actual_Data\"><span id=\"Step_by_Step_Creating_a_Tank_That_Displays_Stored_Oil_Volumes_for_aSelectedEntity\"><span id=\"Step_by_Step_Creating_a_Schematic_Using_Precision_Layout\"><span id=\"Step_by_Step_Creating_a_Schematic_Using_Precision_Layout\">Step by Step: Creating a Target Bar\u00a0That Displays Planned\u00a0vs Actual<\/span><\/span><\/span><\/span><\/span><\/h3>\n<p class=\"intro-text\">Before you start, open a new tab in Explorer and click the \u201cCreate a New Page in Studio Mode\u201d thumbnail.\u00a0Choose the <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">grid<\/a>\u00a0layout \u2013 you can adjust the rows and columns if you like but it\u2019s not important for this exercise.<\/p>\n<p class=\"intro-text\">You will need to adjust the configuration to suit your data at your site.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add\u00a0the source data<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/meterdata.png\" rel=\"lightbox[1829] lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3526\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/meterdata-800x511.png\" alt=\"meterdata\" width=\"800\" height=\"511\" \/><\/a><\/p>\n<p class=\"intro-text\">Before we can display any\u00a0data on the page, \u00a0we need to add the source data.<\/p>\n<ul class=\"intro-text\">\n<li>Below the canvas, click the button labelled \u201c<a title=\"Add Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/\">Add Data<\/a>\u201c.<\/li>\n<li>Choose the data you are going to use. For this tutorial, we are using a <a title=\"Add a Relational Dataset\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/add-a-dataset\/\">dataset<\/a> called \u201cWelPlanningData\u201d.<\/li>\n<li>In the configuration options, specify the following:\n<ul class=\"intro-text\">\n<li>Name: WelPlanningData1 (this is automatically added)<\/li>\n<li>Query: WelPlanningData (this is the query in P2 Server that is being used to return the data)<\/li>\n<li>StartDate: (Datetime)\u00a001\/04\/2015 12:00:00 AM<\/li>\n<li>EndDate: (Datetime)\u00a030\/04\/2015 12:00:00 AM<\/li>\n<li>EntitiesList: (Event) selectedEntity<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 2. Add\u00a0the\u00a0Target\u00a0Bar<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbardrag2.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3562\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbardrag2-800x382.png\" alt=\"targetbardrag2\" width=\"800\" height=\"382\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop the Target Bar\u00a0component\u00a0onto a grid cell.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 3. Configure the\u00a0Target\u00a0Bar<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarconfig.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3588\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarconfig-800x446.png\" alt=\"targetbarconfig\" width=\"800\" height=\"446\" \/><\/a><\/p>\n<p class=\"intro-text\">In this example, we want the Target Bar to indicate when we've hit 90% of planned production. Configure the Target Bar\u00a0as follows:\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Source Data:\u00a0WelPlanningData1<\/li>\n<li>Actual Column: (Text) OilActual<\/li>\n<li>Target Column: (Text) OilP90<\/li>\n<li>Max Column: (Text) OilPlanned<\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add\u00a0the Entity Selector<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetentity.png\" rel=\"lightbox[1795] lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3537\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetentity-800x379.png\" alt=\"targetentity\" width=\"800\" height=\"379\" \/><\/a><\/p>\n<p class=\"intro-text\">This step allows the user to select an entity, which will drive the Target Bar.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <a title=\"Entity Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/\">Entity Selector<\/a> control onto the canvas.<\/li>\n<li>Configure it as follows:\n<ul class=\"intro-text\">\n<li>Selected Entity: selectedEntity<\/li>\n<li>Selected Entities: (blank)<\/li>\n<li>Hierarchy Name: (Text) Oil and Gas<\/li>\n<li>Template Filter: (Text) Oil Producing Well<\/li>\n<li>Number of Selections: 1<\/li>\n<\/ul>\n<\/li>\n<\/ul>\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\/02\/targetbarfinal.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3589\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal.png\" alt=\"targetbarfinal\" width=\"470\" height=\"547\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal.png 470w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal-129x150.png 129w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/targetbarfinal-41x48.png 41w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a Target Bar\u00a0that will show you actual vs planned\u00a0oil\u00a0production for a selected well.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox[1433] lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a>\u00a0button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li>Select entities and observe the changes in the target bar.<\/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","protected":false},"excerpt":{"rendered":"<p>The Target Bar shows a numeric value as a bar in relation to a target marker. By default, the bar is red when the value is below target, or grey when the value is at or above target. This article describes how to configure a target bar, and applies to versions 4.3.2 and earlier of P2 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\/target-bar\/target-bar-4-3-2\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4656,"parent":1605,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[124],"class_list":["post-15227","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-targets","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/15227","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=15227"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/15227\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/4656"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=15227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=15227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=15227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}