demo D178
Charts with no grid on screen in Web Component
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 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">
<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/modules/webcomponent.esm.min.js';
import { createChart } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/charts.esm.min.js';
// No table and no element on the page: createHeadlessGrid is the data engine on
// its own, and the charts read from it exactly as they would from a grid drawn
// 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>