demo D163

Line, area, bar and scatter: JavaScript Data Grid Demo

The cartesian types, one dataset

type: 'line' · 'step' · 'area' · 'bar' · 'combo' · 'pareto'

This shows the cartesian chart types, line, step, area, bar, combo and pareto, drawn from one dataset. It lets you compare how each shape reads the same numbers, so you can pick the one that tells your story clearest. The line chart also emphasises one series over the rest, by weight rather than only by colour.

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

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

  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    formatting: {
      // A bar/horizontalBar with no series key reads these to colour each
      // mark, and names the rule that fired in the legend.
      charge: [
        { id: 'under', label: 'Under budget', when: { op: 'lt', value: 200_000 }, style: { background: '#1a7f37', color: '#fff' } },
        { id: 'near', label: 'Near budget', when: { op: 'lt', value: 225_000 }, style: { background: '#b26a00', color: '#fff' } },
        { id: 'over', label: 'Over budget', when: { op: 'gte', value: 225_000 }, style: { background: '#c02c38', color: '#fff' } },
      ],
    },
    columns: [
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'status', title: 'Status', filter: { type: 'set' } },
      { field: 'bandwidth', title: 'Bandwidth', type: 'number' },
      { field: 'utilisation', title: 'Utilisation', type: 'number', format: { decimals: 1, suffix: '%' } },
      { field: 'charge', title: 'Monthly charge', type: 'number',
        format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
    ],
    rows,  // circuits: region, status, bandwidth, utilisation, charge
  });

  // The cartesian types read x and y the same way. Swap the type for any of:
  // line, step, area, rangeArea, bar, horizontalBar, scatter, bubble. combo and
  // pareto take measures instead of a single y (see the dual-axis sample).
  createChart({
    grid,
    container: document.getElementById('chart'),
    type: 'bar',
    x: 'region',
    y: 'charge',
    title: 'Monthly charge by region, by budget rule',
  });

  // horizontalBar reads the labels option too: one label per bar, at its end.
  // createChart({ grid, container, type: 'horizontalBar', x: 'region', y: 'charge', labels: true, title: '…' });
</script>