Embed a chart

A live chart of a channel on your site, in a wiki or on the web page of a device. It reads the channel by its public ID: the key is never in the page.

Required: show the sourceWherever the data of U00 is shown, the people who see it must see that it comes from U00. The element and the iframe do it themselves - "Data: U00" in the corner of the card, a link to U00; keep it visible. A chart of your own needs a line of its own near the data, see Showing the source.

The element

One script and an element where the chart goes. The chart updates itself; the card opens the page of the channel.

<script type="module" src="{ORIGIN}/widget/chart.js"></script>

<u00-chart channel="CHANNEL_ID" item="/temperature" window="1h"></u00-chart>

Many charts on one page share the requests: the script is loaded once, every element asks only for its item.

Attributes

Attribute	Default	Meaning
`channel`	-	the channel ID (required)
`item`	`/`	the item: `/temperature`, `/room1/humidity`
`window`	`1h`	the time of the chart: `5m`, `10m`, `30m`, `1h`, `2h`, `6h`, `12h`, `1d`; `auto` - of how often the data of the channel comes (`/_period`), 1h at least
`interval`	`5`	seconds between the updates, at least 1
`label`	the title of the item	a title of your own
`theme`	`dark`	`dark` or `light`
`link`	`true`	`false` - the card does not open the page of the channel

Size and colors

The element is a block 180 px high and as wide as its place; set the size with CSS. The colors are CSS variables:

<style>
  u00-chart.big {
    height: 260px;
    --u00-bg: #0d1117;
    --u00-border: #30363d;
    --u00-text: #e6edf3;
    --u00-muted: #8b949e;
    --u00-accent: #3fb950;   /* the value and the line */
    --u00-radius: 6px;
    --u00-font: system-ui, sans-serif;
  }
</style>

<u00-chart class="big" channel="CHANNEL_ID" label="Server room"></u00-chart>

The styles of your page do not get into the chart and the chart does not change your page: it lives in its own shadow DOM.

An iframe

Where scripts are not allowed (a site builder, a wiki, a CMS), an iframe does the same. The parameters of the URL are the attributes of the element:

<iframe src="{ORIGIN}/widget/frame.htm?channel=CHANNEL_ID&item=/temperature&window=1h"
        width="360" height="190" style="border: 0" loading="lazy"></iframe>

The web page of a device

A device serves a tiny page; the browser that opens it loads the chart from U00. The device itself only sends the values. An ESP32 with the Arduino core:

#include <WiFi.h>
#include <WebServer.h>
#include <HTTPClient.h>

const char* KEY = "KEY";                 // writes: stays in the device
const char* CHANNEL = "CHANNEL_ID";      // reads: goes to the page

WebServer server(80);

void page() {
  server.send(200, "text/html", String(
    "<!doctype html><meta name=viewport content='width=device-width'>"
    "<script type=module src='{ORIGIN}/widget/chart.js'></script>"
    "<h3>My device</h3>"
    "<u00-chart channel='") + CHANNEL + "' item='/rssi' window='1h'></u00-chart>");
}

void setup() {
  WiFi.begin("your-wifi", "your-password");
  while (WiFi.status() != WL_CONNECTED) delay(500);
  server.on("/", page);
  server.begin();
}

unsigned long last = 0;
void loop() {
  server.handleClient();
  if (millis() - last > 5000) {
    last = millis();
    HTTPClient http;
    http.begin(String("{ORIGIN}/set/") + KEY + "?/rssi=" + WiFi.RSSI());
    http.GET();
    http.end();
  }
}

NoteThe browser that opens the page of the device needs the internet: the chart comes from U00, not from the device.

A chart of your own

The API is open to any site: read the current values and the history with fetch and draw them with any library. The formats are in the reference, the CORS rules in Using the API from your site.

Showing the source

Showing data of U00 anywhere - a chart of your own, a table, a dashboard, an app, a page of a device - put a visible line near it that the data is from U00, with a link:

<small>Data: <a href="https://u00.io">U00</a></small>

It is to be seen without a click or a hover: not hidden, not in the code only.
Near the data: under a chart, in the footer of a widget, in the caption of a table.
The <u00-chart> element and the iframe show it themselves: do not cover or hide it.