demo D286
Project a time series forward in ESM
Fit a column over the filtered rows and project the months ahead, drawn as its own line carrying on from the last reading, with the fit quality shown beside it
grid.statistics.forecast(col, { by, method, horizon })
This grid fits a column over the rows currently in view and projects the months ahead, drawn as its own line carrying on from the last reading, with the fit quality shown beside it. It answers where a series is heading, computed in the browser from the data on screen.
This is the ES module version. The grid is imported straight from a CDN as a module, the same configuration as the vanilla tab without a global script tag, so it drops into any bundler or a bare module script.
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.min.css">
<div id="grid" style="height: 420px"></div>
<div id="chart" style="height: 360px"></div>
<script type="module">
import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
const grid = createGrid(document.getElementById('grid'), {
rowKey: 'id',
columns: [
{ field: 't', title: 'Month', type: 'number', layout: { width: 90 } },
{ field: 'units', title: 'Units', type: 'number', total: 'avg' },
],
rows, // one row a month, in order: t, units
});
// Read 'units' ordered by 't', fit it and project six months ahead, over the
// grid's filtered rows. result.r2 is the fit quality; result.points is the
// months ahead as [{ at, mean }, ...].
const result = grid.statistics.forecast('units', { by: 't', method: 'linear', horizon: 6 });
// Draw the history and the projection as two series that meet at the last point.
const last = rows[rows.length - 1];
const points = rows.map((r) => ({ x: r.t, y: r.units, kind: 'Actual' }));
points.push({ x: last.t, y: last.units, kind: 'Forecast' });
for (const p of result.points) points.push({ x: p.at, y: Math.round(p.mean), kind: 'Forecast' });
const chartGrid = createHeadlessGrid({
rowKey: (r) => r.kind + ':' + r.x,
columns: [
{ field: 'x', title: 'Month', type: 'number' },
{ field: 'y', title: 'Units', type: 'number' },
{ field: 'kind', title: 'Series' },
],
rows: points,
});
createChart({
grid: chartGrid,
container: document.getElementById('chart'),
type: 'line', x: 'x', y: 'y', series: 'kind', legend: true,
title: 'Monthly demand, with the months ahead projected',
});
</script>Where the numbers are heading, from the grid you already have
A column of monthly figures tells you where you have been. The question a room usually asks next is where it is going. This reads the column over the rows currently in the grid, fits it, and projects the months ahead, all in the browser with nothing sent to a server. The projection is drawn as its own line carrying on from the last real reading, so where the history ends and the estimate begins is never in doubt.
You ask for the forecast the same way you ask for any other figure about a column, off the grid you already have. Name the column to project and the column that carries its time axis, choose how far ahead to look, and pick how the line is fitted: a straight least-squares trend for a steady climb, or a seasonal method when the figures rise and fall on a cycle. The fit quality comes back with the result, so you can see how well the line follows the history before you trust where it points.
Because the forecast reads the filtered rows, it follows the grid. Narrow to one region or one product and the projection reshapes to that slice, so a question about part of the data is answered from the part, not the whole. The same grid that holds the numbers is the one that tells you where they are heading.
How do I forecast a column?
Call grid.statistics.forecast with the column to project and an options object: by names the column that orders the time axis, method chooses how the line is fitted, and horizon is how many steps ahead to return. You get back the projected points, each stamped with its position on the time axis and its value, plus the fit quality for a straight-line fit. Draw those points as a second line on a chart, starting from the last real reading so the two meet, and the projection reads as a continuation of the history rather than a separate picture. Because it reads the filtered rows, the forecast updates as you filter the grid.