Lattice Grid Buy a licence

demo D181

The statistics panel: JavaScript Data Grid Demo

The column profile as a docked tool panel, following the filters

toolPanel: { panels: ['statistics'] }

This grid docks a statistics panel that profiles the selected column, count, range, mean and median, quartiles and spread, with a histogram, following the filters. It tells you what is actually in a column as you narrow it, without leaving the grid.

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">
<script src="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.js"></script>

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

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    columnDefaults: { filter: true },
    // openPanel shows a panel on load rather than leaving it to a click, so the
    // figures and the histogram are the first thing seen. The panel follows the
    // filters, so narrowing the grid narrows every figure with it.
    toolPanel: { side: 'left', panels: ['columns', 'filters', 'statistics'], openPanel: 'statistics' },
    columns: [
      { field: 'symbol', title: 'Symbol', layout: { pin: 'start', width: 120 } },
      { field: 'desk', title: 'Desk', filter: { type: 'set' } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'price', title: 'Price', type: 'number', format: { decimals: 4 } },
      { field: 'change', title: 'Change', type: 'number', format: { style: 'percent', decimals: 2 } },
      { field: 'volume', title: 'Volume', type: 'number', format: { notation: 'compact' } },
      { field: 'notional', title: 'Notional', type: 'number',
        format: { style: 'currency', currency: 'USD', decimals: 2 }, total: 'sum' },
    ],
    rows,  // trading book: symbol, desk, region, price, change, volume, notional
  });
</script>

The shape of a column, without leaving the grid

Pick a column and the panel tells you what is in it: for a number, the count, the range, the mean and median, the quartiles and spread, and a histogram of the shape; for a text column, the distinct count and the top values, each with its count and its share of the rows. Every figure follows the filters, so narrowing the grid to one desk or one region reshapes the panel to match, and you read the column as it stands rather than as it shipped.

There are two ways in, for the two ways people work. Open the panel from the side dock and click through columns to survey the data. Or go straight to the column you are looking at: its header menu carries a Column statistics item that opens the panel already seeded on that column, so a question about one column is one click from its header rather than a hunt through a dock. Either way lands on the same panel with the same live figures.

How do I see statistics for a single column?

Open the column’s header menu and choose Column statistics: the statistics panel opens already focused on that column. For a numeric column it shows the count, minimum and maximum, mean and median, quartiles, spread and a histogram; for a categorical column it shows the distinct count and the top values with each value’s count and share. The figures are computed over the filtered rows, so they update as you filter. You can also open the panel from the side dock and pick a column there when you want to survey several.

Related demos