demo D173

Brushing a time range: JavaScript Data Grid Demo

Drag a range on the chart and the grid narrows to it

brush: true

This lets you drag a range across a time chart and narrows the grid to it. It gives a reader a quick way to focus on a period, selecting the window on the chart and reading the matching rows in 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: 340px"></div>
<div id="chart" style="height: 300px"></div>

<script type="module">
  import { createChart } from '@toclocoinc/lattice-grid/modules/charts';

  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    columns: [
      { field: 'date', title: 'Date', type: 'dateString' },
      { field: 'price', title: 'Price', type: 'number', format: { decimals: 2 } },
      { field: 'volume', title: 'Volume', type: 'number', format: { notation: 'compact' } },
    ],
    rows,  // one row a day: date, price, volume
  });

  // brush: true draws a range selector under the chart. Drag a range and the
  // grid narrows to those days, so one gesture drives both views.
  createChart({
    grid,
    container: document.getElementById('chart'),
    type: 'line',
    x: 'date',
    y: 'price',
    brush: true,
    title: 'Price over time (brush to filter)',
  });
</script>