Lattice Grid Buy a licence

demo D36

Win-loss, gauge, range

The compact chart set for KPI grids

render: 'winloss' | 'gauge' | 'range'

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'lattice-demo',
    },
    columns: [
      { field: 'service', title: 'Service', layout: { pin: 'start', width: 170 } },
      { field: 'team', title: 'Team', filter: { type: 'set' } },
      // Every mark the same height: the question a win/loss strip answers is
      // how often, never how much.
      { id: 'streak-last-14-days', field: 'streak', title: 'Last 14 days', layout: { width: 190 },
        sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'winloss' } },
      { field: 'utilisation', title: 'Utilisation', type: 'number', layout: { width: 140 },
        format: { suffix: '%' }, cell: { render: 'gauge', props: { min: 0, max: 100 } } },
      // Nine readings drawn as a span with the middle marked, against a
      // pinned scale so the widest row is visibly the widest.
      { id: 'spread-latency-spread', field: 'spread', title: 'Latency spread', layout: { width: 220 },
        sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'range', props: { min: 0, max: 1200 } } },
      { field: 'status', title: 'Status', layout: { width: 130 },
        cell: { render: 'pill', props: { variant: {
          map: { healthy: 'success', degraded: 'warning', failing: 'danger' },
          default: 'neutral',
        } } } },
    ],
    rows,  // rendering demo rows
  });
</script>

Win-loss, gauge and range charts for compact KPI columns

Win-loss, gauge and range are three small chart types for a column of key performance figures, where a full chart would take more space than the metric deserves. A win-loss strip shows a run of wins and losses as a row of ticks, a gauge shows a single value against a minimum and maximum as an arc or dial, and a range shows a value’s position between a low and high bound as a bar. A developer reaches for these where a KPI grid needs to show, at a glance, whether a value is on target or trending well, across dozens of rows, without a dedicated chart panel per row. Lattice Grid selects the type with the render option, set to 'winloss', 'gauge' or 'range', so a column of quarterly targets can switch from a range bar to a gauge dial by changing one string on the column definition, with the value, minimum and maximum read from the row data. Each chart draws to a small canvas sized to the cell, and only cells for rows currently on screen are drawn, so a JavaScript data grid with several such columns keeps its scroll performance on a sheet of ten thousand rows. Colour thresholds are set once per column, so a gauge or range column stays consistent across every row without per-cell styling.

What is a gauge chart in a data grid column?

A gauge chart in a grid column draws a single value as an arc or dial against a set minimum and maximum, inside one cell, so a reader can judge at a glance whether a figure such as capacity used or a score achieved sits low, mid or high on its scale. In Lattice Grid, set render: 'gauge' on a column definition and supply the value, min and max from the row data; the grid draws the dial to a small canvas sized to the cell for each visible row.

Related demos