demo D269

Slope chart: JavaScript Data Grid Demo

Two points per line so the direction of change from one period to the next is the message

type: 'slope', x, series, y

This draws two points per line so the direction of change from one period to the next is the message. It makes rise and fall between two moments obvious across many items, so the slope of each line carries the story.

Building…

Loading a live grid…

The configuration

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

<div id="grid" style="height: 320px"></div>
<div id="chart" style="height: 340px"></div>

<script type="module">
  import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
  import '@toclocoinc/lattice-grid/modules/chart-slope';  // opt in to the slope type

  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    columns: [
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'period', title: 'Year', filter: { type: 'set' } },
      { field: 'score', title: 'Score', type: 'number', total: 'avg' },
    ],
    rows,  // two rows a region, one per year: region, period, score
  });

  // series draws one line per region across the two periods; the slope is the
  // story: up, down or flat.
  createChart({
    grid,
    container: document.getElementById('chart'),
    type: 'slope',
    x: 'period',
    series: 'region',
    y: 'score',
    title: 'Score, year on year',
  });
</script>