Pie Chart

Tutorial: Creating a Pie Chart That Displays Downtime

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

The Pie Chart is a useful component for displaying portions of a whole. In this topic, we’ll show you how to use the Pie Chart to display a breakdown of the reasons for downtime from a dataset. This is often used in production summary reports. 

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

Note: This configuration uses the Sample Data table 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.

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.

• For this exercise, we'll keep the 4 grid cells.
• Assign the first row a height of 60.
• Assign a row spacing of 20.

Related: Grid Layout tutorial

Step 2. Add the Pie Chart

Drag and drop the Pie Chart component onto a grid cell. The Pie Chart is in the Chart  group.

Step 3. Configure the Pie Chart

In this example, we want the Pie Chart to show us the downtime hours for each downtime reason within the dataset. 

Related: Data Selector, Variables

Configuring the Data: 

• Open the Data Data Selector by clicking on the field. You will notice that the Dataset  tab is automatically selected. Staying on that tab, fill in the fields as follows: 
  • Dataset Query: MiningDowntimePivot 
    
  • EndDate: (Variable) endTime
  • StartDate: (Variable) startTime

Configuring the Name Column:

• Click away from the Data Selector.
• For the Name Column you have the option of choosing a variable or a data column from the dataset. The names of the columns in the dataset are shown in a drop-down list. 
• Click the highlighted Column Name box and choose DowntimeReason from the drop-down list.

Configuring the Value Column:

• For the Value Column you also have the option of choosing a variable or a data column from the dataset. The names of the allowable columns in the dataset are shown in a drop-down list. 
• Click the highlighted Column Name box and choose DowntimeHours from the drop-down list.

Configuring Selected:

• Open the Selected Data Selector by clicking on the field. Stay on the Value  tab. 
• This time we want to specify a variable, so click the Variable  icon.
• Type selectedOption into the Value field.

Here we are saying that when the user clicks on a segment of the pie chart, the value of what they click will be stored in the selectedOption variable. We can then use this variable for other components on the page.

Configuring the Legend:

It is often useful to show the legend next to the Pie Chart, so select the Legend check box.

Step 4. Add and configure a Text Label

In this step, we're going to add a Text Label that will show the details of the segment of the Pie Chart that a user clicks on. We're going to show the selected downtime reason and the corresponding downtime hours.

• Drag and drop the Text Label component onto the canvas.
• In the Content box, type: Downtime for reason 
• Click the Add Data button. We're going to add some text that will show the downtime reason. Configure as follows:
  • Type: Text
  • Data: Click the Data Selector, stay on the Value  tab, click the Variable  icon, and type selectedOption.
  • Click the Add button.

Step 5. All done!

Congratulations! You now have a Pie Chart that will show you a breakdown of the reasons for downtime for a selected well. A text label shows you information about the segment you have clicked.

• Click the preview  button on the Studio toolbar to see what your page will look like in run-time.
• Select different segments and observe the changes in the Pie Chart and Text Label.

Don’t forget to save your page!