Real-time Streaming Data Visualization Library – SensorChart

Category: Chart & Graph , Javascript | September 12, 2018
Author: mesca
Views Total: 609 views
Official Page: Go to website
Last Update: September 12, 2018
License: MIT

Preview:

Real-time Streaming Data Visualization Library – SensorChart

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
};

You Might Be Interested In:


Leave a Reply