A sparkline is a compact, inline chart for seeing a trend without axes or labels. Use one when the pattern matters more than an exact reading. Unlike a full-sized line graph, it can sit beside other information in a table or dashboard, letting you scan many sensor histories at once. section 6.2.1 section 6.2.2
Compare temperature sensors
A hallway sensor produced 6,375 temperature readings over 45 days. Daily low, high, and mean values reduce that history to 45 summaries; a line graph makes the trends and unusual patterns easier to see. Where dozens of sensors need comparing, give each row a sparkline instead of a full graph. Show summary readings alongside it when exact values also matter. 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 browser implementation maps each measurement to timestamps and numeric values, then passes both arrays to μPlot. A 300-by-30-pixel chart hides its axes, legend, and cursor to keep the trend compact. section 6.2.1
Sparklines also fit control panels that must convey substantial telemetry in little space. Their lack of axes is a tradeoff: use them for quick comparison and anomaly spotting, not as a replacement for a graph when precise values or fuller context are needed. section 6.2.1 section 6.2.2
