Overview<\/h2>\n
The Meter\u00a0 displays a numeric\u00a0value in the form of a needle in relation of a range of targets. The meter allows you to assign\u00a0semantics to the different regions of the shape, to provide context to the data.<\/p>\n
For example, if the meter was configured\u00a0to show a pressure reading, where the pressure should be within a certain range, you can configure the meter to show different colours to indicate if a reading is OK or if it is within a danger zone.<\/p>\n
Related: Adding a new Meter style<\/a>, Using a Meter<\/a><\/p>\n The Meter shape comes with 5 preset styles, as shown in the image below:<\/p>\n \u00a0<\/p>\n You can also change the orientation and arc angle of the meter, as shown below:<\/p>\n The following diagram shows a Meter being configured:<\/p>\n Configuring this component requires a good understanding of your data to ensure you have\u00a0sensible measure points. You can achieve some quite sophisticated\u00a0configurations by specifying different datasets as drivers for your measure points.<\/p>\n<\/div>\n<\/div>\n For a full description of the Meter's\u00a0properties, see the Comprehensive Reference<\/a> at the end of this article.<\/p>\n <\/p>\n If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n The Meter\u00a0is a useful component to display a number in comparison to a range of thresholds. In this topic, we\u2019ll show you how to use the Meter\u00a0to display the value of a tag as the page refreshes every few seconds.<\/p>\n Let\u2019s go through this process, step-by-step.<\/p>\n Note<\/strong>: This configuration uses the Sample Data <\/em>table 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 Before you start, click the New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Grid layout.<\/p>\n Related: Grid Layout tutorial<\/a><\/p>\n \u00a0\u00a0<\/p>\n Step 2. Add\u00a0the\u00a0Meter<\/strong><\/p>\n Drag and drop the Meter\u00a0component\u00a0onto a grid cell.\u00a0The Meter is in the Display <\/p>\n Step 3. Configure the\u00a0Meter<\/strong><\/p>\n This meter shows the value of a calculation tag, which contains values between 1 and 100.<\/p>\n Configuring the Needle<\/strong><\/p>\n To configure the value that drives the needle, you need to configure the Value<\/strong> field. In this case, we are using a simple calculation tag, but you could also use a dataset, ad hoc calculation, attribute value, or a set value if you wanted to.<\/p>\n We're going to keep things simple and use the RandomCalc<\/strong> tag in the sample data. This tag contains the simple calculation Random()<\/em>, which randomly generates a number between 1 and 100.<\/p>\n Related: Data Selector\u00a0for Tag Data<\/a><\/p>\n Configuring the Measures<\/strong><\/p>\n The measures represent the limits shown in the meter, and signify where it changes colour. Intimate knowledge of your data is required here, otherwise your meter may not work the way you want it to. In this case, we know that the values will be anywhere between 1 and 100, and let's say we want the colour proportions here to be evenly spread out across the meter. Set the measures as follows:<\/p>\n The last measure represents the upper limit of the meter. Now, let's also set the lowest limit of the meter:<\/p>\n Related: Data Selector for Value Data<\/a><\/p>\n Configuring the Presentation<\/strong><\/p>\n You can change the colours in the meter as well as the orientation, angles, and number of ticks. Again, this is highly dependent on your intended purpose for the meter.<\/p>\n For the number of ticks, the meter itself will attempt to calculate the best fit that is closest to the supplied number. Feel free to play around with this value and observe how the meter changes.<\/p>\n For the arc angles, you can click one of the buttons for a preset value, or you can manually enter the minimum and maximum angles yourself.\u00a0Feel free to play around with these values and observe how the meter changes.<\/p>\n Finally, we come to configuring the colours. For this example, let's consider the higher values to be undesirable, so the further to the right the needle is, we want the colour to be more red.\u00a0Feel free to play around with the style settings and observe how the meter changes.<\/p>\n \u00a0<\/p>\n Step 4. Add\u00a0the Current Date\/Time Toggle<\/strong><\/p>\n This step allows us to\u00a0refresh the data on the page without having to reload it. Every time the data is refreshed, the meter needle will change its current value.<\/p>\n Related: Current Date\/Time Toggle tutorial<\/a><\/p>\n \u00a0<\/p>\n Step 5. All done!<\/strong><\/p>\n Congratulations! You now have a meter\u00a0that will refresh as the page is refreshed with new data.<\/p>\n The value that will drive the meter's needle. There are 5\u00a0data categories to choose from (see related link above).<\/p>\n \u00a0<\/p>\n
\nWhat the Meter Looks Like<\/h2>\n
![\"meterstyles\"](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/meterstyles.png\")
<\/a><\/p>\n![\"meterarcs\"](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/meterarcs.png\")
<\/a><\/p>\n
\nQuick Start Configuration<\/h2>\n
![\"meterconfig\"](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/meterconfig-1.png\")
<\/a><\/div>\n
\nTutorial: Displaying Changes to Tag Values as a Page Refreshes<\/span><\/h2>\n
![](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/meternow.png\")
<\/a><\/p>\n![\"New](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png\")
<\/p>\n![\"Grid](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose.png\")
<\/p>\n\n
![\"meter-tut-2\"](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/meter-tut-2.png\")
<\/a><\/p>\n![\"Display](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\")
<\/a>\u00a0group.<\/p>\n![\"meter-tut-3\"](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/meter-tut-3.png\")
<\/a><\/p>\n![\"metervalue\"](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/metervalue.png\")
<\/a><\/p>\n\n
\n
\n
\n
\n
![\"metertoggle\"](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/metertoggle.png\")
<\/a><\/p>\n\n
<\/a><\/p>\n\n
![\"preview\"](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\")
<\/a>\u00a0button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n\n\n
\n Value<\/strong>:<\/td>\n \n \n
\n Measure 1<\/strong>:<\/td>\n The value that represents the first threshold of the meter.<\/td>\n<\/tr>\n \n Measure 2<\/strong>:<\/td>\n The value that represents the second\u00a0threshold of the meter.<\/td>\n<\/tr>\n \n Measure 3<\/strong>:<\/td>\n The value that represents the third\u00a0threshold of the meter.<\/td>\n<\/tr>\n \n Measure 4<\/strong>:<\/td>\n The value that represents the fourth\u00a0threshold of the meter.<\/td>\n<\/tr>\n \n Measure 5<\/strong>:<\/td>\n The value that represents the upper limit of the meter.<\/td>\n<\/tr>\n \n Minimum Value<\/strong>:<\/td>\n The starting value of the meter. If nothing is specified, the meter will start at 0.<\/td>\n<\/tr>\n \n Number of Ticks<\/strong>:<\/td>\n The number of ticks to display on the meter. The meter will determine the best fit for the number supplied.<\/td>\n<\/tr>\n \n Minimum Arc Angle<\/strong>:<\/td>\n The angle that determines the start point location of the meter. There are 4 preset angles that are supplied.\u00a0Refer to What the Meter Looks Like<\/a>, above.<\/td>\n<\/tr>\n \n Maximum Arc Angle<\/strong>:<\/td>\n The angle that determines the end point\u00a0location of the meter.<\/td>\n<\/tr>\n \n Style<\/strong>:<\/td>\n The predefined styles available for the meter. Refer to What the Meter Looks Like<\/a>, above. If you are a Style Administrator, you can add a new Meter style<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\nRelease History<\/h2>\n
![\"save\"](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\")
Don\u2019t forget to