demo D163

Line, area, bar and scatter in htmx

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 htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.

The configuration

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

<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>
<!-- A real, server-rendered table: readable with JavaScript off. data-field on
     each header names the column that cell becomes, and data-id on each row is
     the key the grid carries it under. -->
<table id="chart-types-cartesian-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="circuit">Circuit</th>
      <th data-field="region">Region</th>
      <th data-field="status">Status</th>
      <th data-field="bandwidth">Bandwidth</th>
      <th data-field="charge">Monthly charge</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="0"><td>DFB-EDI-100000</td><td>Edinburgh</td><td>live</td><td>100</td><td>94.88</td></tr>
    <tr data-id="1"><td>MPL-BIR-100001</td><td>Birmingham</td><td>provisioning</td><td>10000</td><td>4324.6</td></tr>
    <tr data-id="2"><td>DFB-LON-100002</td><td>London</td><td>live</td><td>2000</td><td>1031.02</td></tr>
    <!-- the rest of the rows, rendered by your server -->
  </tbody>
</table>

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

  // The markup carries the rows; a server-rendered table's column types are
  // declared in the config hydrateTable takes. The grid replaces the table
  // where it stood.
  const grid = hydrateTable(document.getElementById('chart-types-cartesian-table'), {
    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' },
    ],
  });

  // Every chart reads the same grid and follows its sort and filters in place.
  createChart({ grid, container: '#line',          type: 'line',          x: 'region', y: 'charge' });
  createChart({ grid, container: '#step',          type: 'step',          x: 'region', y: 'charge' });
  createChart({ grid, container: '#area',          type: 'area',          x: 'region', y: 'charge' });
  // rangeArea draws the min-to-max band of the measure at each x.
  createChart({ grid, container: '#rangeArea',     type: 'rangeArea',     x: 'region', y: 'charge' });
  createChart({ grid, container: '#bar',           type: 'bar',           x: 'region', y: 'charge' });
  createChart({ grid, container: '#horizontalBar', type: 'horizontalBar', x: 'region', y: 'charge' });
  createChart({ grid, container: '#scatter',       type: 'scatter',       x: 'bandwidth', y: 'charge' });
  createChart({ grid, container: '#bubble',        type: 'bubble',        x: 'bandwidth', y: 'charge', size: 'charge' });
  // combo mixes marks over two axes, here bars of charge and a line of bandwidth.
  createChart({ 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, container: '#pareto',        type: 'pareto',        x: 'status', y: 'charge' });
</script>