1. Home
  2. HOW TO: create a Dashboard

HOW TO: create a Dashboard

×

Warning message

You can't delete this newsletter because it has not been sent to all its subscribers.

This page is focused on guiding the users in realizing their first Dashboard. At the end of this page, there are links to other examples that may be used for creating professional Dashboards.

Dashboards can visualize and monitor data from different sources: users’ personal devices, City public data (points of interest, defined as POI, real time data trends from public sensors, heatmaps etc.) and other data sources (available as personal KPI, personal POI etc). Dashboards are based on graphical widgets showing real-time trends and last values of devices, as well as maps showing position of devices, heatmaps computed on interpolated sensors data, several categories of points of interest etc.

As prerequisites, it is assumed that the user’s personal device(s) have already been properly registered (see the page “How to add a device to the Platform”), and the desired data source(s) have been properly added (see the page “ How to add data sources to the Platform”).

For this tutorial we have logged in the Snap4City portal registered to the Helsinki organization. The steps to create your Dashboard are listed in the following:

  1. Starting from one of the Dashboards list views (https://www.snap4city.org/dashboardSmartCity/management/dashboards.php ) in the Dashboard Manager, click on the orange button “New Dashboard” on the top-right, see (1a) in the figure below.

Figure 1. Public Dashboards list.

After clicking the “New Dashboard” button, the Dashboard Wizard tool opens, in order to guide the user with few simple steps to the creation of the dashboard and the instantiation of the desired widgets. We can choose to display a large variety of data, such as public data ingested and made publicly available for the user’s specific organization/City, as well user’s private data, coming from his/her personal devices, apps, personal KPI and POI etc.

As shown in the picture, the Dashboard Wizard is composed by three tabs. In the first tab, called “Dashboard Features”, the user is required to choose a template and insert a title for his/her dashboard. Pre-defined dashboard models available are:

  • Selector and POI: a list of services with a map showing the position of listed services;
  • Selector, POI, trend: a list of services with a map showing the position of the services listed. It is possible to see values associated with a single POI clicking the correspondent pin on the map:
  • Data and trends: a set of performance or status indicator of various nature, shown with a couple of widgets for each indicator, the first one showing last value, the latter showing value time trend;
  • Events vs Map, a list of events of interest (recreative events, city alarms, traffic events…) and their position on a map;
  • Microapp and services, a list of micro-applications shown on a map;
  • Fully custom: to create a new dashboard from scratch, choosing from all available widgets;
  • IOT devices, a dashboard with actuators connected to new or existing IOT devices;
  • IOT Application, a dashboard with widgets (both data visualizer and actuators) connected to IOT applications;
  • My Private Data: a dashboard showing user’s private data, coming from the user’s personal devices, personal KPI, POI etc.
  • Empty Dashboard: to create a new empty dashboard without instantiating any widget.
  1. For example, select the “Data and Trends” Dashboard template (2a), and choose “My Dashboard Data Monitoring” as title (2b). Now click the blue “Next” button at the bottom (2c) to proceed through the next steps provided by the Wizard.
  2. The next Wizard tab “Data and Widgets” is organized as in the following (see the picture):

Figure 3. Dashboard Wizard: “Data and widgets” tab allow to inspect and find data and metrics of interest.

The Wizard tab requires the user to:

    1. choose the data of interest to be represented in the dashboard;
    2. choose the suitable kind of widget to graphically display selected data.

Since we chose the “Data and Trends”  dashboard template (see step 2a), as the template name suggests, this model will allow to display only certain kind of data (which will be pre-filtered in the next Wizard tab) by a combination of a time-trend and a single-content widget (representing temporal trend and last values of selected data, respectively):

  1.  

3a. The “Data Sources” table (3a) shows all data compliant with the previously chosen dashboard template. These data are classified by different categories, from the highest semantic level to the lowest:

  • High-Level Type: the most general data classification level, including: POI (Points of Interest), My POI (user’s private POI), Sensor (IOT devices and City sensors), Sensor-Actuator (IOT actuators), External Services, MicroApplication, KPI, My KPI (user’s private KPI), My Personal Data (another kind of user’s private data), Heatmap, Complex Event, Special Widget;
  • Nature: different semantic categories used to classify all the heterogeneous kinds of available data (e.g.: “Environment”, “Mobility and Transport”, “Accomodation”, “Shopping”, “Cultural Activities” etc.);
  • Subnature: subcategories specifying with a deeper level of detail the previously defined Nature (e.g.: “Air_quality_monitoring_station”, “Weather_sensor”, and “Noise_level_sensor” are some of the Subnatures of the Environment Nature category);
  • Value Type: the type of metric represented by the single data row (e.g.: airHumidity, airTemperature, minTemperatureForecast, airQualityPM10, airQualityPM2_5, seaLevelPressureForecast etc.);
  • Value Name: name or unique identifier of the single metric/data;
  • Data Type: the measure unit of the single metric/data;
  • Last Date: date when the last value has been sent for the current single metric/data (if present) and ingested by the back-end;
  • Last Value: last value received for the single metric/data (if present);
  • Healthiness: status showing if the sensor/device or other data source providing the single data/metric is “healthy” or not (based on different specific rules computed on data frequency ingestion, expected data amplitude range etc.);
  • Last Check: date when the last Healthiness check was performed.
  • Ownership: showing if the single metric/data is public or private (specifying, in the latter case, if it is owned by the user, or delegated by some other user)

Having chosen the “Data and Trends” dashboard template, the “Data sources” table shows only those data which are compliant with the dashboard template choice, which in this case are represented by historical real-time data collected from Sensors (IOT devices and City Sensors), Actuators, KPI and personal KPI (if the user has any), which therefore can be represented and visualized as temporal trends.

3b. Another table, called “Chosen data sources” (3b), shows data which have been selected by the user on the previously defined “Data source” table. In order to select a single metric/data-row from the “Data source” table, simply click wherever on the desired row.

3c. A Map (3c), centered on the user’s organization and/or City (Helsinki, in this case), showing the geographical position of geolocated data (if geolocation information is present) that have been previously selected in the “Data sources” table and listed in the “Chosen data sources” table.

3d. Another section on the right of the Map, called “Data widgets” (3d), showing all the available widgets which can represent the data selected by the user from the “Data sources” table. In this example, since we have chosen the “Data and Trends” dashboard template, the data of interest for the user will be graphically represented by a pre-defined combo of a time-trend and a single-content widget. Therefore, it is not possible to choose other types of widgets, hence this section of the Wizard is shown as empty.

3e. In order to easily find the data of interest, the “Data sources” table can be filtered by applying faceted filters set on some table column headers (i.e.: High-Level type, Nature, Subnature, Value Type, Data Type, Healthiness, Ownership). As an alternative, if you are aware of the name of the device, metric, attribute etc. you are searching for, you can insert it as a keyword in the “Search” box on the bottom-right of the “Data sources” table (3e); this will perform a search for the input keyword across all the “Data sources” table fields.

  1. Let’s choose the weather sensor named 373773207E330118 (which is situated in the Jätkäsaari district in Helsinki), by writing the keyword string “373773207E330118” in the “Search” box. As we start typing, the “Data sources” table is being filtered accordingly to our choice, therefore only rows containing data associated to the 373773207E330118 sensor are shown, as illustrated in the picture below:

Figure 4. Dashboard Wizard: selection of desired data and metrics.

Now we can select one or more data/metrics of interest, to be represented as a time-trend in the dashboard we are going to create. Let’s select, for example, the “PM10” and “PM2_5” Value Types by simply clicking on the table row (4a). As we select these rows, they are highlighted in green, the map flies to the position of the selected sensor, shown with green marker, and the selected entries are added to the “Chosen data sources” table. We can navigate the different sensor metrics, make other searches through the “Search” box as well as with the checkbox filters in the table header. When we are satisfied with our choice, we can click the “Next” button (4b) to proceed to the final step, which is the “Check and summary” tab containing a short recap of the choices made up to this point.

  1. After reviewing the “Check and summary” tab, if we are Ok with our selection, simply click the magic wand button “Create dashboard/widget” (5a), and the dashboard will be created and displayed in another browser tab.

 Figure 5. Dashboard Wizard: “Check and summary” tab allows to review the selection made and to instantiate the dashboard.

  1. The final dashboard should appear like the example in the next picture:

Figure 6. The newly created dashboard.

Once created and instantiated, our dashboard is shown in Edit mode, so that we can apply further modifications and/or additions. For instance, you can adjust the widgets dimension by playing with the dimension arrows button on the top-left corner of each widget (6a). Let’s now add some other data with the help of the Dashboard Wizard again, by clicking the “Wizard” button in the edit bar on the dashboard header, just under the dashboard title (6b).

  1. The Wizard opens again, this time showing only the two tabs “Data and widgets” and “Check and summary” (the first “Dashboard features” tab is hidden, since we are operating inside an already instantiated dashboard). Let’s add another widget showing some public data of the City. For instance, we could add a map-widget showing the position of some desired categories of POIs of the City: first, click on the filter checkbox corresponding to the High-level type filter, selecting the “POI” option (7a).

Figure 7. Dashboard Wizard: filtering High-Level Type to show POI

  1. We can now add the POIs of interest (e.g.: “Air_quality_monitoring_station”, “BusStop” and “Ticket_sale”). While we select the different POI, all the elements of each category are shown in the map as colored markers, and the selected POI categories are added to the “Chosen data sources” table.

 

Figure 8. Dashboard Wizard: selecting different POI categories

We could also be interested in adding some other data source to our map. For example, we would like to see Heatmaps computed by the back end analytical processes on data gathered from different kinds of sensors. In this case, we may want to see some heatmaps with environmental data associated to the Air quality monitoring station we have chosen in the previous POI selection. To do this, set the High-level type filter to “Heatmap” and then choose the “AirQualityPM10Average2HourHelsinki” and “AirQualityPM2_5Average2HourHelsinki” heatmap rows. As you can see in the picture below, these data sources will be added in the “Chosen data sources” table.

Figure 9. Dashboard Wizard: filtering High-Level Type for Heatmap data sources, and selection of some heatmaps of interest

When we are satisfied with our selection, we have to choose a proper widget to represent all selected data. Since we have selected heterogeneous data sources, we need to click on the “Multi-data map” combo-widget (8a), which can handle multiple graphical entities (POI markers, polylines, geometries, heatmaps etc.) from different data sources in a single map instance. Now click the “Next” button to proceed to the “Check and summary” tab, then click on the magic wand to instantiate the new widget, which will be added in the dashboard like shown in the next picture.

Figure 10. Multi-Data map widget is created (a combo of a map and a selector) and shown in our dashboard.

As you can see, a combo widget made by a map and a selector on the left is created. By default, the first data source in the selector is shown on map. This multi-data map has by default an additive displaying mode, so the user can show at the same time multiple POI, together with a single heatmap, and eventually other data sources (which can be added also later, by opening the widget “More options” contextual menu, which is accessible by clicking on the arrow in the Selector widget upper-right corner).

Figure 11. The More Options tab is accessible in the contextual menu of each widget. It allows you to modify specific widget parameters any time you want.

  1. We could also be interested in viewing data from our personal devices or private metrics. In this case, the user in this example has a personal IOT device measuring the temperature of a room (previously registered to the Orion broker). This registered device sends data which are ingested and exposed as “MyKPI” in the Dashboard Wizard. Let’s search this data source by opening again the Wizard.

Figure 12. Dashboard Wizard: selecting MyKPI data to be displayed as a time trend widget showing temporal data trend.

Now, select the “MyKPI” High-Level type filter (9a); then, choose the time-trend widget by clicking the corresponding icon in the “Data-widgets” tab (9b), then click the “Next” button and the magic wand in the following Wizard tab to instantiate the widget showing the temporal trend of the user’s personal metric (in this example, it is a room temperature measure, which has been filled with fake randomly generated data).

  1. Finally, after some restyling and adjustment (which you have to save by clicking the “Save” button on the edit bar jus under the dashboard header), our dashboard may look like in the following picture (we can see it in “View” mode by clicking the “Preview” button on the edit bar jus under the dashboard header):

Figure 13. Final dashboard view.

Links to other examples that may be used for creating more advanced professional Dashboards:

Please start a fully guided training cases:

  • Share