Saltar al contenido

Crear gr√°fico en tiempo real con Plotly.js

En este tutorial, te mostrar√© c√≥mo crear un gr√°fico de l√≠neas en tiempo real con JavaScript usando Plotly.js. Plotly.js es una biblioteca de gr√°ficos que se construy√≥ sobre d3.js y stack.gl. Muy √ļtil para mostrar varios tipos de gr√°ficos con un gran rendimiento y tambi√©n admite gr√°ficos 3D utilizando WebGL.

Preparar

Si no est√° usando npm, descargue la √ļltima versi√≥n de github e incl√ļyala a su p√°gina usando la etiqueta de script. Aseg√ļrate de usar la versi√≥n minificada ya que el tama√Īo del archivo Plotly.js es bastante grande (6MB completos vs 2MB minificados)

<script src="plotly.min.js"></script>

Crea un elemento div para el gr√°fico.

<div id="chart"></div>

Ahora tendremos que recuperar el punto de datos para transmitir el gr√°fico en tiempo real. Esto puede ser en forma de una llamada AJAX al punto final de la API REST, un proveedor de datos de terceros o el resultado del c√°lculo en su propio sitio web. De todos modos, por simplicidad, usaremos un valor aleatorio para este tutorial.

function getData() {
return Math.random();
}

A continuación, crearemos un gráfico de líneas utilizando Plotly.plot, pasaremos el ID del elemento como primer parámetro y seguiremos el objeto de definición del gráfico. En el interior, voy a pasar una matriz y llamar a la función getData para recuperar el primer punto de datos de nuestro gráfico. También establezca el tipo de gráfico en línea.

 Plotly.plot('chart',[{
y:[getData()],
type:'line'
}]);

Si ejecuta el código ahora, tendrá un gráfico con nuestro primer punto de datos.

Te puede interesar:   Tutorial de SheetJS - Crear archivo excel con Javascript

Actualizar autom√°ticamente el gr√°fico

A continuación, agregaremos el código para recuperar automáticamente el siguiente punto de datos y actualizar el cuadro.

Voy a usar setInterval por cada 200 milisegundos. Esta será la frecuencia de actualización de su carta y puede cambiar el intervalo de tiempo que desee.

setInterval(function() {
// code for chart update logic here
}, 200);

Ahora adentro, llamaremos a Plotly. extenderTraces. Esta es la funci√≥n b√°sica para extender el gr√°fico actual con un nuevo conjunto de puntos de datos. Pasaremos el ID del elemento del gr√°fico, seguido por el objeto de datos. Notar√° que uso una matriz 2D porque Plotly admite m√ļltiples trazas en un solo gr√°fico. Por lo tanto, puede proporcionar una matriz de datos m√ļltiple para cada rastreo con una sola llamada de esta funci√≥n. Y el par√°metro final es la matriz de √≠ndice de trazas de gr√°ficos que desea ampliar con los datos proporcionados. Como solo tenemos una traza, usaremos cero.

setInterval(function() {
Plotly.extendTraces('graph', { y: [[getData()]] }, [0])
}, 200);

Así que vamos a ver cómo funciona!

Te puede interesar:   Dise√Īo de Tarjeta de Estilo RPG con efecto de Desplazamiento HTML y CSS

Rango de gr√°fico din√°mico ¬ędeslizante¬Ľ

Ahora, si desea que el gráfico se deslice junto con los nuevos datos, podemos usar la función de retransmisión para actualizar el rango del eje x.

Primero cree un contador y aum√©ntelo cada vez que se agregue el nuevo punto de datos. Digamos que si desea mostrar 500 puntos de datos antes de comenzar a ¬ędeslizar¬Ľ el gr√°fico.

var cnt = 0;
setInterval(function(){
Plotly.extendTraces('chart',{ y:[[getData()]]}, [0]);
cnt++;
if(cnt > 500) {
// code for chart 'sliding' here
}
},15);

Pasaremos nuestra identificación del elemento del gráfico como de costumbre. Y a continuación, vamos a redefinir el rango del eje x. estableceremos el valor de inicio en el conteo actual menos por 500, y usaremos el conteo actual como rango final.

if(cnt > 500) {
Plotly.relayout('chart',{
xaxis: {
range: [cnt-500,cnt]
}
});
}

Entonces, eso es todo para este tutorial. Por favor encuentre el código fuente completo a continuación. También síganos en nuestro canal de Facebook

Te puede interesar:   ūüďĖ El gran Libro de HTML5, CSS3 y Javascript

Quieres ver los resultados pues aquí te dejamos un vídeo.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="plotly.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="navbar"><span>Real-Time Chart with Plotly.js</span></div>
<div class="wrapper">
<div id="chart"></div>
<script>
function getData() {
return Math.random();
}  
Plotly.plot('chart',[{
y:[getData()],
type:'line'
}]);
var cnt = 0;
setInterval(function(){
Plotly.extendTraces('chart',{ y:[[getData()]]}, [0]);
cnt++;
if(cnt > 500) {
Plotly.relayout('chart',{
xaxis: {
range: [cnt-500,cnt]
}
});
}
},15);
</script>
</div>
</body>
</html>

Continua aprendiendo con nosotros:

navigator.useragent.match
Wampserver o Xampp
Sistema de facturación php MySQL código fuente
Tabla HTML a Excel
Qué es JavaScript vanilla
0/5 (0 Reviews)
Comparte