Charts (4.4.2)

This article applies to versions 4.4.2-4.4.5 of P2 Explorer. For help on the latest version, see Charts.

Overview

P2 Explorer charts work together with user controls to display source data interactively, using Variables.

Related: Using the Chart in display mode, Adding a new Chart style.

---

Background Reading

You might find it helpful to read the following primer articles, before you configure a chart.

Explorer's Data	P2 Explorer uses P2 Server to deliver data from any number of data sources or calculations, on demand. Read about how P2 Explorer uses data, and how to use variables, default values and query parameters to make your displays more interactive.
Variables	Explorer uses Variables to provide an interactive user interface. Find out how to link variables between the various components.
Default Values	Default values set the context for a page or trend. A user should have access to relevant information, preferably without having to immediately change the default selections. Find out how to add defaults to a page in Studio.

---

Configuring a Chart

The two aspects to configuring a chart are:

1. Selecting source data.

2. Configuring the chart's appearance.

---

Selecting Source Data

You can configure your chart to use data from any of the following data categories:

The following types of data can be configured for a chart.

Dataset Configure your chart to use dataset (relational) data.	Attributes Configure your chart to use time series data (attributes).
Ad Hoc Calculations Configure your chart to use ad hoc calculations, using time series data (tags, calculations and attributes).	Tags Configure your chart to use time series data (tags).

---

Configuring the Chart's Appearance

• Series: Explorer charts plot data as a series.
• Axes: The chart has an X Axis, as well as a Y Axis (left and/or right).
• Other: This includes optional configurations for the chart's general appearance, such as orientation, style and position.

Series

Line Series: The Line series plots your data in a single line. You can combine this with other lines series (as shown), or with different types of series, such as bar, dot, etc.		Bar Series: The Bar series has rectangular bars (shown horizontally or vertically), where the length of each bar is proportional to its value.
Stacked Bar Series: The Stacked Bar series has one or more series containing bar charts which stack vertically to form single bars. This is useful when you want to show parts of a whole.		Area Series: The Area series is a line series with the area below the line filled in with a colour. If using more than one area series, it can be helpful to adjust the opacity (as shown in this example).
Dot Series: The dot series displays each point as a dot, and is typically used to highlight statistical distributions.		Combined Series: Charts that combine different series are useful for showing related information in different ways.

1. To add a series, click Add, then edit the series properties. 2. To swap series order, click the up/down arrow next to a series. 3. To remove a series, click Remove. 4. To edit a series, click the series to open it, then edit the series properties.

Part 1: Properties Common to all Types of Series Type: Each series can be plotted to best suit your data. The default is Line Series. 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 get plotted against the Y Axis. Show Column Name: Select this check box if you want the column name (as selected in Y Column) to show in the legend. This is overriden by Name, if that has a value. Name: The Y Column's name. This appears in the legend, and should describe what is being represented. For example, the name COSTS can be applied to a series where the Y Column is the value TOTAL_AMT, if this value represents costs. Any value assigned to Name overrides Show Column Name. Name Column: Name Column is an alternative to Name. This uses one of the columns from the chart's data (using a fixed or variable column name). Each value in the data's named column is used as a separate name. An example would be a name column of 'Costs', where each separate cost in the data is plotted as a separate series. Name Column overrides the Name, effectively splitting a series into separate, smaller sub-series. For example, a line series that uses a column value as its name will show a separate line for each different name in the data. 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, instead of the Name Column, 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. (More)

Colour: Specify the colour of the series in hexadecimal, for example #913D88 or RGB format, for example RGB(145,61,136). You can also just type in the name of a colour, for example RED, BLUE, MAGENTA, YELLOW etc. Colour Matcher: You can type in a reserved word to get the correct matching colour. For example, OIL gives you the correct values for the specific oil green. Note that Colour overrides Colour Matcher, so keep it empty if you want to use Colour Matcher. Colour matcher values you can use are OIL, GAS, NGL and WATER. This is particularly useful if you’re driving the colour from a value in the source data, and want it to be meaningful for the value that it’s representing.

Part 2: Properties Specific to the Selected Types of Series The different series types have specific properties listed after the general properties, as shown in section 2 of the screenshot above. Line Series The Line series plots your data in a single line. Interpolation: Your choice here determines how the points on the chart are connected. The default value is Monotone. Other choices include Step and Linear. The full list is in the drop-down.   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. Bar Size: If you want to specify a bar size, type a number here, for example 10, 20, 40 or 80. This determines the width of the bar, in pixels. 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 bar padding and the available width for the chart. You can also use the word "Fill" to fill the bars completely.   Bar Padding: This is the padding (in pixels) between the different bars for an x-value. Note that bar size and bar padding values will be overridden by Explorer, if there is not enough room on the chart.   Stacked Bar Series The stacked bar is a series of one or more bar series.   Area Series The Area series is a line series with the area below the line filled in with a colour. Opacity: Determines how transparent or opaque the area is. Values range from 0 to 1 (although 0 is invisible). Adjusting the opacity is useful when you add more than one area series, with the areas in the background showing through. In such a case, make each successive area chart less opaque than the previous one. For example, the first one is Opacity 1, then next is 0.75, the next is 0.5 and so on.   Interpolation: This is for the line demarcating the area series. Your choice here determines how the points on the chart are connected. The default value is Monotone. Other choices include Step and Linear. The full list is in the drop-down.   Dot Series The dot series displays each point as a dot. 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).

Examples of Series Configuration

Skip to end of examples

Changing the Opacity on two Area series	A narrower Bar Size (25) on a Bar series	Filled-in Bar Size (Fill) on a Bar series
Two Dot series; each has its own Colour and its own Radius (for the dot size).	This is a single Line series. The lines are split using the Name Column.	This single Line series displays just one of the entities. Data is filtered using the Filter Column and Filter Value.

The chart in the screenshots below has four Line series, with TOTAL using the right Y Axis, and GAS, OIL and NGL on the Left Y Axis.

A) All lines appear on the chart.

B) When the user clicks or hovers on the Right Y axis, only the left-axis and the line series using this axis are displayed.

C) When the user clicks or hovers on the Right Y axis, only the right axis and the line series using this axis are displayed.

The chart in the screenshots below demonstrate how the order of the different series affects the chart appearance.

The line series appears behind the bar series, because it is listed first in the component editor.

The bar series appears behind the line series, because it is listed first in the component editor.

The 'Budget' bar series appears before the 'Spent' bar series, because it is listed first in the component editor.

There are many options for configuring your series; try these out once you have set up a chart.

 

Axes

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

X Axis

The X Axis is the principle axis, horizontal by default, containing the values against which other values are then measured. For example, AREAS (X Axis) with allocated BUDGETS (Y Axis).

Column: Choose a column (fixed or variable) from your source data, for example AREA. The column values for the result rows are then plotted along the X Axis, for example Area 1, Area 2, Area 3, etc. Data Type: This defaults to String, and should be compatible with the Column. If Column can be represented as a number, then you can select Number from the drop-down (the third option is Time). If this is still not compatible with some of the series, then you will get a warning message. Visible: If this is not selected (select the check box or use a variable to control this), the X Axis values do not appear along the X Axis. 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. Label: This can be blank, or add a label (type this in, or set a variable) to be displayed below the X Axis. Enable Gridlines: Enable or disable vertical gridlines. Selected: Select a variable here if you want to use the selected X Value as a variable in a text label or other control, or as a variable parameter to other dataset queries. At run-time, click a value on the X Axis to select it. (See Tutorial - Part 3).
Left Y Axis and Right Y Axis
The Left Y Axis, vertical by default, is used for plotting values of the X Axis. Note that this axis is only used if Left is selected as the Y Axis in one or more series (it is, by default). The Left Y Axis comes preconfigured. The Right Y Axis is the same as the Left Y Axis, and can be used instead of or together with the Left Y Axis (selected in the Series). It is useful to have these two separate axes if there are 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. For example, show dollars along the Left Y Axis, and counts along the right Y Axis.
Min and Max: The max value cannot be exceeded, so only set Max if you know what the max should be, or if you are only interested in showing up to a maximum value. The same applies to Min. Min/Max can be left out (no limit set), or assigned a fixed or variable numerical value (the limit). For example, you might use source data that returns the max value of the Y Field; use this as a variable Max. Visible: If this is not selected (select the check box or use a variable to control this), the X Axisvalues do not appear along the X Axis. Label: This can be blank, or add a label (fixed or variable) to be displayed alongside the Y Axis. Enable Gridlines: Enable or disable horizontal gridlines. Note that if you have this enabled on either the left or the right Y axis (and that axis is used by one or more series), the gridlines are visible. Ticks: Defines the number of Y Axis intervals Tick Format: Format the Y Field, which is displayed along the Y Axis. For example, if your Y Field is a dollar value, you can type in the dollar $ symbol. Your labels would then look like $ 50.00, $ 25.00 and so on. Other formatting to use are the signs (+/-), the comma (for a thousands separator), and precision symbols. You can use these together, for example “$ ,” displays the currency symbol and has a thousands separator. Scale Type: The default option is Linear (showing the actual values). Logarithmic scale (Log) displays a logarithmic calculation, which is useful when you have a wide range of values to display. Tip: You can set the this as a variable in a Combo Box, so that the user can toggle between the log and linear scale. Log Gridlines: Note: This only applies to the Log Scale Type. Options are: Major Only, and Major and Minor.

Other

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). Legend: The legend displays the values of the X Axis Field. Legend Position: This option only appears if you select the Legend. Right by default. This can be Left, Right, Top, or choose Top-inside if you have limited space. Tooltip: Tooltips show the Y value when you hover your mouse over that area of the chart (e.g. over a bar). Style: The style to apply to the chart component to change its appearance. If you are a Style Administrator, you can add a new Chart style.

This chart has vertical orientation, a legend on the right, and tooltips:	Here the same chart has horizontal orientation, a legend on the top, and no tooltips:

---

Tutorial

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

This is a 3-part tutorial. In Part 1, we'll add and configure a chart. In Part 2, we'll add a Combo Box to control one of the chart's dataset parameters. In Part 3 we'll use the chart's Selected property to update a variable used by a Data Label.

Refer to the Charts Tutorial page in the Tutorials workspace, if you have access to 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 chart onto a page, then configure it show a Bar Series showing dataset data (oil). Then we'll add another Bar Series (to show gas), and give the chart a legend and a label.

There are six steps:

• Step 1. Prepare the new tutorial page in Grid Layout, and configure the layout.
• Step 2. Add a chart and configure its data.
• Step 3. Configure a bar series, showing oil production.
• Step 4. Give the chart an X Axis.
• Step 5. Add another bar series, showing gas production.
• Step 6. Give the chart a legend and labels.

Step 1. Prepare the Tutorial Page

Note: Before you start the tutorial, prepare a Grid Layout page in Studio. Save it to your workspace (My Workspace), giving it a suitable name, such as Charts Tutorial.

1. Configure the grid layout to have one column and two rows. Allocate a Column Spacing and Row Spacing of 30, each. Resize the first row to 20* and the second to 80*.

2. Drop a second Grid Layout onto the top row of the base grid layout. Give this grid layout one column and two rows.

This is how the page should look at this stage:

Step 2. Add a chart and configure its data.

1. Drag and drop a Chart component onto the second row of the base grid layout, as shown. The Chart is in the Chart group.

2. Click the Chart component to configure it.

3. Add a dataset query to the Chart's data, using the Data Selector for Dataset Queries.

• Dataset Query: Select the ProductionDataByLevel dataset query from the Oil and Gas Data datasource.
• Dataset Parameters:
  • endDate: Select endTime from the parameter drop-down list (variables). This uses the Page Default variable for endTime.
  • level: Type Region in the text box (text constant).
  • startDate: Select startTime from the startDate parameter drop-down list (variables). This uses the Page Default variable for startTime.
• Click Preview to view the data that will be used for the chart.

Step 3. Configure a bar series to show oil production

1. Click the Lines Series (in the Series Section) to configure a bar series (in the screenshot below, this already shows Bar Series).

2. In the Type drop-down list, select Bar Series.

3. For the Y Column, select DataColumn from the first drop-down list, and OilActualSum from the second.

4. In the Colour Matcher text box, type OIL.

Step 4. Give the chart an X Axis

1. Click X Axis to open the X Axis configuration.

2. For the Column, select DataColumn from the first drop-down list, and Asset from the second.

Step 5. Add another bar series, showing gas production

1. Click Add (in the Series Section) to add a new series.

2. In the Type drop-down list, select Bar Series.

3. For the Y Column, select DataColumn from the first drop-down list, and GasActualSum from the second.

4. In the Colour Matcher text box, type GAS.

Step 6. Give the chart a Legend, Labels, and Tooltips

1. To add a Legend to your chart:

a. Click the first Bar Series, to open the OilActualSum bar series, and type OIL in the Name text box.

b. Click the second Bar Series, to open the GasActualSum bar series, and type GAS in the Name text box.

c. Select the Legend checkbox in the Other section.

2. To add Labels to your chart:

a. Click X Axis to open the X Axis configuration, then type Assets in the Label text box.

b. Click Left Y Axis to open the X Axis configuration, then type Production in the Label text box.

3. To add Tooltips to your chart: Select the Tooltip checkbox in the Other section.

Try out the Chart

• Click the Preview button on the Studio toolbar to see what your page will look like in run-time.
• 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.

Part 2: 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.

Related: Combo Box, Default Values.

1. 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.

2. Click the Combo Box to configure it.

3. Add three values for the Option Values: Region, Location and Area. These are all valid values for the level parameter in the chart's dataset query, ProductionDataByLevel.

4. Type selectedLevel in the Selected Option drop-down list.

5. Add a Default Value of Region for selectedLevel.

6. Now update the chart to use selectedLevel as its level dataset parameter variable.

a. Click the Data drop-down list to open it.

b. For the level dataset parameter, click the variable icon, and then select selectedLevel from the drop-down list.

Try out the Chart with Combo Box

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

Part 3: Bar Chart Selection used by a Data Label

Related: Data Label

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.

1. Drag and drop a Data Label component onto the grid cell just above the chart, as shown. The Data Label is in the Display group.

2. Click on the Data Label to configure it.

3. For the Value property, assign value data, choosing the variable option. Name the new variable selectedAsset.

4. Click on the chart to configure it.

5. Click X Axis to open the X Axis configuration, then select selectedAsset from the Selected drop-down list.

Try out the Chart with Data Label

• Click the Preview button on the Studio toolbar to see what your page will look like in run-time.
• Select Location from the Combo Box.
• Click on a Location on the chart, for example Junction Hill and see how this appears in the Data Label.

 

---

Options for Configuring a Chart's Data

There are four separate data categories that you can choose from, when configuring your chart's data.

Here is the full reference of data categories you can choose from (including the dataset category already covered in Tutorial 1).

Important Note: You can tab through the different data categories, to configure them. The one that is selected when you save the page remains the configured option. Any other configurations will be lost.

Select a Data Category
Dataset Configure your chart to use dataset (relational) data. See how: Using Dataset Data	Attributes Configure your chart to use time series data (attributes). See how: Using Attribute Data
Ad Hoc Calculations Configure your chart to use ad hoc calculations, using time series data (tags, calculations and attributes). See how: Using Ad hoc Calculation Data	Tags Configure your chart to use time series data (tags). See how: Using Tag Data

---

Release History

• Charts 4.4.0
• Charts 4.3.2