Lattice Grid Buy a licence

demo D170

Charts follow the grid

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

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

Building…
Loading a live grid…

The configuration

import * as ng from '@angular/core';
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template:
    '<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;height:210px">' +
    '  <div #byRegion></div><div #byStatus></div><div #scatter></div>' +
    '</div>' +
    '<lattice-grid [config]="grid" style="display:block;height:340px;margin-top:14px"></lattice-grid>',
})
export class AppComponent implements AfterViewInit {
  @ViewChild('byRegion') byRegion!: ng.ElementRef<HTMLElement>;
  @ViewChild('byStatus') byStatus!: ng.ElementRef<HTMLElement>;
  @ViewChild('scatter') scatter!: ng.ElementRef<HTMLElement>;
  @ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;

  grid = {
    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: 'charge', title: 'Monthly charge', type: 'number',
        format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
    ],
    rows: [/* circuit records */],
  };

  // Three views of one grid, all reading the live instance, so a filter or an
  // edit redraws every chart together.
  ngAfterViewInit() {
    const grid = this.gridRef.grid;
    createChart({ grid, container: this.byRegion.nativeElement, type: 'bar',     x: 'region',    y: 'charge' });
    createChart({ grid, container: this.byStatus.nativeElement, type: 'donut',   x: 'status',    y: 'charge' });
    createChart({ grid, container: this.scatter.nativeElement,  type: 'scatter', x: 'bandwidth', y: 'charge' });
  }
}

bootstrapApplication(AppComponent);

One selection, seen two ways at once

The charts module draws thirty chart types 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 its bandwidth. 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.

Related demos