demo D178

Charts with no grid on screen in ESM

The data engine driving charts on its own

createHeadlessGrid

This drives charts from the data engine alone, with no grid on screen. It shows that the charting and the data model do not need a visible table, so you can chart a dataset headlessly.

Building…

Loading a live grid…

This is the ES module version. The grid is imported straight from a CDN as a module, the same configuration as the vanilla tab without a global script tag, so it drops into any bundler or a bare module script.

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: 260px">
  <div id="by-region"></div>
  <div id="by-status"></div>
  <div id="distribution"></div>
</div>

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

  import { createChart } from '@toclocoinc/lattice-grid/modules/charts';

  const 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' },
  ];

  // createHeadlessGrid holds and shapes the data with no table drawn at all.
  // The charts read it exactly as they read a visible grid, with the same
  // follow behaviour: filter the headless grid and every chart redraws.
  const grid = createHeadlessGrid({ rowKey: 'id', columns, rows });  // circuit records

  createChart({ grid, container: document.getElementById('by-region'), type: 'bar',       x: 'region', y: 'charge', title: 'by region' });
  createChart({ grid, container: document.getElementById('by-status'), type: 'donut',     x: 'status', y: 'charge', title: 'by status' });
  createChart({ grid, container: document.getElementById('distribution'), type: 'histogram', y: 'charge',           title: 'distribution' });
</script>