Function plot

Creates a simple horizontal data plot within a DIV.

const p = plot(`#parentDiv`);
p.add(10);
p.clear();

// Plot data using series
p.add(-1, `temp`);
p.add(0.4, `humidty`);
Copy

Options can be specified to customise plot

const p = plot(`#parentDiv`, {
 capacity: 100,     // How many data points to store (default: 10)
 showYAxis: false,  // Toggle whether y axis is shown (default: true)
 lineWidth: 2,      // Width of plot line (default: 2)
 yAxes:  [`temp`],  // Only show these y axes (by default all are shown)
 coalesce: true,    // If true, sub-pixel data points are skipped, improving performance for dense plots at the expense of plot precision
});
Copy

For all capacity values other than 0, a circular array is used to track data. Otherwise an array is used that will grow infinitely.

By default, will attempt to use CSS variable --series[seriesName] for axis colours. --series[name]-axis for titles. Eg --seriesX. For data added without a named series, it will use --series and --series-axis.