Advanced Chart

A flexible multi-series chart for time-series and streaming data. Use it to track sensors over time, plot trends, or visualize anything that changes.

[image] Advanced Chart on canvas, three series in different colors, scrolling left, axis labels visible

What it does

Advanced Chart has two modes:

• Oscilloscope — X is auto-incremented as you push points. Best for fast streaming.
• Time series — You push both X and Y. X format is configurable: elapsed milliseconds, Unix seconds, or freeform float.

Multiple series share the same chart, each with its own color and line style (Linear, Curve, Step variants). Scroll left, extend right, or hold a fixed window — your call.

When to use it

• Live sensor history — Two series (temperature + humidity), Oscilloscope mode, push a point every 500 ms.
• Distance trend — One series, Time series mode, auto Y range. Plot HC-SR04 readings with millis() as X.

Properties

The Inspector opens as a bottom sheet with a Widget ID field at the top, then these sections in order.

Widget ID

1. Essential

2. Display mode

3. Labels

4. Live buffer

5. Header

6. Grid

7. Y range

8. Appearance

9. Colors · Chart

10. Series management

11. Series N: <label>

A dynamic section per series. Section title shows the current series label.

For each series:

Plus per-series action:

12. Colors · Series N

One per series.

States and behavior

[image] Two configurations side by side — Oscilloscope mode (3 series streaming) and Time series mode (1 series with Elapsed ms format)

Each series has its own circular buffer of size Max live points. When the buffer fills, the oldest point drops as a new one arrives.

In code

The widget mirrors what your sketch sends. To push a point on a series:

instant.chart("env_chart").addPoint("temp", readTemperature());

That single line adds a point to the temp series. Don’t put it directly in loop() — Arduino’s loop() runs thousands of times per second, which would flood the link. Use a timer to push at a sensible rate (200–1000 ms is plenty).

Available methods:

• .addPoint(const char* seriesId, float y) — Oscilloscope mode.
• .addPoint(float y) — Default series shortcut.
• .addTimedPoint(const char* seriesId, float x, float y) — Time series mode.
• .clearSeries(const char* seriesId).
• .clear().
• .resetIndex().

See InstantIoT Library / Send Data to App.

Working Arduino code example

A complete sketch you can flash. The Widget ID env_chart matches the one you set on your Advanced Chart in the app. The chart has two series: temp and humidity.

[gif] Advanced Chart on the dashboard with two series streaming in real time as the ESP32 pushes values

Direct Mode

Your phone connects directly to the ESP32’s SoftAP — no router, no server. Best for prototyping and standalone setups.

#include <InstantIoTWiFiAP.hpp>
#include <utils/InstantIoTTimer.hpp>

const char* AP_SSID = "InstantIoT-Greenhouse";
const char* AP_PASS = "12345678";

InstantIoTWiFiAP instant(AP_SSID, AP_PASS);
InstantTimer timers;

float readTemp()     { return 20.0f + (random(0, 100) / 10.0f); }
float readHumidity() { return 40.0f + (random(0, 200) / 10.0f); }

void pushChart() {
  if (!instant.connected()) return;
  instant.chart("env_chart").addPoint("temp",     readTemp());
  instant.chart("env_chart").addPoint("humidity", readHumidity());
}

void setup() {
  instant.begin();
  timers.every(500, pushChart);
}

void loop() {
  instant.loop();
  timers.run();
}

Server Mode

The ESP32 connects to your self-hosted InstantIoT Server over WiFi. Multiple devices, persistent state, history.

#include <InstantIoTWiFiServer.hpp>
#include <utils/InstantIoTTimer.hpp>

const char*    WIFI_SSID     = "YOUR_WIFI_SSID";
const char*    WIFI_PASS     = "YOUR_WIFI_PASSWORD";
const char*    SERVER_IP     = "192.168.1.42";
const uint16_t SERVER_PORT   = 9001;
const char*    DEVICE_TOKEN  = "YOUR_DEVICE_TOKEN";

InstantIoTWiFiServer instant(SERVER_IP, SERVER_PORT, DEVICE_TOKEN);
InstantTimer timers;

float readTemp()     { return 20.0f + (random(0, 100) / 10.0f); }
float readHumidity() { return 40.0f + (random(0, 200) / 10.0f); }

void pushChart() {
  if (!instant.connected()) return;
  instant.chart("env_chart").addPoint("temp",     readTemp());
  instant.chart("env_chart").addPoint("humidity", readHumidity());
}

void setup() {
  instant.begin(WIFI_SSID, WIFI_PASS);
  timers.every(500, pushChart);
}

void loop() {
  instant.loop();
  timers.run();
}

The widget code is identical — only the include and constructor change.

Notes

• This is a Display — no Target Devices dropdown.
• The last remaining series cannot be deleted (the Delete series button hides).
• X axis format is hidden in Server Mode — server always uses wall-clock time.

Next

→ Bar Chart — When values are a small set of named bars, not a series over time.

→ Metric / Gauge — When you only need the current value.