{"id":33523,"date":"2017-12-13T11:09:09","date_gmt":"2017-12-13T03:09:09","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=33523"},"modified":"2024-11-22T14:06:52","modified_gmt":"2024-11-22T06:06:52","slug":"relative-time","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/triggers\/relative-time\/","title":{"rendered":"Relative Time"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.5.4 and later of P2 Explorer.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"overview\">The\u00a0Relative Time <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/triggers\/\">trigger<\/a> sets a time difference between two <em>datetime<\/em> variables on a page. It does this by applying a specified time offset to an input variable, and designating this new time to an output variable. The time difference is a period of time either before or after the input time.<\/p>\n<p class=\"intro-text\">The output variable can be used elsewhere on the page, effectively allowing you to have a relative time that keeps pace with the date and time that you are selecting.<\/p>\n<p class=\"intro-text\">It is useful when:<\/p>\n<ul class=\"intro-text\">\n<li>There are two separate sets of timestamps on a page.<\/li>\n<li>You want to turn a single point in time into a range of time, either before or after a selected timestamp.<\/li>\n<li>You want to use a timestamp to drill down for more data within a particular time range.<\/li>\n<\/ul>\n<p class=\"intro-text\">Using\u00a0a relative time trigger, you could display a range of dates from a user-selected date. The example below shows the downtime hours for a selected month. The user selects a month from the data table on the left, and the relative time trigger outputs the date of 30 days before. The chart uses the user's selection as the data's end date, and the trigger supplies the start date.\u00a0<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/ht-downtime1.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-34186 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/ht-downtime1.png\" alt=\"\" width=\"1348\" height=\"441\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/ht-downtime1.png 1348w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/ht-downtime1-768x251.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/ht-downtime1-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/ht-downtime1-1280x419.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/ht-downtime1-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/ht-downtime1-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/ht-downtime1-48x16.png 48w\" sizes=\"auto, (max-width: 1348px) 100vw, 1348px\" \/><\/a><\/p>\n<p class=\"intro-text\">You can use the same principle to view further detail around any date selection. For example, view the last 7 days worth of severity 1 alarms for a pump or zoom in on a part of an embedded trend when the user clicks a hairline. We will cover this last example in the <a href=\"#Tutorial\">tutorial<\/a>.\u00a0\u00a0<\/p>\n<h2 class=\"page-subheading\">Configuration Overview<\/h2>\n<p class=\"intro-text\">The following image shows how to use the configuration options of a relative time trigger:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/relative-time-trigger-config.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34102\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/relative-time-trigger-config.png\" alt=\"\" width=\"755\" height=\"348\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/relative-time-trigger-config.png 755w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/relative-time-trigger-config-150x69.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/relative-time-trigger-config-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/relative-time-trigger-config-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/relative-time-trigger-config-48x22.png 48w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td><strong>Trigger Title<\/strong><\/td>\n<td>The name used to identify the relative time trigger. If not specified, the title will be '<em>Relative Time<\/em>'.<\/td>\n<\/tr>\n<tr>\n<td><strong>Input Time<\/strong><\/td>\n<td>The variable that is used to calculate the relative time.<\/td>\n<\/tr>\n<tr>\n<td><strong>Time Difference<\/strong><\/td>\n<td>The time difference to maintain between the input time and output time.<\/td>\n<\/tr>\n<tr>\n<td><strong>Before or After<\/strong><\/td>\n<td>Whether the output time is set to before or after the input time.<\/td>\n<\/tr>\n<tr>\n<td><strong>Output Time<\/strong><\/td>\n<td>The variable that is updated after applying the relative time configuration.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial<\/h2>\n<p class=\"intro-text\">In this tutorial, we'll configure two relative time triggers. One of the triggers will show a period of time before the selected input time, and the other will show a period of time after the selected input time. We'll also add 3 embedded trends to a page. One of these will allow the user to select an input time by adding a hairline, and the other trends will show the different output time ranges. Effectively, a user will be able to click on a trend and zoom in on detail before and after the hairline time.<\/p>\n<p class=\"note\">Note: When using a hairline to update another chart, it is possible to retrieve very large volumes of data during dragging of the hairline. Retrieving large amounts of historian data across a slow network can affect system performance for all users of the system.<\/p>\n<p class=\"intro-text\">At the end of the tutorial, your page should look like this:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-final1.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-34129 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-final1.png\" alt=\"\" width=\"1348\" height=\"806\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-final1.png 1348w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-final1-768x459.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-final1-150x90.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-final1-1280x765.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-final1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-final1-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-final1-48x29.png 48w\" sizes=\"auto, (max-width: 1348px) 100vw, 1348px\" \/><\/a><\/p>\n<p class=\"left-bar\"><strong>Note<\/strong>: This configuration uses the\u00a0<em>Sample Data table<\/em>\u00a0that 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=\"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\/\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page.png\" rel=\"lightbox[33522] lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-30441\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page.png\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page.png 596w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-150x28.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-48x9.png 48w\" alt=\"\" width=\"596\" height=\"110\" \/><\/a><\/p>\n<p class=\"intro-text\">Before you start, click the\u00a0<strong>New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the\u00a0<strong>Grid\u00a0<\/strong>layout.<\/p>\n<ul class=\"intro-text\">\n<li>Remove a column<\/li>\n<li>Add another row<\/li>\n<li>Assign a Column Spacing and Row Spacing of 10.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related:\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout tutorial<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 2. Update Default Values<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-2.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34132\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-2.png\" alt=\"\" width=\"1261\" height=\"621\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-2.png 1261w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-2-768x378.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-2-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-2-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-2-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-2-48x24.png 48w\" sizes=\"auto, (max-width: 1261px) 100vw, 1261px\" \/><\/a><\/p>\n<p class=\"intro-text\">Open the Default Values panel, and update the <em>startTime<\/em> and <em>endTime<\/em> variables as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>startTime <\/strong><\/td>\n<td>(Relative Datetime)\u00a02 days<\/td>\n<td><em>Set the start time to be 2 days before the end time.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>endTime <\/strong><\/td>\n<td>(Current Datetime) Never<\/td>\n<td><em>Set the end time to be the current time.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">We will use these variables in the first trend, which will show data for a period of 2 days before the current datetime.\u00a0\u00a0<\/p>\n<p class=\"left-bar\">Related:\u00a0<a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 3. Add 2 Relative Time Triggers<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-3.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34133\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-3.png\" alt=\"\" width=\"1245\" height=\"285\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-3.png 1245w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-3-768x176.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-3-150x34.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-3-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-3-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-3-48x11.png 48w\" sizes=\"auto, (max-width: 1245px) 100vw, 1245px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, we'll add 2 relative time triggers.<\/p>\n<p class=\"intro-text\">1. Click the\u00a0<strong>Triggers<\/strong>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33455\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/trigger-icon.png\" sizes=\"auto, (max-width: 13px) 100vw, 13px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/trigger-icon.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/trigger-icon-13x24.png 13w\" alt=\"\" width=\"13\" height=\"24\" \/>\u00a0button in the\u00a0<em>Configuration<\/em>\u00a0group on the Studio ribbon tab.<\/p>\n<p class=\"intro-text\">2. In the Triggers panel, click the\u00a0<strong>Add<\/strong>\u00a0button next to <em>Relative Time<\/em>, twice.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 4. Configure the First Relative Time<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34134\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4.png\" alt=\"\" width=\"341\" height=\"170\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4.png 341w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4-48x24.png 48w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Click the first\u00a0<strong>Relative Time<\/strong>\u00a0to expand the trigger.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4a.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34135\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4a.png\" alt=\"\" width=\"327\" height=\"341\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4a.png 327w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4a-144x150.png 144w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4a-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4a-46x48.png 46w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/a><\/p>\n<p class=\"intro-text\">Specify the settings as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"130px\"><strong>Trigger Title<\/strong><\/td>\n<td>Zoom Before<\/td>\n<td><em>Allows us to easily identify the trigger if we add multiple triggers to a page.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Input Time<\/strong><\/td>\n<td>hairlineStart<\/td>\n<td><em>When the user clicks on the trend to add a hairline, the start time of the hairline will be used as the input variable. You could equally use the hairline's end time in this situation, it doesn't matter for this example.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Time Difference<\/strong><\/td>\n<td>1 day<\/td>\n<td><em>We are interested in a 1 day difference from the input time (hairline start time).<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Before or After<\/strong><\/td>\n<td>Before<\/td>\n<td><em>We want the period of time to be before the input time (hairline start time).<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Output Time<\/strong><\/td>\n<td>startZoom<\/td>\n<td><em>The variable containing the output time will be called startZoom.\u00a0<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ul class=\"intro-text\">\n<li>Click the 2nd\u00a0<strong>Relative Time<\/strong>\u00a0to expand the trigger.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4b.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34136\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4b.png\" alt=\"\" width=\"329\" height=\"244\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4b.png 329w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4b-150x111.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4b-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4b-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-4b-48x36.png 48w\" sizes=\"auto, (max-width: 329px) 100vw, 329px\" \/><\/a><\/p>\n<p class=\"intro-text\">Specify the settings as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"130px\"><strong>Trigger Title<\/strong><\/td>\n<td>Zoom After<\/td>\n<td><em>Allows us to easily identify the trigger from the first one we added.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Input Time<\/strong><\/td>\n<td>hairlineStart<\/td>\n<td><em>When the user clicks on the trend to add a hairline, the start time of the hairline will be used as the input variable. You could equally use the hairline's end time in this situation, it doesn't matter for this example.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Time Difference<\/strong><\/td>\n<td>1 day<\/td>\n<td><em>We are interested in a 1 day difference from the input time (hairline start time).<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Before or After<\/strong><\/td>\n<td>After<\/td>\n<td><em>We want the period of time to be after the input time (hairline start time).<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Output Time<\/strong><\/td>\n<td>endZoom<\/td>\n<td><em>The variable containing the output time will be called endZoom.\u00a0<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 5. Add 3 Embedded Trends<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-5.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34138\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-5.png\" alt=\"\" width=\"1511\" height=\"707\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-5.png 1511w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-5-768x359.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-5-150x70.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-5-1280x599.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-5-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-5-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-5-48x22.png 48w\" sizes=\"auto, (max-width: 1511px) 100vw, 1511px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop 3 embedded trends onto the page, one in each cell.\u00a0<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/embedded-trend\/\">Embedded Trend<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 6. Configure the Top Trend<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-6.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34140\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-6.png\" alt=\"\" width=\"1512\" height=\"856\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-6.png 1512w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-6-768x435.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-6-150x85.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-6-1280x725.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-6-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-6-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-6-48x27.png 48w\" sizes=\"auto, (max-width: 1512px) 100vw, 1512px\" \/><\/a><\/p>\n<p class=\"intro-text\">The trend in the top cell will be the trend that the user clicks to get a hairline. The hairline will then set the input time, which will be processed by the relative time triggers.<\/p>\n<p class=\"intro-text\">Open the <strong>Tags Navigator<\/strong>, drag 2 tags onto the trend, and configure it as follows:\u00a0<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"130px\"><strong>Autorange<\/strong><\/td>\n<td>Off<\/td>\n<td><em>Since autorange is based on the data it receives, we turn it off so that the trend lines match across all trends.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Start Time<\/strong><\/td>\n<td>(Variable) startTime<\/td>\n<td><em>Use the page default startTime variable, which we have configured to the 2 days before the current date\/time,<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>End Time<\/strong><\/td>\n<td>(Variable) endTime<\/td>\n<td><em>Use the page default endTime variable, which we have configured to be the current date\/time.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Hairline Mode<\/strong><\/td>\n<td>Single<\/td>\n<td><em>We want the user to be able to set a single hairline, in order to set the input time variable for the trigger.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Hairline Start<\/strong><\/td>\n<td>hairlineStart<\/td>\n<td><em>This is the variable we will be using to set the start or end time in our other trends.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 7. Configure the Middle Trend<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34144\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7.png\" alt=\"\" width=\"966\" height=\"695\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7.png 966w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7-768x553.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7-150x108.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7-48x35.png 48w\" sizes=\"auto, (max-width: 966px) 100vw, 966px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click on the trend in the middle cell, drag the same 2 tags onto it, and configure it as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"130px\"><strong>Autorange<\/strong><\/td>\n<td>Off<\/td>\n<td><em>Since autorange is based on the data it receives, we turn it off so that the trend lines match across all trends.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Start Time<\/strong><\/td>\n<td>(Variable) startZoom<\/td>\n<td><em>This is the output time from the trigger, which we will use as the start time of this trend.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>End Time<\/strong><\/td>\n<td>(Variable) hairlineStart<\/td>\n<td><em>When the user clicks the top trend, use the hairline to set the end time of this trend.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Hairline Mode<\/strong><\/td>\n<td>None<\/td>\n<td><em>We don't need a hairline for this trend.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>To try out the functionality:<\/strong><\/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 display mode.<\/li>\n<li>Click the top trend to get a hairline.\u00a0<\/li>\n<li>Notice that the middle trend updates, with the hairline time as the end time and the trigger setting the start time, so that the trend shows data from the day before.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7a.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34145\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7a.png\" alt=\"\" width=\"928\" height=\"587\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7a.png 928w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7a-768x486.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7a-150x95.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7a-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7a-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-7a-48x30.png 48w\" sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 8. Configure the Bottom Trend<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-8.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34146\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-8.png\" alt=\"\" width=\"969\" height=\"694\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-8.png 969w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-8-768x550.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-8-150x107.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-8-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-8-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-8-48x34.png 48w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/><\/a><\/p>\n<p class=\"intro-text\">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 again to return to design mode.\u00a0Click on the trend in the bottom cell, drag the same 2 tags onto it, and configure it as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"130px\"><strong>Autorange<\/strong><\/td>\n<td>Off<\/td>\n<td><em>Since autorange is based on the data it receives, we turn it off so that the trend lines match across all trends.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Start Time<\/strong><\/td>\n<td>(Variable) hairlineStart<\/td>\n<td><em>This time we will use the hairline from the first trend to set the start time of this trend.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>End Time<\/strong><\/td>\n<td>(Variable) endZoom<\/td>\n<td><em>This is the output time from the trigger, which we will use as the end time of this trend.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Hairline Mode<\/strong><\/td>\n<td>None<\/td>\n<td><em>We don't need a hairline for this trend.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 9.\u00a0All done!<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-9.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34147\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-9.png\" alt=\"\" width=\"983\" height=\"748\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-9.png 983w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-9-768x584.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-9-150x114.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-9-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-9-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/rt-tut-9-48x37.png 48w\" sizes=\"auto, (max-width: 983px) 100vw, 983px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have 3 embedded trends that use a relative time trigger to update when a user adds a hairline.<\/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 try out the functionality.<\/li>\n<li>Click the top trend to get a hairline.\u00a0<\/li>\n<li>Notice that the middle trend updates, with the hairline time as the end time and the trigger setting the start time, so that the trend shows data from the day before.<\/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\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" 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\" alt=\"save\" width=\"48\" height=\"53\" \/>\u00a0Remember to\u00a0<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<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The\u00a0Relative Time trigger sets a time difference between two datetime variables on a page. It does this by applying a specified time offset to an input variable, and designating this new time to an output variable. This article describes how to configure a Relative Time trigger,<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/triggers\/relative-time\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":34191,"parent":39670,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[154,587],"class_list":["post-33523","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-time","tag-trigger","Version-4-5-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/33523","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=33523"}],"version-history":[{"count":1,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/33523\/revisions"}],"predecessor-version":[{"id":46109,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/33523\/revisions\/46109"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/39670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/34191"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=33523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=33523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=33523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}