⏺️Dashboard Introduction

Overview of Dashboard

The concept of a dashboard is to provide the ObX WebUI clients/users a relatable visualization on their process. A dashboard contains different panels and is customizable depends on the user requirements, it may contain a Trends, Statistics panel, Pie Chart, Bar chart, Gauge panel and more.

Sample Dashboard

Panels / Widgets

The panel or sometimes they call it widget is the basic visualization building block in WebUI dashboard. Each panel has a query editor specific to the data source selected in the panel. The query editor allows you to extract the perfect visualization to display on the panel.

Sample Panels

Each panels has different configuration and properties that is need to edit based on the user’s requirements. The properties of a panel identify the characteristics of a specific panel.

Query Editors

Queries are how panels communicate with ObX data sources to get data for the visualization. A query is a question written in the query language used by the data source.

Query editors are forms that help you write queries. The query editor provide auto-completion, metric names, or variable suggestion.

Query Editor

All panels / widgets have Query editor, this is where we will select Tag in our ObX Datasources.

It is essential to know all this concepts for us to easily create Dashboards. So to summarize, when creating a Dashboard, this involve the following steps:

Query Editor Properties

By default, when you have created a new Panel / Widget, the query editor's configuration or properties will be as follow:

Default Query Editor's Properties

• Data source

  List of datasources attached in the current Organization.

• select measurement

  This is where we will select all available Tags or Parameters or variables in the datasource selected in ObX historian component. All available data is listed here, you can manually type the name of the Tag/parameter.

  Simply click the word select measurement to edit this property.

• Field(value)

  This is the default settings,and you don't have to change anything here.

• mean()

  Default selection of the aggregation function in the query editor. This means that from the selected Tag/Parameters, you want to get its average(mean) value.

  Ideally, there are multiple functions you can use rather than the mean, this will depend on your requirements.

• $_inteval

  When employing an aggregation function in your query editor, it's crucial to set the $_interval parameter. This parameter determines the interval used for time-based grouping in queries. The query editor's algorithm calculates the most efficient interval settings based on the time range specified in your trend or query. However, you have the flexibility to customize the interval according to your preferences such as 1m, 5m, 1h, 1d and so on and so forth.

  In here, 1m means 1 minute. 2m means 2 minute, 10s means 10 seconds

  and so on and so forth.

  Here are list of intervals you may use. By looking at the statement the formula for interval will be:

  # followed by the time preference variable.

Variable	Time preference remarks
s	seconds
m	minutes
h	hours
d	day
M	Month
w	Week

Examples:

• 1w = 1 week

• 35s = 35 seconds

• 24h = 24 hours or 1 day

• 1d = 1 day

• 1M = 1 month

• 5m = 5 minute

• Alias By

  By default, the tagname selected on the "select measurement" will be used as the “Legend name” for your panel. But you can override this by typing in your preferred “tagname”or “alias”.

  If this was omitted, the legend name in the panel will be as followed: {Tagname}.{aggregation_function}

  So if your Tagname is "Counter" and the aggretation function selected is "mean". Then the legend name will be Counter.mean

Adding multiple queries on Query editor

You can enhance the functionality of your Query editor by incorporating additional queries, enabling the simultaneous visualization of multiple Tags/Data in a single panel. In essence, each query functions akin to a pen in a Trend Panel. Therefore, if you aim to observe multiple datasets concurrently, you must append a query for each desired tag/data.

To add another query, just simply click the ➕Query in the query editor.

This will add another set of Query configuration, this time you have A and B query.

2 Queries on the same Panel

You may add more queries depending on your requirements.