Saltar al contenido

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

Valora este articulo.

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.

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!

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 

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>
Comparte

Loading...