{"id":1605,"date":"2017-12-20T19:39:34","date_gmt":"2017-12-20T11:39:34","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=1605"},"modified":"2024-10-23T14:21:04","modified_gmt":"2024-10-23T06:21:04","slug":"target-bar","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/target-bar\/","title":{"rendered":"Target Bar"},"content":{"rendered":"\n

This article applies to versions 4.4 and later of IFS OI Explorer. For more, see Release History<\/a>.<\/p>\n

Overview<\/h2>\n

The Target Bar shows a numeric value as a bar in relation to a target marker. By default, the bar is grey\u00a0when the value is below target, or green\u00a0when the value is at or above target.<\/p>\n

The following diagram shows a target bar being configured:<\/p>\n

\"Target<\/a><\/p>\n

\u00a0<\/div>\n\n\n\n\n\n\n\n\n\n
Actual<\/strong>:<\/td>\nThe actual value used for the bar fill.<\/td>\n<\/tr>\n
Target<\/strong>:<\/td>\nThe value that\u00a0determines the vertical black target bar.<\/td>\n<\/tr>\n
Max<\/strong>:<\/td>\nThe 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
Reversed<\/strong>:<\/td>\nSelect this check box to reverse\u00a0the thresholds, so that the bar is coloured when the value is below target and grey when the target is met or exceeded.<\/td>\n<\/tr>\n
Percentage<\/strong>:<\/td>\nSelect this check box if the values\u00a0are expressed in percentages.<\/td>\n<\/tr>\n
Decimals<\/strong>:<\/td>\nThe number of decimal points for the actual value displayed in the tooltip.<\/td>\n<\/tr>\n
Style<\/strong>:<\/td>\nThe style you want to apply to the Target Bar\u00a0component. The styles are: Normal<\/em> (the bar is green when target is met or exceeded) and Inverted<\/em> (bar is orange when\u00a0target is met or exceeded). If Reversed is applied, the colours apply when the value is below target.\u00a0If you are a Style Administrator,\u00a0you can\u00a0add a new Target Bar\u00a0style.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Related: Reading the Target Bar<\/a> in display mode, Adding a Target Bar style<\/a><\/p>\n

\n

Tutorial:\u00a0Creating a Target Bar\u00a0That Displays Planned\u00a0vs Actual<\/span><\/span><\/span><\/h2>\n

If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n

The Target Bar\u00a0is a useful component to display target vs actual. In this tutorial, we\u2019ll show you how to use the Target Bar\u00a0to display actual vs planned\u00a0production data for a well. We'll use a Date Picker to view the targets\u00a0for different dates. This is often used in production summary reports.<\/p>\n

\"Target<\/a><\/p>\n

Let\u2019s go through this process, step-by-step.<\/p>\n

Note<\/strong>: This configuration uses the 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

\u00a0<\/p>\n

Step 1. Prepare a Studio Page<\/strong><\/p>\n

\"New<\/p>\n

Before you start, click the New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Grid layout.<\/p>\n

\"Grid<\/p>\n