Author: | mesca |
---|---|
Views Total: | 736 views |
Official Page: | Go to website |
Last Update: | September 12, 2018 |
License: | MIT |
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 };