Adding Time Series Data

Time Series data is used to display real-time data on a page, and is useful in live monitoring situations. In this tutorial we’ll add Time series data for a well to a line chart. We'll also add components that allows the user to change the time range, sample interval, sample method, and the well being monitored.

This tutorial is quite involved, so we’ll do it in 2 parts. Let’s go through this process, step-by-step.

---

Step by Step 1: Adding Time Series Data and Events

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 Time Series Data

This is the first step to adding time series data.

1. Click Add Data.
2. Select the Model option.
3. Click Add.

The configuration panel for the time series data will appear to the left of the canvas, with the parameters pre-populated.

 

 

Step 2. Configure the Time Series Data

Fill in the fields and parameters as follows:

• Name: TimeSeriesData
• Using: Entities
• Entities: (Event) selectedEntity

Templates and Attributes are specified slightly differently. First you need to select the template, then select the attribute, and then click Add. Repeat this to add multiple attributes. Let's add the first attribute.

• Template: Select "Oil Producing Well"
• Attribute: Select "Current Flowrate" (grouped under "Oil Flowrate")
• Now click Add.

Now let's add the 2nd attribute.

• Template: Select "Oil Producing Well" (this should still be selected after you've added the 1st attribute)
• Attribute: Select "Daily Avg Flowrate" (grouped under "Oil Flowrate")
• Now click Add.

Now let's complete the remaining fields.

• Group By: None
• SampleInterval: (Event) sampleInterval
• SampleMethod: (Event) sampleMethod
• StartTime: (Event) startTime
• EndTime: (Event) endTime

It’s a good idea to always click Preview to make sure you are getting the data you think you are. At this point, however, we need to specify some event defaults before the data will appear.

 

Step 3. Add Default Values for the Events

Adding default values allows the components in the page to display default data and selection values. In doing this, we can populate combo boxes automatically when the page loads, and avoid having an empty page. You can create an event at any time, but let's do this now.

• Click the Event Defaults button on the far right side of the Studio toolbar.
• Click Add.
• Add an event called “sampleMethod” with a Text value of Average.
• Add an event called "sampleInterval" with a Number value of 86400 (this is the number of seconds in a day).
• Add an event called "startTime" with a Datetime value of 02/03/2015 12:00:00 AM.
• Add an event called "endTime" with a Datetime value of 31/03/2015 12:00:00 AM.
• Add an event called "selectedEntity" with a List value of Hunter.

 

Step 4. Done!

Congratulations! You have configured some Time Series data and some default events.

• Go back to the Time Series data and click the preview button to see the data in a table format.

Don’t forget to save your page!

---

Step by Step 2: Adding Components to the page

In the first step-by-step we added some Time Series data and configured some event defaults. Let’s finish off the page by adding some components. First we’ll add a chart so we can see the default data in action, and then we'll add some controls so the user can manipulate the data.

Step 1. Add a Chart

Let’s add a Chart to display our data. Drag and drop a Chart component onto another cell on the page. Configure a line chart as follows.

• Source Data: TimeSeriesData
• For the chart series:
  • Type: Line Series
  • Y Column: (Text) Value
  • Name Column: (Text) Tag
  • Colour: (remove the default and keep blank)
• For the X Axis:
  • Column (Text): Timestamp
  • Data Type: Time
• Other:
  • Legend: (select this check box)
  • Legend Position: (Options) Bottom

 

Step 2. Add and Configure an Entity Selector

This step allows the user to select the well to display time series data for.

• Drag and drop the Entity Selector control onto the canvas.
• Configure it as follows:
  • Selected Entity: selectedEntity
  • Hierarchy Name: (Text) Oil and Gas
  • Template Filter: (Text) Oil Producing Well
  • Number of Selections: 1

 

Step 3. Add and Configure a Date/Time Range Picker

This step allows the user to select the start and end dates for the data they want to display.

• Drag and drop the Date/Time Range Picker component onto the canvas.
• Use the default events as follows:
  • Start Date/Time: startTime
  • End Date/Time: endTime

 

Step 6. All Done!

Congratulations! You have configured time series data that displays well flow rates in a line chart. The user to change the time range, sample interval, sample method, and the well being monitored.

• Click the Finish and Open button on the Studio toolbar to save your page and see what it will look like in run-time.
• Try selecting different wells, times, sample intervals and sample methods, to see the chart change.

Don’t forget to save your page!