{"id":1824,"date":"2015-02-20T00:35:28","date_gmt":"2015-02-19T16:35:28","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=1824"},"modified":"2017-12-14T14:32:19","modified_gmt":"2017-12-14T06:32:19","slug":"data-label-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/data-label-4-3-2\/","title":{"rendered":"Data Label (4.3.2)"},"content":{"rendered":"<p class=\"page-subheading\"><\/p>\n<p class=\"left-bar\">This article applies to versions 4.3.2 and earlier of P2 Explorer. For help on the latest version of the data label, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data Label<\/a>.<\/p>\n<h3 class=\"page-subheading\">Overview<\/h3>\n<p class=\"intro-text\">The Data Label displays a single numeric data value, and is often used on schematics when you want to display the value of a single entity attribute.<\/p>\n<p class=\"intro-text\">The following diagram shows a Data Label being configured:<\/p>\n<div style=\"position: relative;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datalabel.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3207 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datalabel-800x291.png\" alt=\"\" width=\"800\" height=\"291\" \/><\/a><\/div>\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 dataset from which the values are obtained.<\/td>\n<\/tr>\n<tr>\n<td><strong>Value Column<\/strong>:<\/td>\n<td>The column in the dataset that provides the actual value of a data point. This must contain a numeric value. If it contains anything other than a number, nothing will be displayed. 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 Column<\/strong>:<\/td>\n<td>The column of the dataset that determines the value that will be displayed.<\/td>\n<\/tr>\n<tr>\n<td><strong>Filter Value<\/strong>:<\/td>\n<td>The row of the dataset that provides the value that will be displayed.<\/td>\n<\/tr>\n<tr>\n<td><strong>Decimals<\/strong>:<\/td>\n<td>The number of decimal points in which the value will be shown.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<hr \/>\n<h3 class=\"page-subheading\">Tutorial<\/h3>\n<p class=\"intro-text\">The Data Label is a useful component in schematic style pages. In this topic, we\u2019ll show you how to use the Data Label to display the tubing head pressure in a simple schematic. The THP also changes depending on the selected entity and date.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datalabelschematic.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3210\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datalabelschematic-800x570.png\" alt=\"datalabelschematic\" width=\"800\" height=\"570\" \/><\/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_Schematic_Using_Precision_Layout\">Step by Step: Creating a Schematic Using Precision Layout<\/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. Choose the <a title=\"Precision Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\">Precision Layout<\/a>.<\/p>\n<p class=\"intro-text\">If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add the Text Label for the title<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiontext.png\" rel=\"lightbox[1433] lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2954 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiontext-800x417.png\" alt=\"\" width=\"800\" height=\"417\" \/><\/a><\/p>\n<p class=\"intro-text\">This step adds the title to the page, which will automatically update depending on which entity the user selects.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <a title=\"Text Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> component onto the canvas.<\/li>\n<li>You will notice that by default it has a square shape, and 4 drag handles will appear in the corners.<\/li>\n<li>Move the label to the upper left corner, and resize it to the size that you think the text will need.<\/li>\n<li>In the configuration options, complete the following:\n<ul class=\"intro-text\">\n<li>Content:<strong> Well Overview \u2013 {{selectedEntity}}<\/strong><\/li>\n<li>Select the Title check box<\/li>\n<li>Select the Underline check box<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 2. Add the Date Picker<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiondate.png\" rel=\"lightbox[1433] lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2955 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiondate-800x416.png\" alt=\"\" width=\"800\" height=\"416\" \/><\/a><\/p>\n<p class=\"intro-text\">This step adds a date picker to the page, which will drive the data displayed on the schematic.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <a title=\"Date Picker\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/date-picker\/\">Date Picker<\/a> component onto the canvas.<\/li>\n<li>Move it to the upper right corner and resize it appropriately.<\/li>\n<\/ul>\n<p class=\"intro-text\">You don\u2019t need to change the configuration options if you don\u2019t want to \u2013 later we will add event defaults for these.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 3. Add the Entity Selector<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionentities.png\" rel=\"lightbox[1433] lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2960 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionentities-800x417.png\" alt=\"\" width=\"800\" height=\"417\" \/><\/a><\/p>\n<p class=\"intro-text\">This step allows the user to select an entity, which will drive the data displayed on the schematic.<\/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>Move it to the left side and resize it appropriately.<\/li>\n<li>Configure it as follows:\n<ul class=\"intro-text\">\n<li>Selected Entity: selectedEntity<\/li>\n<li>Template Filter: (Text) Well<\/li>\n<li>Number of Selections: 1<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">You don\u2019t need to change the Selected Entities and Hierarchy Name configuration options if you don\u2019t want to \u2013 we will add event defaults for them later.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add the data <\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiondata.png\" rel=\"lightbox[1433] lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2958 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiondata-800x574.png\" alt=\"\" width=\"800\" height=\"574\" \/><\/a><\/p>\n<p class=\"intro-text\">Before we can display the data on the page, we need to add the source data.<\/p>\n<ul class=\"intro-text\">\n<li>Below the canvas, click the button labelled \"<a title=\"Add Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/\">Add Data<\/a>\".<\/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 \u201cOilPressure\u201d.<\/li>\n<li>In the configuration options, specify the following:\n<ul class=\"intro-text\">\n<li>Name: OilPressure1 (this is automatically added)<\/li>\n<li>Query: OilPressure (this is the query in P2 Server that is being used to return the data)<\/li>\n<li>Parameters \u2013 well: specify an event named selectedEntity<\/li>\n<li>Parameters \u2013 time: specify an event named endTime<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">These events will feed the other components on the page to display values for the selected date and entity.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 5. Add the background image<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionembed.png\" rel=\"lightbox[1433] lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2962 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionembed-800x418.png\" alt=\"\" width=\"800\" height=\"418\" \/><\/a><\/p>\n<p class=\"intro-text\">The background image provides the user with the ability to visualise the data. The image must be stored on a secure website (using https) accessible over the network.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <a title=\"Embed Page\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/embed-page\/\">Embed Page<\/a> component onto the canvas.<\/li>\n<li>Move it to the right of the Entity Selector and resize it appropriately.<\/li>\n<li>In the Content box, type the full URL of the image e.g. https:\/\/cadrondev01.petroleumplace.com\/explorerimages\/GasLift.gif<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 6. Add the Text Label for the tubing head<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiontextlabel.png\" rel=\"lightbox[1433] lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2963 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiontextlabel-800x417.png\" alt=\"\" width=\"800\" height=\"417\" \/><\/a><\/p>\n<p class=\"intro-text\">Now we\u2019ll start adding components that will make our schematic show us relevant data. A data point on its own is confusing if it\u2019s not labelled, so let\u2019s add a label first.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <a title=\"Text Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> component onto the canvas.<\/li>\n<li>Position it so that it sits above the tubing head in the background image, and resize it appropriately.<\/li>\n<li>In the configuration options, complete the following:\n<ul class=\"intro-text\">\n<li>Content: <strong>Tubing Head<\/strong><\/li>\n<li>Select the Title check box<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 7. Set the event defaults<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionevents.png\" rel=\"lightbox[1433] lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2964 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionevents-800x516.png\" alt=\"\" width=\"800\" height=\"516\" \/><\/a><\/p>\n<p class=\"intro-text\">Click the <a title=\"Events\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/events\/\">Event Defaults<\/a> button in the top right of the toolbar, and add the following events:<\/p>\n<ul class=\"intro-text\">\n<li>startTime (of type Datetime) \u2013 select a start date that you know will contain data e.g. 08\/01\/2011 12:00:00 AM<\/li>\n<li>endTime (of type Datetime) \u2013 select an end date that you know will contain data e.g. 08\/02\/2011 12:00:00 AM<\/li>\n<li>selectedEntity (of type Text) \u2013 specify an entity that you know is a well and has data associated with it e.g. Schola-C-1<\/li>\n<\/ul>\n<p class=\"intro-text\">By doing this, the Entity Selector and Date Picker automatically take in these default values, so we will immediately see some actual data in the next step.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 8. Add the Data Label for the tubing head <\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiondatalabel.png\" rel=\"lightbox[1433] lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2965 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiondatalabel-800x418.png\" alt=\"\" width=\"800\" height=\"418\" \/><\/a><\/p>\n<p class=\"intro-text\">The actual value of the tubing head pressure is displayed by using a Data Label.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the Data Label component onto the canvas.<\/li>\n<li>Position it so that it sits above the tubing head in the background image, and below the tubing head Text Label.<\/li>\n<li>Resize it appropriately.<\/li>\n<li>In the configuration options, type the following:\n<ul class=\"intro-text\">\n<li>Source Data: OilPressures1<\/li>\n<li>Value Column: THP_psi<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 9. Add the label for the measurement units<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiontextlabel2.png\" rel=\"lightbox[1433] lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2966 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiontextlabel2-800x418.png\" alt=\"\" width=\"800\" height=\"418\" \/><\/a><\/p>\n<p class=\"intro-text\">We\u2019ll use another Text Label for the measurement units.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <a title=\"Text Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> component onto the canvas.<\/li>\n<li>Position it so that it sits to the right of the Data Label for the tubing head, and resize it appropriately.<\/li>\n<li>In the configuration options, type the following content: <b>psi<\/b>.<\/li>\n<\/ul>\n<p class=\"intro-text\">You may notice that it starts to get a bit tricky to get the alignment just so. Simply persevere and it will work out.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 10. All done!<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datalabelschematic.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3210\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datalabelschematic-800x570.png\" alt=\"datalabelschematic\" width=\"800\" height=\"570\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a data label that will update according to the selected date and entity.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox[1433] lightbox-12\"><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> button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li>Select different dates and entities and observe the changes in the THP.<\/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 Data Label  displays a single numeric data value, and is often used on schematics when you want to display the value of a single entity attribute. This article describes how to configure a data label, 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\/data-label\/data-label-4-3-2\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4644,"parent":32239,"menu_order":3,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[30],"class_list":["post-1824","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-labels","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1824","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=1824"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1824\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/4644"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=1824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=1824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=1824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}