Recipe 10 — Multi-Plot Stacked Monitor¶

Multi-plot layouts let unrelated signals share one session without forcing them onto the same scale. This recipe builds a stacked dashboard where each plot has its own title, range, units, reference lines, and trace color.

Three-plot stacked sensor dashboard — Recipe 10 — three-plot stacked sensor dashboard

Declarations and helpers

#include <ViewPoint.h>
using namespace viewpoint;

float temperature = 25.0f;
float tempTarget = 25.0f;
float vibPhase = 0.0f;
float pressure = 1013.0f;
float pressureTarget = 1013.0f;

Configuration

void setup() {
    view.begin();
    view.setDelay(50);
    view.setTitle("Sensor Dashboard");
    view.setNumberOfPlots(3);

    view.plot(0).setTitle("Temperature");
    view.plot(0).setVerticalRange(0, 50, 5, 10);
    view.plot(0).setAxisLabels("Time", "Temp");
    view.plot(0).setUnits("s", "C");
    view.plot(0).addHorizontalReferenceLine(40.0f, colors::Red, 1.5f);

    view.plot(1).setTitle("Vibration");
    view.plot(1).setVerticalRange(-10, 10, 2, 5);
    view.plot(1).setAxisLabels("Time", "Velocity");
    view.plot(1).setUnits("s", "mm/s");

    view.plot(2).setTitle("Pressure");
    view.plot(2).setVerticalRange(900, 1100, 20, 50);
    view.plot(2).setAxisLabels("Time", "Pressure");
    view.plot(2).setUnits("s", "hPa");
    view.plot(2).addHorizontalReferenceLine(1013.25f, colors::Green, 1.5f);

    view.trace("Temp").setColor(colors::Red);
    view.trace("Vib").setColor(colors::Green);
    view.trace("Press").setColor(colors::Blue);
}

Loop

void loop() {
    if (random(100) < 2) tempTarget = 20.0f + random(20);
    temperature += (tempTarget - temperature) * 0.01f;
    temperature += random(-10, 10) / 100.0f;

    vibPhase += 0.3f;
    float vib = 5.0f * sin(vibPhase) + 2.0f * sin(vibPhase * 3.7f);
    vib += random(-10, 10) / 10.0f;

    if (random(100) < 1) pressureTarget = 950.0f + random(100);
    pressure += (pressureTarget - pressure) * 0.05f;
    pressure += random(-5, 5) / 10.0f;

    view.addData("Temp", temperature);
    view.addData("Vib", vib);
    view.addData("Press", pressure);
    view.send();
}

What the functions do

setNumberOfPlots(3) creates three stacked plot panels.
view.plot(i) configures one panel's title, axis range, units, labels, and reference lines.
Trace auto-map pairs traces with plots in creation order when no explicit assignment is made.

When to use this

Call view.plot(i).addTrace(traceId) when auto-map is not the desired trace-to-plot assignment.
Use separate scales whenever signals have different units or ranges.