Overview
The Meter displays a numeric value in the form of a needle in relation of a range of targets.
The following diagram shows a Meter being configured:
| Source Data: | The dataset from which the values are obtained. |
| Actual Column: | The column in the dataset that provides the actual value of the data point. This must contain a numeric value. If it contains anything other than a number, the meter will be stuck at 0. |
| Filter Column: | The column of the dataset that provides the values that will be assessed. This is used in conjunction with the Filter Value. |
| Filter Value: | The row of the dataset that provides the value that will be assessed. |
| Measure Column: | The columns in the dataset that determine the segments of the meter. The columns should be listed in a logical numerical order, such as high-low or low-high. |
| Measure Colour: | The columns in the dataset that determine the colour of each meter segment. |
| Minimum Value Column: | The column in the dataset that determines the starting value of the meter. If nothing is specified, the meter will start at 0. |
| Arc Thickness: | The width, in pixels, of the meter arc. |
| Number of Ticks: | The number of ticks to display in the meter. |
| Minimum Arc Angle: | The angle that determines the start point location of the meter. There are 4 preset angles that are supplied. |
| Maximum Arc Angle: | The angle that determines the end point location of the meter. |
Tutorial
The Meter is a useful component to display levels. In this topic, we’ll show you how to use the Meter to display planned vs actual production data for a selected well. This is often used in production summary reports.
Let’s look at how we’re actually going to do this, step-by-step.
Step by Step: Creating a Meter That Displays Planned vs Actual Data
Before you start, open a new tab in Explorer and click the “Create a New Page in Studio Mode” thumbnail. Choose the grid layout – you can adjust the rows and columns if you like but it’s not important for this exercise.
You will need to adjust the configuration to suit your data at your site.
Step 1. Add the source data
Before we can display any data on the page, we need to add the source data.
- Below the canvas, click the button labelled “Add Data“.
- Choose the data you are going to use. For this tutorial, we are using a dataset called “WelPlanningData”.
- In the configuration options, specify the following:
- Name: WelPlanningData1 (this is automatically added)
- Query: WelPlanningData (this is the query in P2 Server that is being used to return the data)
- StartDate: (Datetime) 01/04/2015 12:00:00 AM
- EndDate: (Datetime) 30/04/2015 12:00:00 AM
- EntitiesList: (Event) selectedEntity
Step 2. Add the Meter
Drag and drop the Meter component onto a grid cell.
Step 3. Configure the Meter
This dataset provides values for planned production, as well as values for 10%, 50% and 90% of planned production. We can use these values as measures in the meter, to give us a visual indication of how good the actual data is looking. Let's start by configuring a meter that looks at oil production. Configure the meter as follows:
- Source Data: WelPlanningData1
- Actual Column: (Text) OilActual
- Measure 1 Column: (Text) OilP10
- Measure 2 Column: (Text) OilP50
- Measure 3 Column: (Text) OilP90
- Measure 4 Column: (Text) OilPlanned
- Measure 1 Colour: (Text) #59FFAB
- Measure 2 Colour: (Text) #00E572
- Measure 3 Colour: (Text) #00C763
- Measure 4 Colour: (Text) #007F3F
- Arc Thickness: 20
- Number of Ticks: 5
- Minimum Arc Angle: -90
- Maximum Arc Angle: 90
Step 4. Add the Entity Selector
This step allows the user to select an entity, which will drive the meter indicator and measures.
- Drag and drop the Entity Selector control onto the canvas.
- Configure it as follows:
- Selected Entity: selectedEntity
- Selected Entities: (blank)
- Hierarchy Name: (Text) Oil and Gas
- Template Filter: (Text) Oil Producing Well
- Number of Selections: 1
Step 5. All done!
Congratulations! You now have a meter that will show you planned vs actual oil production for a selected well.
- Click the preview
button on the Studio toolbar to see what your page will look like in run-time. - Select entities and observe the changes in the meter needle and measures.
- As a bonus task, add meters for gas and water production, and play around with the arc angles and thicknesses. For water try using the following colours: #BFBFFF, #5959FF, #1111FE, #00008C and for gas try the following: #FF6565, #FF0000, #C00000, #8C0000.
- Tip! You can copy and paste the meter to a different cell, and just change the colours and column values (e.g. in this dataset you can replace GasActual with OilActual etc).
Don’t forget to save your page!