DocsDisplay widget
Graph
A Graph plots readings over time. Put up to six Telemetry Points on one graph, each as an area or a line, and switch between time ranges from 5 minutes to a year.
Device → dashboardUp to 6 Telemetry PointsArea or LineTime ranges · CSV
Try it
The NuttyFi board sends a temperature reading every second and the graph draws it live. Add a second point, switch between Area and Line, and try the axis settings.
SimulationLIVE
Dashboard
This is the real widget from the dashboard.
Your device
The board writes a new reading every second.
TP0 graph type
Second point
Axes
TP0 colour
Show
History needs data over timeLonger ranges such as 7 Days or 1 Year only fill up once your device has been sending for that long. In the simulation only Live is active.
How to add and set up
- Open the dashboard in edit modeOpen the device and turn on editing.
- Add a GraphPress + on the right edge of the canvas and pick Graph. Drag it into place.
- Open its settingsClick the gear icon on the widget. The window title shows the widget's name.
- Link Telemetry PointsUnder Linked Telemetry Points, add up to six points with Add Telemetry Point, and choose Area or Line and a colour for each.
- Pick time rangesUnder Select Time Ranges (Max 5), choose the buttons the graph shows. Save, then press DONE.
Settings
| Setting | What it does |
|---|---|
| Widget Name | The title shown on the widget. |
| Label Color | Colour of the title. |
| Telemetry Points | Up to six per graph (three on Freeware), each with its own colour and graph type: Area, Line, Spline, Step, Column, Scatter, Glow Bars, Neon Line, Lollipop, Heat Line or Threshold. Each shows as a coloured chip next to the title. Area, Line and Column are free; the others need Starter or above. |
| Select Time Ranges (Max 5) | Pick up to five of: 5 Min, 15 Min, 30 Min, 1 Hour, 6 Hours, 1 Day, 7 Days, 1 Month, 3 Months, 6 Months, 1 Year, All. Defaults: 15 Min, 30 Min, 1 Hour, 6 Hours and 1 Day. Freeware opens ranges up to 7 Days. Live is always there. |
| Show X-Axis (Time) | Shows the time labels along the bottom. |
| Show Y-Axis (Values) | Shows the value labels on the left. |
| Auto Scale Y-Axis | The scale runs from the points' MIN to MAX. On: it widens when a reading goes outside that range. Off: it stays at MIN to MAX. |
| Hide widget Name / Telemetry Point / Widget Border | Hide the title, the TP badge or the outline around the tile. |
The buttons on the graph
| Button | What it does |
|---|---|
| Full screen | Opens the graph full screen for a closer look. |
| Clear data | Deletes the stored history of the graph's points (asks first). |
| Download CSV | Saves the readings in the selected range as a CSV file. |
| Range bar | Live plus the ranges you picked; tap one to look back. |
Send data from your device
Each line or area is one Telemetry Point your board writes with SME.publish(). The graph keeps the history, so send at a steady pace. The examples use TP0 and TP1, like the simulation.
C++ · Arduino
SME.publish(TP0, temperature); SME.publish(TP1, humidity);
unsigned long lastSend = 0;
void loop()
{
SME.run();
if (millis() - lastSend >= 5000) { // every 5 seconds
lastSend = millis();
SME.publish(TP0, readTemperature()); // your sensor code
SME.publish(TP1, readHumidity());
}
}#define DASHBOARD_ID "PROJ-XXXXXXXX"
#define DEVICE_TOKEN "SME-XXXX-XXXX-XXXX"
#define FIRMWARE_VERSION "1.0.0"
#define WIFI_SSID "your_wifi"
#define WIFI_PASS "your_pass"
#include <SMEIoT.h>
unsigned long lastSend = 0;
float readTemperature() { return 26.0; } // your sensor code
float readHumidity() { return 55.0; } // your sensor code
void setup()
{
Serial.begin(115200);
SME.begin(DASHBOARD_ID, DEVICE_TOKEN, FIRMWARE_VERSION,
WIFI_SSID, WIFI_PASS);
}
void loop()
{
SME.run(); // keeps the link alive
if (millis() - lastSend >= 5000) { // every 5 seconds
lastSend = millis();
SME.publish(TP0, readTemperature()); // Graph line TP0
SME.publish(TP1, readHumidity()); // Graph line TP1
}
}Send when something changesDon't publish on every pass of
loop(). Send when the value changes, or on a timer, for example every one or two seconds.These are snippets. Your sketch also needs #include <SMEIoT.h>, SME.begin(...) in setup() and SME.run() in loop(). The full sketch tab shows a complete example; see the SDK quick start for more.
Related widgets
Was this page helpful?