Creating the query template

In this tutorial, we will use a query template similar to the one in the Direct data ingestion and visualization tutorial. This query template will later serve as the data source of the Value widget.

Proceed as follows

1. Open the Explore > Data Explorer tab.

2. Click the Add Query Template button to create a new query template.
   → The Template Designer is displayed.

3. In the Name field, enter a name for the query template.

4. Click the Access rights button to define the access rights for the desired user roles. Refer to the Managing query template access rights chapter.

5. In the Parameters pane, click the Add parameter button.
   → The Edit Parameter dialog is displayed.

6. In the Technical Name field, enter engine_id.

7. Activate the Provide Choices checkbox to add the engine IDs and their labels.

8. Click the Add choice button to add a row for each engine.

9. Enter a Label and the engine IDs.

10. In the engine_id field below the Define Default Value checkbox, select the engine that should be set as default engine.

11. Click the Save button.

12. In the Template Definition pane, enter the following query.

    [

    {

    "$match": {

    "payload.id" : ${engine_id}

    }

    },

    { "$sort" : { "_id" : -1 }

     

    },

    { "$limit" : 1 }

    ]

13. Click the Create New Query Template button.
    → The template has been created.

14. Test-run the query template with each engine by clicking the Run button to check whether the query template is working correctly.

The query template for this tutorial has been configured as follows:

Creating the Value widget

The next step is to configure the Value widget to visualize the received temperature values.

Proceed as follows

1. Open the Views tab.

2. Open the desired dashboard you want to add the widget to.

3. Click the Add Widget button.

4. Select the Value widget.
   → The widget configuration page is displayed.

5. Open the Dashboard Settings pane to set how the widget is displayed in the dashboard.

   1. In the Size drop-down list, decide how much space the widget should take in the form of columns.

   2. In the Title field, enter a title for the widget.

6. Open the Data Sources pane to configure the data source for the widget.

   1. Click the + Add Source button to add a data source.

   2. Select Query Template.

   3. In the Query Template drop-down list, select the query template you just created.

   4. Click the Save Data Source button.

7. Open the Value View Settings pane to configure the value.

   1. Click the Add Value button to open the value configuration.

   2. In the Path drop-down list, select the 0.payload.value.front-sensor.properties.temperature parameter path.

      The number in the beginning of the parameter path refers to the document number in the data source. The 0 in the example above means that the first document of the data source is considered.

   3. In the Label field, change the name of the value.

   4. Click the Add icon to add the value for the rear sensor.

   5. In the Path drop-down list, select the 0.payload.value.rear-sensor.properties.temperature parameter path.

      The number in the beginning of the parameter path refers to the document number in the data source. The 0 in the example above means that the first document of the data source is considered.

   6. In the Label field, change the name of the value.

   7. Optionally, deactivate the Show Only Value checkbox to set ranges for the value to be displayed in a traffic light system as described in the Optional: Adding color indicators section in the Data ingestion and visualization tutorial.

8. Click the Add button.
   → The Value widget is added to the dashboard and shows the values of the default engine that were sent.

The Value widget for this tutorial has been configured as follows:

Creating the Filter Panel widget

To have the temperature values of the other values displayed in the Value widget, we need to create a Filter Panel widget that will later be linked to the Value widget.

Proceed as follows

1. Click the Add Widget button.

2. Select the Filter Panel widget.
   → The widget configuration page is displayed.

3. Open the Dashboard Settings pane to set how the widget is displayed in the dashboard.

   1. In the Size drop-down list, decide how much space the widget should take in the form of columns.

   2. In the Title field, enter a title for the widget.

4. Open the Add Parameters pane to select a filter option.

   1. Select the Selection parameter.
      → The Selection Parameter pane is added.

5. Open the Selection Parameter pane to further configure the filter.

   1. In the Technical Name field, enter the technical name for the parameter.

   2. In the Label field, enter the label that will be displayed in the Filter Panel.

   3. In the Label-Value fields, enter the name of the engine as well as the engine ID.

   4. Click the Add Row button to add rows for the other two engines.

   5. In the Default Value drop-down list, select an engine that shall always be displayed by default.

6. Click the Add button.
   → The Filter Panel widget is added to the dashboard and shows the filter possibilities in a drop-down list.

The Filter Panel widget for this tutorial has been configured as follows:

Connecting the Filter Panel widget with the Value widget

To have the two widgets interact with each other, we need to adjust the data source of the Value widget.

Proceed as follows

1. In your dashboard, click the Activate Editing button to activate the edit mode.

   Double-click the widget to also activate the edit mode.

   → When hovering over the widgets, a frame is displayed around each widget.

2. In the upper right corner, click the Edit icon of the widget that shall be edited.
   → The configuration page of the widget is displayed.

3. Open the Data Sources pane.

   1. In the Parameters section next to the engine_id parameter, click the Reference icon .
      → The Available References from Filter Widget are displayed.
      

      

   2. Select the filter panel we just created.

   3. Click the Save Data Source button.

4. Click the Save button to save the change.

Filtering the Temperature Values

The temperature values of all engines can now be displayed in the Value widget with the help of the Filter Panel widget.

Proceed as follows

1. In the drop-down list, select any engine for which you want to display the temperature values of the front and rear sensor.

2. Click the Submit button.
   → The temperature values of the selected engine are displayed.

3. Repeat step 1 to display the temperature values of the other two engines.