Real-time Streaming Data Visualization Library – SensorChart

Preview:

Description:

SensorChart is a simple, fast JavaScript library that renders an animated chart to visualize real-time streaming data (e.g. fps) using Canvas and WebGL (Web Graphics Library) API.

How to use it:

Include the necessary regl and regl-line2d to handle WebGL 2D graph.

<script src="/path/to/regl.js"></script>
<script src="/path/to/line2d.js"></script>

Include the SensorChart library.

<script src="/path/to/sensorchart.js"></script>

Create a canvas element on which you want to render the chart. Do not set the height and width attributes, use CSS instead.

<canvas id="chart"></canvas>

The example JavaScript to create a chart.

// Play with this!
let channels = 7;   // Number of lines
let rate = 20;      // Number of samples per second
let scale = 5;      // Milliseconds per pixel
let min = -1;       // Minimum y value
let max = 1;        // Maximum y value
let stack = true;   // Stack timeseries on top of each other
// Rainbows!
let colors = ['#9400D3', '#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082'];
// This will hold our time-series objects.
let series = [];
// Display the FPS.
function display(fps) {
    document.getElementById('fps').textContent = Math.round(fps);
}
// Append new sample.
function append() {
    let now = Date.now();
    for (let i = 0; i < channels; i++) {
        let value = Math.random() * (max - min) + min;
        // The append method takes a timestamp and a value.
        series[i].append(now, value);
    }
}
// Create a new chart, passing the HTML canvas element and some options.
// See the API documentation for the full list of supported options.
let chart = new Chart(document.getElementById('chart'), {scale: scale, stack: stack});
for (i = 0; i < channels; i++) {
    // Cosmetics.
    color = colors[(i + 1) % colors.length];
    // Create a new time-series object.
    // See the API documentation for the full list of supported options.
    series.push(new Series({min: min, max: max, color: color, thickness: 2}))
    // Attach the new time-series to the chart.
    // You can attach as many time-series as you want.
    chart.addSeries(series[i]);
}
// Create a new scheduler.
// It takes an optional callback that will receive the FPS at each frame.
let scheduler = new Scheduler(display);
// Attach the chart to the scheduler.
// You can attach as many charts as you want.
scheduler.addChart(chart);
// Start the scheduler.
// You can stop it with scheduler.stop().
scheduler.start();
// Generate random data.
// In real life, you would probably receive data from a websocket.
setInterval(append, 1000 / rate);

All default options.

• scale: milliseconds per pixel
• offset: the time offset, in milliseconds
• stack: stack multiple series
• background: the background color
• foreground: the grid color
• thickness: the grid thickness
• sections: the number of vertical sections in the grid
• tick: the tick marker, in milliseconds

{
  min: -1,
  max: 1,
  scale: 20,
  offset: -150,
  background: '#E8E8E8',
  foreground: '#808080',
  thickness: 1,
  sections: 2,
  tick: 1000
};