μPlot is a compact JavaScript charting library optimized for large time-series datasets. In a browser, it can turn sensor readings into small graphs that make trends and anomalies easier to compare without giving every measurement a full-sized chart. section 6.2.1
A sensor dashboard can query a digital twin’s GraphQL API for measurements from a named space over a 24-hour period. It then creates one chart per measurement, hiding axes and legends for a sparkline effect. A fuller view also reports each measurement’s minimum, maximum, mean, and latest reading. section 6.2.1
result.spaces.forEach(space =>
space.measurements.forEach(({ name, values }) => {
const chartsDiv = document.getElementById('charts');
const chartDiv = document.createElement('div');
chartsDiv.appendChild(chartDiv);
const timestamps = values.map(({ timestamp }) #1
=> parseInt(timestamp) / 1000);
const chartValues = values.map(({ value })
=> parseFloat(value));
new uplot({
width: 300,
height: 30,
axes: [ { show: false }, { show: false } ], #2
series: [ {}, {stroke: "#0066cc", fill: "#3b82f619"} ],
legend: { show: false }, #3
cursor: { show: false }
}, [timestamps, chartValues], chartDiv);
}));
The rendering listing converts timestamps to seconds and values to numbers, then passes both arrays to a 300-by-30-pixel μPlot chart with axes, legend, and cursor hidden. section 6.2.1
