# Live gauge (Chartist example)

> A half ring that follows the CPU load, updated every 1.2 seconds.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import './style.css';
import { pieChart } from 'chartist';
import { liveDomRenderer, smilAnimations } from 'chartist/live';
import { firstLoad, onLoad } from './load';

// The load, and the rest of the scale as a track, on a half ring: a total
// of 200 leaves the lower half empty.
const series = (load: number) => [load, 100 - load];

const chart = pieChart(
  '#chart',
  { series: series(firstLoad) },
  {
    renderer: liveDomRenderer({ animations: smilAnimations() }),
    donut: true,
    donutWidth: 40,
    startAngle: 270,
    total: 200,
    showLabel: false
  }
);

onLoad(load => chart.update({ data: { series: series(load) } }));
```

`index.html`:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="module" src="/src/main.ts"></script>
  </head>
  <body>
    <div id="chart" class="ct-golden-section"></div>
  </body>
</html>
```

`src/load.ts`:

```ts
// A CPU's load in percent from a seeded generator, so every run shows the
// same load.

let seed = 75386;
const random = () => {
  seed = (seed * 16807) % 2147483647;
  return (seed - 1) / 2147483646;
};

/** The load when the chart starts. */
export const firstLoad = 35;

/** Calls `listener` with the load every 1.2 seconds. */
export function onLoad(listener: (load: number) => void) {
  // Busy, then idle, then busy again: anywhere from 10% to 95%.
  setInterval(() => listener(Math.round(10 + random() * 85)), 1200);
}
```

`src/style.css`:

```css
/* The rest of the scale: a faint track in the text color, light or dark. */
#chart .ct-series-b .ct-slice-donut {
  stroke: currentColor;
  stroke-opacity: 0.12;
}
```