demo D201

Is this column normal?: JavaScript Data Grid Demo

A Q-Q plot against a line through the quartiles

type: 'qq', y

This draws a Q-Q plot of a column against a line through its quartiles, to judge whether it is normally distributed. It answers 'is this column normal' visually, so you can see how far the data departs from the assumption before relying on it.

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: 340px"></div>

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

  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    columns: [
      { field: 'symbol', title: 'Symbol' },
      { field: 'desk', title: 'Desk', filter: { type: 'set' } },
      { field: 'price', title: 'Price', type: 'number', format: { decimals: 4 } },
      { field: 'bid', title: 'Bid', type: 'number', format: { decimals: 4 } },
      { field: 'ask', title: 'Ask', type: 'number', format: { decimals: 4 } },
      { field: 'volume', title: 'Volume', type: 'number', format: { notation: 'compact' } },
      { field: 'notional', title: 'Notional', type: 'number',
        format: { style: 'currency', currency: 'USD' }, total: 'sum' },
    ],
    rows,  // instruments: symbol, desk, price, bid, ask, volume, notional
  });

  // A chart reads the grid's filtered rows and redraws when the grid changes.
  // A Q-Q plot reads y alone: points on the line are normally distributed.
  createChart({
    grid,
    container: document.getElementById('chart'),
    type: 'qq',
    y: 'price',
    title: 'Q-Q plot of price',
  });
</script>