Lattice Grid Buy a licence

demo D170

Charts follow the grid in Svelte

Filter, sort or edit the grid and every chart bound to it redraws

createChart({ grid, type, x, y })

This draws several charts from a grid and has every one of them redraw when you filter, sort or edit the grid. It shows that a chart reads the grid's live filtered rows, not a snapshot, so a filter on the table moves the whole dashboard with it.

Building…
Loading a live grid…

This is the Svelte version. A use action attaches the grid to a plain element, so no framework runtime is passed in and the component stays small, while the configuration is ordinary Svelte state.

The configuration

<script>
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import createLatticeAction from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/svelte.esm.min.js';
  import { createChart } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/charts.esm.min.js';

  const lattice = createLatticeAction({ createGrid });

  let byRegionEl;
  let byStatusEl;
  let scatterEl;

  const config = {
    rowKey: 'id',
    columns: [
      { field: 'circuit', title: 'Circuit', layout: { width: 180 } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'status', title: 'Status', filter: { type: 'set' } },
      { field: 'bandwidth', title: 'Bandwidth', type: 'number' },
      { field: 'utilisation', title: 'Utilisation', type: 'number', format: { decimals: 1, suffix: '%' } },
      { field: 'charge', title: 'Monthly charge', type: 'number',
        format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
    ],
    rows,  // an array of circuit records
    // onGrid hands over the live grid the moment it is created. Every chart is
    // built from it, so all three follow the grid's filters and sort together.
    onGrid: (grid) => {
      createChart({ grid, container: byRegionEl, type: 'bar',     x: 'region',    y: 'charge' });
      createChart({ grid, container: byStatusEl, type: 'donut',   x: 'status',    y: 'charge' });
      createChart({ grid, container: scatterEl,  type: 'scatter', x: 'bandwidth', y: 'charge' });
    },
  };
</script>

<svelte:head>
  <link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">
</svelte:head>

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; height: 210px">
  <div bind:this={byRegionEl}></div>
  <div bind:this={byStatusEl}></div>
  <div bind:this={scatterEl}></div>
</div>
<div use:lattice={config} style="height: 340px; margin-top: 14px"></div>

One selection, seen two ways at once

The charts module draws every chart type from a grid’s own data, and the point of this demo is the smallest one: a chart reads the grid’s filtered rows, not a snapshot taken when it was created. Filter the grid from the rail, sort a column, edit a value, and every chart bound to that grid 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.

A chart is one call: createChart({ grid, container, type, x, y }), where x names the category column and y the measure. A measure that needs reducing is written y: { col: 'charge', fn: 'sum' }. The module imports nothing from the grid core - the grid is handed in - so the drawing code loads only on a page that actually charts, and a grid that never charts never pays for it.

The three charts above the grid read the same 2,000 circuits it does: charge summed by region, charge split by status, and every circuit’s charge against how full its pipe runs. Narrow the grid to one region and watch all three follow.

How does a chart stay in step with a filtered grid?

It does not have to be kept in step. createChart binds the chart to the grid, and the chart listens to the grid’s own change events - filter, sort, edit, group - and redraws from the currently visible rows on the next animation frame. You filter or sort the grid as normal; the chart follows without any code wiring the two together. See the step-by-step how to draw a chart that follows the grid’s filters guide for a minimal, runnable example with a quick-filter box and a click-to-filter bar, plus the source on GitHub.

Related demos