Chart

The Chart widget plots values over time. The server keeps the history, so the graph has data before you open the app.

Use it for: temperature through the day, battery drain, water level, anything where the trend matters more than the number.

Open these from the canvas: tap Edit, then long press the widget and choose Configure.

Adding a second line

One chart holds several lines, and each one is a datastream you add in the widget settings.

Open Configure, add a datastream, and give it its own virtual pin. Repeat for every value you want on the graph. Each datastream carries its own colour, name and suffix, so one chart can show 23.4 °C and 61 % without confusing them.

Two datastreams on the same pin draw the same line twice. Give each one a pin your sketch writes to separately.

Example

Two sensors, two lines: temperature on V7 and humidity on V8.

#include <PlynxSimpleEsp32.h>

#define TEMP_PIN 34
#define HUM_PIN  35

PlynxTimer timer;

void sendReadings()
{
  float celsius = analogRead(TEMP_PIN) * (3.3 / 4095.0) * 100.0;
  float percent = analogRead(HUM_PIN) * 100.0 / 4095.0;

  Plynx.virtualWrite(V7, celsius);
  Plynx.virtualWrite(V8, percent);
}

void setup()
{
  Serial.begin(115200);

  // Auto setup: WiFi and the Plynx token are configured from the app.
  //
  // To provide them directly in the sketch instead, use:
  //   Plynx.begin(auth, ssid, pass);
  Plynx.begin();

  timer.setInterval(60000L, sendReadings);
}

void loop()
{
  Plynx.run();
  timer.run();
}

Every virtualWrite() adds one point with the time it arrived. The chart draws what the server stored.

One minute suits a room temperature. Pick the interval from how fast the value really moves, because a faster interval fills the history without adding information.

Gaps in the line

The board goes offline, nothing arrives, and the chart shows a gap. That gap is honest: it says the board was not reporting.

To avoid gaps on purpose, send at a steady interval from a timer instead of sending only when a value changes.

Troubleshooting

Next

• Gauge
• Value Display
• How virtual pins work