demo D178

Charts with no grid on screen in Vue

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 Vue 3 version. A createLatticeGrid component takes the configuration through v-bind, and reactive data flows straight into the grid, so it updates the way the rest of your Vue app does.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">
<style>
  #charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; height: 260px; }
</style>
<div id="app"></div>

<script type="module">
  import * as Vue from 'https://esm.sh/vue@3/dist/vue.esm-browser.prod.js';
  import { createHeadlessGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import { createChart } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/charts.esm.min.js';

  Vue.createApp({
    data() {
      return {
        config: {
          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,
        },
      };
    },
    mounted() {
      // No visible table: createHeadlessGrid is the data engine on its own, and
      // every chart draws from it.
      const grid = createHeadlessGrid(this.config);
      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' });
    },
    template: `
      <div id="charts">
        <div id="by-region"></div>
        <div id="by-status"></div>
        <div id="distribution"></div>
      </div>
    `,
  }).mount('#app');
</script>