Charts

This article applies to versions 4.6.2 and later of P2 Explorer. For more, see Release History.

Overview

P2 Explorer charts work together with user controls to display source data interactively. There are several types of charts available, including area chart, line chart, scatter chart, bar chart, and stacked bar chart.

You can also mix different chart types together in one chart, such as a line chart and bar chart, by configuring a chart with different series.

This chart is driven by the user-selected entity (combo box) and product (option links).

Background Reading: Explorer's Data, Variables, Default Values

Quick Start

You can quickly configure a chart in just 3 easy steps: first choose the data, then configure the series and the X Axis.

Step 1. Chart Data

Your chart must display some data, so this is your first step. Click the Data Selector to add data.

Step 2. Series - Y Column

The type of series will often be pre-configured depending on what you have added from the Component Toolbox. The important thing when configuring the series is to choose the values that you want to display on the Y Axis - this is called the Y Column and comes from the set of data you chose in the previous step.

Step 3. X Axis

The last step is to choose the values to plot along the X Axis - this comes from the set of data you chose in the first step.

Step 4. More

After you've done this initial quick configuration, you may want to configure more options to make your chart even more useful.

Read the Charts FAQ for how to add a legend, label, and other tips.

Continue reading for more information on selecting source data, and configuring series, axes, and other options.
Skip to the tutorials for detailed instructions on building various types of charts, including linked charts and split series charts.

Selecting Source Data

Use the Data Selector to configure your chart to use data from a dataset, attribute, tags, or ad hoc calculation:

Configuring Chart Appearance

Once you have data for the chart, you can start configuring the chart's appearance:

Series: The subset of data plotted in the chart. Some properties are specific to the type of series.
Axes: Configuration properties for the X Axis and Y Axis (left and/or right).
Other: Additional options for the chart's general appearance, such as orientation. Some options are specific to the type of series.
Style and Position are common to all components. Choose a predefined style from the drop-down list, or specify the precise position of the chart.

Series

The Chart is available in the component toolbox as several components preconfigured with the series they represent: Area Chart, Bar Chart, Line Chart, Scatter Chart, and Stacked Bar Chart. You can choose any one of these charts and add and remove series as needed.

Adding a Series

Your chart needs at least one series. You can add or remove series from a chart, edit the series properties, and reorder the way they appear in the editor.

Tip: If you have a chart with both a line series and a bar series, it's a good idea to keep the line series at the bottom of the list (in the foreground) and the bar series at the top (in the background).

To add a series, click Add, and then expand the series properties to configure them.

To edit a series, click the series to expand it, then edit the series properties:

To change the order of two or more series, click the up/down arrow next to a series:

To remove a series, click Remove:

Common Series Properties

The various chart series use a set of common properties, plus additional properties specific to the series type.

Type	Each series can be plotted to best suit your data. The default is Line Series.
Use Series Data	Selecting this allows you to use different data for this series, that is separate from the chart data. Two additional properties become available: Series Data: Open the Data Selector to choose a different set of data. Click the Preview button to view the available columns. X Column: Choose one of the columns from the Series Data, to plot its values along the X Axis.
Y Column	This is a mandatory selection, and is one of the columns from the chart's data (using a fixed or variable column name). The Y Column values are plotted along the Y Axis.
Label Option	This is used to identify the series in the legend and hairline. From the drop-down list, choose where the label is to come from: Y Column: Displays the name you have selected from the Y Column drop-down list. Do not use this for split series. Name: Show a name that is different to the series name from the Y Column. Both: Add a custom prefix to the Y Column name. Use the Name property to define the prefix. Read more: How do I add a legend?
Name	A custom name that identifies the series in the legend and hairline.
Name Column	This is used to split a series into separate, smaller sub-series, according to the specified column. For example, a line series that uses a column value (such as Entity) as its name will show a separate line for each different name in the data. This affects both the legend and hairline.
Y Axis	Choose Left or Right for the Y Axis. If you have more than one series, with a very different range of values, then you might choose to have a Left Y Axis for one series, and a Right Y Axis for others, so that values line up better on a single chart.
Filter Column and Filter Value	Use Filter Column and Filter Value together to filter down the data displayed for a series. This is useful if the Y Column values come from a field that stores values apart from the ones you want for this series. With Filter Column and Filter Value you will also need to specify a Name.
Colour	Specify the colour of the series, using the colour picker.

Specific Series Properties

The different series types have specific properties listed after the general properties.

Line Series

The Line series plots your data in a single line. The specific options are:

Interpolation

Determines how the curves are drawn between points in the line series. The options are:
Linear: Connects the data points using a straight line. This is the default.
Curve: Connects the data points using a cubic Cardinal spline with a tension of 0, and control point duplication on the ends.
Step Before: Connects the data points using alternating horizontal and vertical lines. The y-value changes before the x-value.
Step After: Connects the data points using alternating horizontal and vertical lines. The y-value changes after the x-value.

Thickness

Determines the line thickness.

Bar Series

The Bar series has rectangular bars (shown horizontally or vertically), where the length of each bar is proportional to its value. The specific options are:

Bar Size

A number that specifies the width of the bars, in pixels. E.g. 10, 20, 40 or 80. The default bar size is 80px. Note that all the bar series on this chart will have the same width, and you only need to set this for one of the bar series. The bar size may be limited by Explorer, depending on the available width for the chart.

Area Series

The Area series is a line series with the area below the line filled in with a colour. The specific options are:

Interpolation

Dot Series

The dot series displays each point as a dot. The specific options are:

Highlight Colour	The colour that you want to use when highlighting data points. Tip: Use the opacity setting if you want the highlight to appear as a “halo” around the data point.
Highlight Column	The column that is used when determining whether to highlight a data point in the chart. This is typically a timestamp, or other date/time column. Highlighting can be used to draw attention to data points within a specified time range. For example, you can highlight the more recent data points based on a time variable on the page (e.g. if you’re showing 1 week of data, you could have a selectionStart variable set to 1 day ago).
Highlight Start	The variable that indicates the start of the highlighted range. By default, this is selectionStart. We recommend not changing this default. If you do, you will also need to change this in other components that also use this variable.
Highlight End	The variable that indicates the end of the highlighted range. By default, this is selectionEnd. We recommend not changing this default. If you do, you will also need to change this in other components that also use this variable.
Last Point Colour	The last point in the highlighted selection is represented as a coloured diamond. Specify the colour for the diamond, using the colour picker.
Radius	The radius of each point. This can be a decimal value. The radius is useful if you want to emphasize one dot series (large radius) over another (smaller radius). The default is 2.

Axes

The chart has an X Axis, as well as a Y Axis (left and/or right).

X Axis

The X Axis is the principal axis, horizontal by default, containing the values against which other values are then measured. For example, Areas (X Axis) with allocated Budgets (Y Axis). The settings for the X axis may change depending on if the chart is discrete or continuous.

Common Settings

Column	The column (fixed or variable) from the source data that contains the values to display along the X axis. The drop-down is populated based on the columns that are returned with the chart data. If there is no data, then the drop-down is unable to display the columns. To check that the chart is returning data, open the data selector for Chart Data and click the preview button. These are the columns that should appear in the drop-down list. If no data is being shown in the preview table, then check your parameters are correct.
Data Type	The data type of the X Axis determines if the chart is discrete or continuous, and therefore the level of interactivity available to the user. The data type should be compatible with the Column. If Column can be represented as a number, you can select Number or Time from the drop-down. If this is still not compatible with some of the series, you will get a warning message. The default is Time.
Visibility	Show or hide values or gridlines along the x axis. The options are: Both: Display both values and gridlines along the x axis. Ticks: Display the values along the x axis but do not display the gridlines. Gridlines: Display gridlines along the x axis (i.e. vertical lines) but do not display the values. None: Do not display values or gridlines along the x axis.
Label	The label for the X axis. This can be a simple text label or it can be driven by a variable.
Selected	Select a variable here if you want to use the selected value on the X Axis as a variable in a text label or other control, or as a variable parameter to other dataset queries. In display mode, users can click a value on the X Axis to select it. (See Tutorial 1 - Part 4).

Discrete Charts

Values	Add one or more values to the existing values on the X Axis that are returned from the source data (add a list, or use a list variable). Values are added as strings.
Link Action	The Link Action section appears when the X Axis has a data type of string (discrete charts). This allows you to assign links on the X axis values, to allow users to open related information. For examples and further information, see Link Action, Variables, and Variable Mapping and Tutorial 1 - Part 2.

Continuous Charts

Min	The minimum value to be displayed along the x axis. The value cannot go below the minimum, so only set this if you know what the minimum value should be, or if you are only interested in showing points above a minimum value. Min can be left out (no limit set), or assigned a fixed or variable numerical value (the limit). E.g. You might use source data that returns the minimum value of the X field, which you can use as a variable for Min.
Max	The maximum value to be displayed along the x axis. The max value cannot be exceeded, so only set this if you know what the maximum value should be, or if you are only interested in showing points up to a maximum value. Max can be left out (no limit set), or assigned a fixed or variable numerical value (the limit). E.g. You might use source data that returns the maximum value of the X field, which you can use as a variable for Max.
Ticks	The number of intervals to show along the x axis. The chart will determine the best number of ticks that is closest to the given value.

Left Y Axis and Right Y Axis

The Y Axis is used for plotting values of the X Axis. You can specify one or more Y Axes, and they can be configured to the left or right of the chart (this is specified in the Series). By default, the Left Y Axis is used. The Right Y Axis is the same as the Left Y Axis, and can be used instead of (or together with, if using more than 1 series) the Left Y Axis.

It is useful to have these two separate axes if there are multiple series with very different expected values; this way, all series can be better scaled to show up well in the chart. Another use of having both Y Axes would be to show different types of measures. E.g. Show dollars along the Left Y Axis, and counts along the right Y Axis.

Min	The minimum value to be displayed along the Y Axis. The value cannot go below the minimum, so only set this if you know what the minimum value should be, or if you are only interested in showing points above a minimum value. Min can be left out (no limit set), or assigned a fixed or variable numerical value (the limit). E.g. You might use source data that returns the minimum value of the Y field, which you can use as a variable for Min.
Max	The maximum value to be displayed along the Y Axis. The max value cannot be exceeded, so only set this if you know what the maximum value should be, or if you are only interested in showing points up to a maximum value. Max can be left out (no limit set), or assigned a fixed or variable numerical value (the limit). E.g. You might use source data that returns the maximum value of the Y field, which you can use as a variable for Max.
Visibility	Show or hide values or gridlines along the y axis. The options are: Both: Display both values and gridlines along the y axis. Ticks: Display the values along the y axis but do not display the gridlines. Gridlines: Display gridlines along the y axis (i.e. horizontal lines) but do not display the values. None: Do not display values or gridlines along the y axis.
Label	The label for the Y Axis. This can be a simple text label or it can be driven by a variable.
Tick Format	The format of the values displayed along the Y Axis. The options are: None: Display the whole value, using commas as thousand separators (e.g. 1,234,567). Short: Trim long values to 3 significant figures (e.g. 123M).
Scale Type	The type of scale to use for the chart. The options are: *Linear: Shows the actual values. Log*: Display values on a logarithmic scale. This is useful when you have a wide range of values to display.
Log Gridlines	For charts with a log scale, you have the option of showing only the major grid lines (below left), or both the major and minor grid lines (below right). Note: This only applies to the Log Scale Type. Options: Major, Major and Minor.

Other

This includes optional configurations for the chart's general appearance, such as orientation. Some options depend on whether the chart is discrete (X Axis data type of String) or continuous (data type of Time or Number).

Discrete options:

Continuous options:

Orientation	Charts default to vertical. If you change this to horizontal, then your Y Axis is plotted along the horizontal, and your primary values (X Axis) move to the vertical. Horizontal is useful if you are expecting a lot of X values, as the legends stack neatly underneath each other (horizontally). Available on all series.
Legend	The legend identifies the series displayed on the chart. Available on all series. The drop-down list allows you to select the location of the legend relative to the chart. The legend is not displayed by default. Options are (from left to right in image below): Left, Right, Bottom, Top, Bottom, Inner. Choose Inner if you have limited space. The legend sits inside the component's bounding box, so may affect the size of the chart.
Tooltip	Show the Y value of the data point when you hover over a bar on the chart. Only available for discrete charts (x axis data type is *String*).
Range Selector	Range selectors allow the user to highlight a particular section of a chart by dragging on it, and can be used to allow the user to select a time range (can also be used to select a number range). Range selectors are useful when linking charts (see Tutorial 2 - Part 1). Only available for continuous charts (X Axis data type is *Time* or *Number). To enable the range selector, choose how the linked chart is to be updated, from the drop-down list. The linked chart is updated either as the user is actively dragging on the range selector chart (Update On Drag), or after the user has finished dragging and has released the mouse button (Update On Mouseup). When the range selector is enabled, the Range Start* and Range End variables also become available. Range Start: The variable that determines the start of the selected range. By default, this variable is selectionStart. Range End: The variable that determines the end of the selected range. By default, this variable is selectionEnd.
Hairline Mode	A hairline shows the value of a data point at the x axis position that a user clicks. The hairline mode determines how many hairlines can be shown at one time. Options: None, Single, Dual, Multiple. Default is none. Only available for continuous charts (X Axis data type is *Time* or *Number). Additional options: Hairline Start: The time of the line at the left-most hairline. If the Hairline Mode is Single, Hairline Start and Hairline End will have the same value. Hairline End: The time of the line at the right-most hairline. Hairline Update Mode: These options are the same as those for the Range Selector – the hairline is updated either as the user is actively dragging the hairline (Update On Drag), or after the user has finished dragging (Update On Mouseup*). 'Update on Mouseup' is useful when a large amount of data is being returned.
Comments	Comments are observations made at a point in time that users can associate with a particular tag, entity, or entity attribute. When comments are enabled on a chart (see Tutorial 2 - Part 2), a comment symbol in the hairline (see above) indicates that users can click it to add a comment. If a comment has been added, this is shown by a triangular comment marker on the chart itself, coloured to match the applicable series, at the point in time when the comment was added. Users can click the symbol to see the comments and add additional ones. Comments are only available for continuous charts (X Axis data type is *Time* or *Number). Additional option if selected: Comment Names: The names of the tags, entities, or entity attributes that a comment can be associated with, on this chart. You only need to add the items that you want users to be able to comment on. In the hairline, the comment symbol will appear next to its value. Note: For comments against entity attributes, you must: Specify Entity* for the Name Column in the series - this enables the comment service to recognise the entity and associate it with the attribute. Specify the full entity attribute path i.e. Entity[Template]:Attribute!AttributeValue

Tutorial 1: Simple Chart

If you're unfamiliar with the process of building pages, read the article Building an Explorer Page.

This is a 4-part tutorial. In Part 1, we'll add and configure a discrete bar chart. In Part 2, we'll add links to the X Axis. In Part 3, we'll add a Combo Box to control one of the chart's dataset parameters. And in Part 4 we'll use the chart's Selected property to update a variable used by a Data Label. At the end of Tutorial 1, your page should look something like this:

Note: This configuration uses the SampleData table and queries that can be optionally made available during 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.

Part 1: Bar Chart

In this part, we're going to drop a bar chart onto a page, then configure it show dataset data (oil). Then we'll add another Bar Series (to show gas), and give the chart a legend and a label. We will also configure the X Axis so that users can drilldown and open a trend for the selected entity.

Step 1. Prepare a Studio Page

Before you start, click the New Page button on the Home tab of the ribbon. Choose the Grid layout.

Remove a column.
Assign a column spacing of 10.
Add a row (you should have 3 rows now).
Assign the 1st and 2nd rows a height of 10*.
Assign the 3rd row a height of 80*.
Assign a row spacing of 10.

Related: Grid Layout tutorial

Step 2. Add a Bar Chart and Configure its Data

Drag and drop a Bar Chart component onto the 3rd row of the grid layout, as shown. The Bar Chart is in the Chart group.

For the Chart Data, open the Data Selector by clicking on the field. Click the Dataset tab, and fill in the fields as follows:

Related: Data Selector

Field	Click This First	Parameter to Enter	Notes
Dataset Query	(Dataset)	ProductionDataByLevel	Select the dataset query from the Oil and Gas Data datasource.
EndDate			Leaving this empty will use the default values for this parameter, as configured in the dataset.
level	(Text)	Region	Type the variable into the drop-down list.
StartDate			Leaving this empty will use the default values for this parameter, as configured in the dataset.

Click the Preview button to check that you are getting data, and then close the preview window. If the preview window is blank, you may have filled in a parameter incorrectly.

Step 3. Configure the Series for Oil Production

In the Series section, click the Bar Series to expand it, and configure it as follows:

Y Column: Select DataColumn from the first drop-down list, and then select OilActualSum from the second. This is one of the columns available from the Dataset Preview, in the previous step.

Step 4. Add Another Series for Gas Production

In the Series section, click Add to add a new series, and configure it as follows:

Type: Bar Series
Y Column: Select DataColumn from the first drop-down list, and GasActualSum from the second.

Step 5. Configure the X Axis

Click X Axis to expand the X Axis section, and configure it as follows:

Column	Asset	Select DataColumn from the first drop-down list, and Asset from the second.
Data Type	String
Visibility	Ticks	This hides the horizontal grid lines on the chart, but allows the values to be displayed.

The basic chart is now configured! We'll now add some further standard chart configuration: a legend, axis labels, and tooltips.

Step 6. Add a Legend

In the Other section, select the position of the Legend from the drop-down list. Note that the chart preview displays the column name from the dataset. Let's change these.

Expand the first Bar Series (for the OilActualSum bar series).
In the Name text box, type OIL.

Expand the second Bar Series (for the GasActualSum bar series).
In the Name text box, type Gas.

Step 7. Add Labels to the Axes

Click X Axis to expand the section.
In the Label text box, type Assets.

Click Left Y Axis to expand the section.
In the Label text box, type Production.

Step 8. Enable Tooltips

In the Other section, select the Tooltip check box.

Step 9. Try out the Chart

Click the Preview button on the Studio toolbar to see what your page will look like in display mode.
Hover over the chart to see the tooltips.
Note the label alongside the Y Axis, and the one below the X Axis.
Note the legend for the two series, Oil and Gas.

Remember to save your page!

Part 2: X Axis Links on Bar Chart

In this part, we will configure the X Axis so that each value is a link that opens a page, which displays the value of the X Axis that was clicked. First, we need to create a new page containing a simple Data Label.

Step 1. Create a New Page with a Data Label

On the Home tab of the ribbon, click the New Page button and choose the Grid layout.

Add a Data Label (in the Display group) to the page.

For the Value, open the Data Selector by clicking on the field. Click the Value tab, and configure it as follows:

Field	Click This First	Parameter to Enter	Notes
Value	(Variable)	xValueinLabel	This is a variable that will store the value clicked in the chart.

Save the page in My Workspace and name it 'Data Label'.

Related: Data Label

Step 2. Configure the Chart

Reopen the page containing the chart, click the chart to open the configuration editor, and expand the X Axis section.

In the Link Action section, configure the following:

Type	Open Page	We want to open an existing page.
Workspace	My Workspace	Specify the workspace in which you save the page with the Data Label.
Page	Data Label	This is the name of the page we just created.
Tab Type	New Explorer Tab

In the Variable Mapping section (below Link Action), add a Context variable and configure it as follows:

Source	xValue	The drop-down list shows you the available context variables. The xValue variable stores the value of the X axis.
Target	xValueinLabel	This is the variable we specified in the Data Label. When the user clicks on the X axis, its value is passed to this variable on the page specified in the link action above.

Step 3. Try out the Chart

Click the Preview button on the Studio toolbar to see what your page will look like in display mode.
Click on a link in the X Axis to open the page containing the Data Label. Observe the value of the Data Label.

The Set Variables Link Action Type

Note: From version 4.6.2, there is a new Link Action type called Set Variables.

You can use this link action to set page variables, instead of opening a different page, trend, or URL. When you choose the Set Variables link action, you add Variables instead of Variable Mapping. There are two tutorials covering this new Link Action type: Hyperlink Tutorial: Adding a Hyperlink to Set Page Variables, and Status Tile Tutorial: Status Tiles with Set Variables Link Action.

Part 3: Bar Chart Driven by Combo Box

This part of the tutorial demonstrates how we can change the chart's data by using a variable for one of the dataset parameters. We're going to use a Combo Box component to control the level parameter for the chart's dataset query.

Step 1. Add and Configure a Combo Box

Drag and drop a Combo Box component onto the top grid cell of the page, as shown. The Combo Box is in the Control group. Configure the Combo Box as follows:

Field	Click This First	Parameter to Enter	Notes
Option Values	(List)	Region, Location, Area	Click the Values tab. These are all valid values for the level parameter in the chart's dataset query, ProductionDataByLevel.
SelectedOption		selectedLevel	We will use this variable in the chart.

Related: Combo Box

Step 2. Add a Default Value

In the Studio ribbon, click the Defaults button. Add the selectedLevel text variable and assign it a Default Value of Region.

Related: Default Values

Step 3. Configure the Chart Data

Reopen the chart editor, and click the Chart Data data selector. Change the level parameter to the selectedLevel variable, as follows:

Field	Click This First	Parameter to Enter	Notes
level	(Variable)	selectedLevel	Type the variable into the drop-down list.

Step 4. Try out the Chart with the Combo Box

Click the Preview button on the Studio toolbar to see what your page will look like in display mode.
Select Location from the combo box, and see how locations are displayed along the X Axis.

Part 4: Bar Chart Selection

This part of the tutorial demonstrates how we can select a bar in the chart, and use it to change a variable. We'll use this variable in a Data Label.

Step 1. Add and Configure a Data Label

Drag and drop a Data Label component onto the grid cell just above the chart, as shown.

In the Data Label, open the Value data selector by clicking on the field. In the Value tab, fill in the fields as follows:

Field	Click This First	Parameter to Enter	Notes
Value	(Variable)	selectedAsset	If not available for selection, type the variable into the drop-down list.

Step 2. Configure the Chart

Click on the chart to configure it, and expand the X Axis section.

In the Selected drop-down list, choose the selectedAsset variable.

Step 3. Try out the Chart with Data Label

Click the Preview button on the Studio toolbar to see what your page will look like in display mode.
Click a bar on the chart, and see how this appears in the Data Label.

Tutorial 2: Linked Charts

This tutorial is in 3 parts. In Part 1, we will add a scatter chart and a line chart configured with a range selector, and link them together. The user can then use the line chart (range selector) to change the highlighted data points in the scatter chart. In Part 2, we will add hairline and comment capabilities for the scatter chart. In Part 3, we will add a second series to the scatter chart that uses different data. Your charts will end up looking something like this:

Let’s go through this process, step-by-step.

Note: This configuration uses the Sample Data table and datasets that can be optionally made available during 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.

Part 1: Linked Range Selector

In this part, we will configure default values and add a scatter and line chart, linking them together via a range selector on the line chart.

Step 1. Prepare a Studio Page

Before you start, click the New Page button on the Home tab of the ribbon. Choose the Grid layout.

Add another row.
Assign the first row a height of 100.
Assign the second row a height of 350.
Assign a row spacing of 10.

Related: Grid Layout tutorial

Step 2. Set the Page Defaults

We want the initial value of the charts to show average daily data for the Archer well, for the last month. We can set that here.

Click the Defaults button in the Studio tab of the ribbon, and configure the following:

endTime: Current Datetime
startTime: Relative Datetime of 30 Days
pageSampleInterval: 86400 (This is equivalent to 1 day)
selectedEntity: Archer

Related: Variables, Default Values

Step 3. Add and configure a Range Selector Chart

This Chart will enable the user to select data points for highlighting on the Scatter Chart, which we will add in the next step.

Related: Data Selector

Drag and drop a Line Chart component onto the page, and configure it as follows:

Open the Chart Data Data Selector by clicking on the field.	Click the Dataset tab, and fill in the fields as follows: Dataset Query: PressureTempData EntitiesList: selectedEntity Click the Preview button to observe the data, and then close the preview window.
Configure the Line Series as follows:	Y Column: THT (DataColumn) Colour: #5BCE3B
Configure the X Axis as follows:	Column: StartDate (DataColumn) This will plot the values against the StartDate column, along the X Axis. DataType: Time This will be a continuous chart. Visibility: Ticks Hides the gridlines originating from the X Axis, but retains the values. Ticks: 4 Makes the values on the X Axis more readable.
Configure the following Other options:	Range Selector: Update on Drag This enables range selection on the chart, and updates the selection dynamically as the user drags the mouse. We will use the default start and end variables.

Step 4. Add and configure a Scatter Chart

Drag and drop a Scatter Chart component onto the page, and configure it as follows:

Open the Chart Data Data Selector by clicking on the field.	Chart Data: Open the Data Selector by clicking on the field. Click the Dataset tab, and fill in the fields as follows: Entities: selectedEntity (variable) Add an Attribute with the following properties: Template: Oil Producing Well Attribute: THT Attribute Value: Actual Sample Method: pageSampleMethod (variable) Sample Interval: pageSampleInterval (variable) Start Time: startTime (variable) End Time: endTime (variable) Click the Preview button to observe the data, and then close the preview window. Related: Data Selector
Configure the Dot Series as follows:	Y Column: [Oil Producing Well]:THT!Actual We want this attribute to be plotted on the Y axis Colour:#4A4A4A Highlight Colour: #FFFF00 Highlight Column: Timestamp Last Point Colour: #FF2A1F Radius: 4
Configure the X Axis as follows:	Column: Timestamp Data Type: Time We want the chart to display the THT data points over a selected time period. Label: Downtime vs THT for Archer Ticks: 4 Selected: selectionEnd This variable provides the time that will be linked to the range selector chart.
Configure the Left Y Axis as follows:	Here we will add a label to the Y axis. Label: Temperature (Celsius)

Step 5. All done!

Congratulations! You now have two linked charts. The Scatter Chart will show you the THT over time for a selected entity. The Line Chart is a range selector and is linked to the Scatter Chart, so that when you select a range, the dots within that date range are highlighted in the Scatter Chart.

Click the preview button on the Studio toolbar to see what your page will look like in display mode.
Use the range selector chart to select a date range, and play with this to observe the highlight changes.

Part 2: Hairline and Comments

This part builds on the chart created in Part 1. We will now enable hairlines and commenting capability for the scatter chart.

Step 1. Enable a hairline

Go back to the editor for the scatter chart. The hairline functionality is enabled in the ‘Other’ section of the chart.

The variables that indicate the start and end times of the hairline are already set, so you don’t need to alter these. The only thing you really need to do is choose how many hairlines you want the user to be able to show. In this case, let's just allow a single hairline, and choose an update mode. You can also choose some display options, by changing the Hairline Display Option selection.

Hairline Mode: Single
Hairline Update Mode: Update On Drag (updates the hairline variables dynamically as the user drags the mouse)
Hairline Display Option:
- Show Values And Timestamp
- Show Timestamp Only
- Show Values Only
- None (just shows the line itself)

Part 3: New Data

This part builds on Part 1 and Part 2. We will add a new bar series to the scatter chart, and configure it to use completely different data.

Step 1. Add a new series to the chart, that uses different data

Open the editor for the Scatter Chart, and add a new Bar series. Use the arrows next to the series to move the Bar Series to the top.

Expand the Bar Series and configure it as follows:

Choose the Series Data

Use Series Data: Yes
Series Data: Open the Data Selector by clicking on the field. Click the Dataset tab, and fill in the fields as follows:
- Dataset Query: WellProductionData
- EndDate: endTime
- EntitiesList: selectedEntity
- StartDate: startTime

Click the Preview button to observe the data, and then close the preview window.

Configure the rest of the Bar Series as follows:

X Column: StartDate
Y Column: DowntimeHours
Y Axis: Right
Colour: #BCC6D7
Bar Size: 17 (you can play with this number until you get the size you like)

Configure the Right Y Axis as follows:

Here we will add a label to the right Y axis.

Label: Downtime

Step 2. All done!

Congratulations! You now have a bar chart on a scatter chart, that uses different data. The Bar Chart shows you the Downtime Hours for the selected entity and plots this against the right Y axis.

Click the preview button on the Studio toolbar to see what your page will look like in display mode.
Click on the Bar Chart to show the hairline. Note that comments are not enabled: you cannot enter comments against a dataset.

Remember to save your page!

Tutorial 3: Split Series

If you have data in a particular format, you can use the Name Column series setting to split a series into separate, smaller sub-series. This uses one of the columns from the chart's data, where each value in the data's named column is used as a separate name.

This feature is intended for datasets with the following structure:

Entity	Timestamp	Value
TWell 1	1	100
TWell 2	1	200

In this example, we're going to plot the downtime hours for 3 entities, using a single series. At the end of the tutorial, your chart should look something like this:

Step 1. Add a Bar Chart to a page

Open a new page, and drag and drop a Bar Chart component onto it. Configure its data as follows:

Dataset Query: WellProductionData
EntitiesList: Ibis, Archer, Big Red

Step 2. Specify the Y column in the bar series

Expand the Bar Series, and select 'DowntimeHours' for the Y Column.

Step 3. Configure the X axis

Expand the X Axis, and specify the following:

Column: StartDate
Data Type: Time

Step 4. Add the legend

In the 'Other' Section, set the Legend on the bottom of the chart.

Your chart should now look like this:

Step 5. Split the series

We're now going to split the series so that each entity has its own bar. The bars will be clustered along the X Axis.

Expand the Bar series again, and configure the following:

Label Option: Both
Name Column: Entity
Observe that the entity name is prefixed to the column name in the legend.