Scenario:
- The "Thermometer" thing has a float property "Temperature"
- The "Thermometer" thing also has a "temperatureChanged" event which refers to a float value
- In this example, a Dashboard is created to show temperature data based on the "temperatureChanged" event
- The data can be displayed in various graphical or tabular formats by using widgets
- Three display formats for the "Temperature" Dashboard are created in this example:
- a gauge showing the most recent temperature value
- a graphical chart showing temperature changes over a selected time period
- a log table with temperature changes listed in tabular form (time of reading and value)
Prerequisites:
- A "Thermometer" thing with a float property "Temperature" was created in the Create, Read And Write Property example
- A "temperatureChanged" event with a float value was added to the "Thermometer" thing in the Create Event And Trigger example
Steps:
This tutorial only covers three of the many possible dashboard widgets available on GadgetKeeper. A complete description of all widgets, along with their set-up procedures, can be found in Dashboard Widgets.
1. Create "Temperature" dashboard
- Open "Dashboards" in main menu to show list of dashboards
- In the dashboards list, click "+" to open "Create Dashboard" dialog
- Set the name to "Temperature"
- Click to save new dashboard
The "Temperature" dashboard is added to the list, and the "Dashboard: Temperature" tab will open
2. Create "Temperature gauge" widget
- In the "Dashboard: Temperature" tab, click "Add Widget" to open drop-down menu
- Click "Event Data Gauge" in this menu to open the "Settings" dialog
- Set "Title" to "Temperature gauge"
-
Set "Thing" to "Thermometer"
-
Set "Event" to "temperatureChanged"
- Set "Attribute" to "value"
- Set "Refresh rate" to "10"
- Click to save new widget for displaying temperature from "Thermometer" thing
The "Temperature gauge" widget will show the temperature based on the most recent "temperatureChanged" event:
3. Create "Temperature chart" widget
- Click "Add Widget" to open drop-down menu
- Click "Event Data Chart" in this menu to open the "Settings" dialog
- Set "Title" to "Temperature chart"
- Set "Chart Type" to "Spline"
-
Set "Thing" to "Thermometer"
-
Set "Event" to "temperatureChanged"
- Set "Attribute" to "value"
- Set "Refresh rate" to "10"
- Click to save new widget for showing temperature over the selected time range from "Thermometer" thing
The "Temperature chart" widget will show a temperature chart based on "temperatureChanged" events occurring within the time range
In this example, "Time Range" is set to "6 hours", but this can be changed as needed
4. Create "Temperature log" widget
- Click "Add Widget" to open drop-down menu
- Click "Thing Event Log" in this menu to open the "Settings" dialog
- Set "Title" to "Temperature log"
-
Set "Thing" to "Thermometer"
-
Uncheck " the "All" checkbox to allow an individual event to be selected
- Set "Selected" to "temperatureChanged"
- Set "Refresh rate" to "10"
- Click to save new widget for showing the log of temperature events from "Thermometer" thing
The "Temperature log" widget will show a temperature log based on the most recent "temperatureChanged" events up to the "Entries" value
In this example, "Entries" is set to "100", but this can be changed as needed