Viso Dashboards

Viso Dashboards

Dashboards Overview

Viso dashboards allow users to visualise data from edge devices. The Viso dashboards are backed by Grafana and therefore any Grafana dashboard can be imported into Viso using its json representation.

By default, Viso implements a device metrics dashboard (which is not editable) and a blank dashboard which is the default dashboard.

The blank dashboard is shown when the user clicks on the Dashboard menu option:


Viewing Existing Dashboards

The user can view existing dashboards by clicking on the Dashboard button at the top of the default dashboard:



The list of dashboards is displayed which can be searched and filtered as required:



The user can open any of their existing dashboards by clicking on its name in the list.

Creating a New Dashboard

A user can create a new dashboard by clicking on the +Add Dashboard option at the top of the default dashboard.



This creates a new dashboard with a default panel as shown below. The process of creating the dashboard is similar to creating a dashboard in Grafana.



The user can now click on the Add new panel button to start building the dashboard to their requirements. This will open a new page showing the panel, the query editor and the options for the panel:



Users can refer to the Grafana documentation here for further information on dashboards, the different options available and the different methods of visualizing the data.

For adding queries to pull the data to be displayed, check the Dashboard Queries section below.

After adding the query and setting the options the user can Apply the changes and Save the dashboard from the menu options at the top of the page.

Dashboard Queries

Viso uses InfluxDB v2 as its time series database. Each workspace has a corresponding InfluxDB organization with three buckets:

  1. viso_data: All MQTT messages from applications using Viso nodes get written to this bucket.
  2. device_metrics: All the device performance metrics etc. get written to this bucket. Users can create new device metrics dashboards in addition to the default Viso one.
  3. custom_data: Users can add an MQTT output node to their applications and forward any MQTT messages to InfluxDB, these will be stored in the custom_data bucket.
All of the data from the workspace's edge devices goes to one of the three buckets in the workspace Influx organization and be subsequently queried via a dashboard query.

In order to write queries it is useful to understand the InfluxDB data model and the line protocol used for sending time series data which takes the following form:

<measurement name>,<tag set> <field set> <timestamp>

The measurement name is a string, the tag set is a collection of key/value pairs where all values are strings, and the field set is a collection of key/value pairs where the values can be int64, float64, bool, or string.

The measurement name and tag sets are kept in an inverted index which makes lookups for specific series very fast.

The <tag set> is used to identify the messages from devices from a particular workspace and to write these measurements to the correct bucket in the correct InfluxDB organization.

The datasource in the dashboard configuration for the workspace is set to the same InfluxDB organization. The user does not need to worry about this and just write queries to pull data form one or more of the three buckets.

An example query for people counting is:

  1. from(bucket: "viso_data")
  2.   |> range(start: v.timeRangeStart, stop: v.timeRangeStop)
  3.   |> filter(fn: (r) => contains(value: r.device_name, set: ${edgedevice:json}))
  4.   |> filter(fn: (r) => r["_measurement"] == "viso_data")
  5.   |> filter(fn: (r) => r["_field"] == "in_person")
  6.   |> aggregateWindow(every: ${interval}, fn: sum, column: "_value", createEmpty: false)

The query is written in the Flux query language and is entered in the dashboard editor by selecting InfluxDB as the datasource from the dropdown and then entering the query in the query editor:



Further information on the Flux query language can be found here.

There are two variables used in the above query ${edgedevice:json} and ${interval}, these can be configured via the dashboard settings as outlined in the section below.

Dashboard Settings

The dashboard settings are accessed via the kebab menu icon on the top right of the Dashboard page:



The 1st page shows the General settings for the dashboard:



Variables section show the current variables configured and allows the user to create any new variables required:



An example query for a variable which would allow the selection of one or more edge devices from a dropdown list in the dashboard is shown below. The bucket_name can be changed depending on the type of data being queried in the dashboard.
  1. from(bucket: "custom_data")
  2. |> range(start: v.timeRangeStart)
  3. |> keyValues(keyColumns: ["device_name"])
  4. |> group()
In the variables editor the query looks like this:



Scrolling down show additional options such as allowing Multi-Values to be selected from the dropdown in the dashboard an an Include All Option where the user can select multiple values from the variable dropdown in the dashboard to be displayed at the same time e.g. the user could select 3 edge devices to show the graph for all three devices on the one chart.

Note: At the bottom of the variable editor there is a Preview of values section, after entering the query and click in a different box the query should run and the values that were found in the database will be shown here. These values are the ones that will appear in the dropdown list for this variable in the dashboard. This is a good check to test that you variable query is correct.



Another useful variable to add is an Interval variable which allows the user to select a time range across which a dashboard query can be executed e.g. get the average every 30secs, every minute or every day etc.

The variable type should be selected as Interval and a list of possible values added in the values section.



Importing a dashboard from JSON or Editing a dashboard in JSON

To import a dashboard using JSON, click on the +Dashboard icon, navigate to the dashboard settings, select JSON Mode and paste in the JSON. The JSON should be modified to set the id and uid to null, to remove the iteration and enter the title as the name of the dashboard.




















To edit a dashboard JSON directly, open the settings for the dashboard, select JSON Model from the left hand menu and edit accordingly.

After entering and modifying the JSON, save the dashboard. The new dashboard will now appear in the list of available Dashboards with the name as specified in the title field of the JSON.

    • Related Articles

    • Sending Data to External Systems

      There are a number of different ways that applications created in Viso Builder can interface with external systems. Connectivity Methods The method chosen depends on the use case and the external system but will generally fall into one of the ...