demo D178
Charts with no grid on screen in htmx
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.
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.108.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.108.0/modules/htmx.esm.min.js';
import { createChart } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/modules/charts.esm.min.js';
// No visible table: createHeadlessGrid is the data engine on its own, and the
// charts read from it exactly as they would from a grid on the page.
const grid = createHeadlessGrid({
rowKey: 'id',
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' },
],
rows, // an array of circuit records
});
createChart({ grid, container: '#by-region', type: 'bar', x: 'region', y: 'charge' });
createChart({ grid, container: '#by-status', type: 'donut', x: 'status', y: 'charge' });
createChart({ grid, container: '#distribution', type: 'histogram', y: 'charge' });
</script>