Adding a single-value component to our dashboard

The single value dashboard components can be used to display single metrics, such as growth percentage and total number of incidents. We will learn how to incorporate targets with single value components to create a KPI from the presented metric. We have many types of single value components that will do exactly the same but with a different visualization.

As a part of our eFashion dashboard project, we will add a gauge, value, and progress bar dashboard components. So, let's start with it.

Gauge and dial

The gauge and dial are exactly the same and can be used to display a metric value. The value can be indicated by a needle or marker. The only difference that I can see between gauge and dials is that gauge scale lies inside the circle, while the dial's scale lies outside the circle. Otherwise, they are exactly the same.

Let's follow the following steps to add a gauge to our dashboard:

1. Open the dashboard file and navigate to the Dashboard tab from the tab set.
2. Navigate to Single Value category under Components panel.
3. Drag a Gauge to the canvas.
4. Navigate to the gauge properties and map the following:
   • Title: 'Single Values'!$B$1
   • Name: 'Single Values'!$A$2
   • Value: 'Single Values'!$B$2
5. Make sure that indicator type is Needle.
6. Set the scale to Auto | Value Based.

   Please refer to the following image:

   

Now, let's try to enhance our gauge by performing the following steps:

1. Navigate to Behavior | Common tab.
2. Uncheck the Enable Interaction option.
3. Navigate to Appearance | Layout tab.
4. Select Manual under Enable Ticks area and set the major and minor number of ticks to 10 and 2.

   We can see the steps in the following screenshot:

   

   We can see the final gauge in the following screenshot:

   

Before we move to the next single value dashboard component, let's discuss some of the new features introduced here.

• Enable Interaction: This option can be configured under Gauge properties Behavior | Common tab. If we enable this option, the gauge will act as an input as well. We can move the gauge needle, and the value will change accordingly at runtime only. This means that the new value will not be saved with the dashboard, and it will reset to the original value when we open the dashboard again. This feature can be used in "what if" scenarios. A "What If" scenario is a simulation for what may happen to a metric if we changed one of it's factors. For example reducing expenses (factor) and net profit (metric).

  Tip

  We can control the needle movement increment from Behavior | Common | Needle Movement option if the Enable Interaction option is enabled. We can also control the mouse sensitivity, which will determine how fast the metric value will be changed based on the mouse move.

• Enable Play Button: This option can be configured under Gauge properties Behavior | Common tab. This option will automatically increment the gauge metric by the configured increment size. A small play button will be displayed in the center of the gauge, and it will show all the possible metric values in the predefined Play Time (seconds).

  Tip

  We can use Auto Play and Auto Rewind options to continuously play the gauge.

We can see this option in the following screenshot:

Next, we will discuss progress bars.

Progress bar and sliders

Progress bars and sliders can be used to show the progress of a metric; we can use it, for example, to display year to date (YTD) figures, month to date (MTD) figures, and so on. We can use both of them as an input as well, and we have the same interaction and play features that we have already explained. Sliders are most suitable for interaction, while progress bars are more suitable for data display. We have many different types of progress bar and sliders that vary between horizontal and vertical scales.

We can see a progress bar and slider in the following screenshot:

Exercise: Create a progress bar and map it to the corresponding data in the Excel single value sheet. The steps are exactly the same as what we did in the Gauge component.

Note

A dual slider is a special type of slider that can control two values at the same time.

Value and spinner

This is yet another two types of single value components that can simply display a value in a box. The main difference between the spinner and value is that you can control the metric value in the spinner by two small up and down arrows, while you can use the mouse to control the metric in the value component.

We can see the Value and Spinner dashboard components in the following screenshot:

Exercise: Create the Value dashboard components and map it to the corresponding data in the Excel single value sheet.

Tip

Value and spinner components are not supported in Mobile desktop, and we can use Label component to replace them.

Play

The play dashboard component is nothing but a slider with play buttons. We can use it exactly in the same way as all the other single value components. The main difference is that this component is more suitable for play and interaction scenarios. We can see a play component in the following screenshot:

Exercise: Arrange dashboard components by dragging and dropping them to the right location, as displayed in the following screenshot: