Skip to content

Latest commit

 

History

History
29 lines (21 loc) · 884 Bytes

charts.md

File metadata and controls

29 lines (21 loc) · 884 Bytes

Frontend - Charts

The frontend allows plotting time series. See how to works in a demo.

Usage

Each chart consists of a name, array of timestamp-value pairs and a time window parameters.

  • X axis represents the time, the most recent value is display on the right side. The sliding window ensures that only recent values are plotted.
  • Y axis has a dynamic range and changes according to values.
import {h, chartTimeSeries} from '../../Frontend/js/src/index.js';

h('div.m4', [
  chartTimeSeries({
    series: [{value: 10, timestamp: Date.now()}, ...],
    title: 'Temperature',
    colorPrimary: 'red',
    width: '800', // in pixels
    timeWindow: 100, // in ms
  }),
]),

Performance

  • Keep page drawing time under 15ms (60 FPS)
  • Draw only what will be seen by user, use tabs if needed