the charts module · v1.13.0
Charts drawn from the grid's own data.
35 chart types, each reading the grid's filtered rows rather than a copy taken when it was made. Filter the grid below, sort a column, edit a value: every chart bound to it redraws on the next frame. There is nothing to subscribe to and nothing to keep in step, because a chart of rows the user cannot see would be describing a different data set.
one call per chart
A chart is a grid, a container and two columns.
createChart takes the grid to read, an element to draw into, a
type, and the columns for the category and the measure. A categorical chart groups by
x and reduces y for you, so a bar of
charge by region is just those two field names. A measure that needs a particular reduction
is written y: { col: 'charge', fn: 'sum' }.
The module is a separate import, so a page that never charts never loads it. It imports nothing from the grid core, either: the grid is handed in. You load the drawing, or you don't.
import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
// the grid is built as usual, then handed to each chart
const grid = LatticeGrid.createGrid(el, { rowKey: 'id', columns, rows });
createChart({ grid, container: '#by-region',
type: 'bar', x: 'region', y: 'charge' });
createChart({ grid, container: '#by-status',
type: 'donut', x: 'status', y: 'charge' });
createChart({ grid, container: '#scatter',
type: 'scatter', x: 'bandwidth', y: 'charge' });
// filter or sort the grid; every chart redraws itself.and the other direction
Click a mark, and the grid narrows to it.
A chart follows the grid, and it works the other way too. A chart raises
point:click with the mark you hit, and one handler turns that into
a filter on the grid. The chart, reading the grid's now-narrower rows, redraws to match: click
a slice and both the table and the chart are describing that slice a frame later. Nothing here
is bespoke to this page, it is the same two objects the rest of the module uses.
35 types
A type for the shape of the question.
The same createChart call draws all of them; the
type and the columns it reads are the only difference. A chart
given data it cannot draw, a candlestick with three measures rather than four, says so on
the chart rather than drawing nothing.
Nothing fetched at runtime
The charts draw entirely in the browser from the rows the grid already holds. No tile server, no chart service, no request leaving the page.
No runtime dependencies
The module carries its own drawing and takes no third-party charting library along with it. It is one bundle, and it is the whole of it.
Loaded only when charted
The charts module imports nothing from the grid core, so it is a separate file the page asks for only when it draws a chart. A grid that never charts never pays for it.