Biblioteca de visualización de datos de streaming en tiempo real-SensorChart

Vista prévia

Descripción

SensorChart es una librería JavaScript simple y rápida que representa un gráfico animado para visualizar datos de streaming en tiempo real (p. ej., fps) usando Canvas y < a href = "https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API" target = "_ blank" rel = "noopener" > WebGL (biblioteca de gráficos Web) API.

Funcionamiento

Incluye el necesario < a href = "https://github.com/regl-project/regl" target = "_ blank" rel = "noopener" > regl y < a href = "https://github.com/a-vis/regl-line2d" target = "_ blank" rel = "noopener" > regl-Line2D para manejar WebGL 2D Graph.

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

Incluya la biblioteca SensorChart.

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

Cree un elemento canvas en el que desee representar el gráfico. No establezca los atributos height y width, utilice CSS en su lugar.

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

El ejemplo de JavaScript para crear un gráfico.

// 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);

Todas las opciones predeterminadas.

• escala: milisegundos por píxel
• offset: el desfase de tiempo, en milisegundos
• Stack: Stack Multiple series
• background: el color de fondo
• Foreground: el color de la rejilla
• espesor: el espesor de la rejilla
• secciones: el número de secciones verticales en la cuadrícula
• Tick: el marcador de Tick, en milisegundos

{

min: -1,

max: 1,

scale: 20,

offset: -150,

background: '#E8E8E8',

foreground: '#808080',

thickness: 1,

sections: 2,

tick: 1000
};