demo D163

Line, area, bar and scatter in Web Component

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…

This is the web component version. A lattice-grid custom element renders the grid with no build step, its configuration set as a property, so it works on a page that has no bundler at all.

The configuration

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

<script type="module">
  import { defineLatticeGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/webcomponent.esm.min.js';
  defineLatticeGrid();
</script>

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; height: 210px">
  <div id="line"></div>
  <div id="step"></div>
  <div id="area"></div>
  <div id="rangeArea"></div>
  <div id="bar"></div>
  <div id="horizontalBar"></div>
  <div id="scatter"></div>
  <div id="bubble"></div>
  <div id="combo"></div>
  <div id="pareto"></div>
</div>
<lattice-grid row-key="id" style="display: block; height: 340px; margin-top: 14px"></lattice-grid>

<script type="module">
  import { createChart } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/charts.esm.min.js';

  const el = document.querySelector('lattice-grid');
  el.config = {
    columns: [
      { field: 'circuit', title: 'Circuit', layout: { width: 180 } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'status', title: 'Status', filter: { type: 'set' } },
      { field: 'bandwidth', title: 'Bandwidth', type: 'number' },
      { field: 'charge', title: 'Monthly charge', type: 'number',
        format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
    ],
  };
  el.rows = rows;  // an array of circuit records

  // Every chart reads el.grid, the live grid inside the element, so filtering or
  // sorting the table redraws them all.
  createChart({ grid: el.grid, container: '#line',          type: 'line',          x: 'region', y: 'charge' });
  createChart({ grid: el.grid, container: '#step',          type: 'step',          x: 'region', y: 'charge' });
  createChart({ grid: el.grid, container: '#area',          type: 'area',          x: 'region', y: 'charge' });
  // rangeArea draws the min-to-max band of y at each x.
  createChart({ grid: el.grid, container: '#rangeArea',     type: 'rangeArea',     x: 'region', y: 'charge' });
  createChart({ grid: el.grid, container: '#bar',           type: 'bar',           x: 'region', y: 'charge' });
  createChart({ grid: el.grid, container: '#horizontalBar', type: 'horizontalBar', x: 'region', y: 'charge' });
  createChart({ grid: el.grid, container: '#scatter',       type: 'scatter',       x: 'bandwidth', y: 'charge' });
  createChart({ grid: el.grid, container: '#bubble',        type: 'bubble',        x: 'bandwidth', y: 'charge', size: 'charge' });
  // combo mixes marks and two axes, here bars of charge and a line of bandwidth.
  createChart({ grid: el.grid, container: '#combo',         type: 'combo',         x: 'region',
    measures: [{ col: 'charge', fn: 'sum', type: 'bar', axis: 'left' },
               { col: 'bandwidth', fn: 'mean', type: 'line', axis: 'right' }] });
  // pareto sorts the bars and draws the cumulative line.
  createChart({ grid: el.grid, container: '#pareto',        type: 'pareto',        x: 'status', y: 'charge' });
</script>