demo D168

Waterfall, stream, marimekko: JavaScript Data Grid Demo

Monthly rises and falls, a mix shifting over time, and regions against statuses

type: 'waterfall' · 'stream' · 'marimekko'

A year of circuit charges drawn three ways. The waterfall shows each month's rise or fall in total charge and where they add up to. The stream graph shows the mix of live, provisioning and ceased circuits shifting through the year. The marimekko gives each region a column as wide as its charge, split by status.

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="waterfall" style="height: 260px"></div>
<div id="stream" style="height: 260px"></div>
<div id="marimekko" style="height: 300px"></div>
<div id="grid" 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: 'month', title: 'Month' },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'status', title: 'Status', filter: { type: 'set' } },
      { field: 'charge', title: 'Monthly charge', type: 'number',
        format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
      { field: 'change', title: 'Change on last month', type: 'number' },
    ],
    rows,  // circuit lines: month, region, status, charge, change
  });

  // Each chart reads the grid's filtered rows, so filtering the grid redraws all three.
  // A waterfall adds up each month's change and ends on a closing total bar.
  createChart({ grid, container: document.getElementById('waterfall'), type: 'waterfall', x: 'month', y: 'change', waterfall: { total: true } });
  // A stream shows how the split by status shifts from month to month.
  createChart({ grid, container: document.getElementById('stream'), type: 'stream', x: 'month', series: 'status', y: 'charge' });
  // A marimekko makes each region's column as wide as its total, split by status.
  createChart({ grid, container: document.getElementById('marimekko'), type: 'marimekko', x: 'region', series: 'status', y: 'charge' });
</script>