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.

Crear gráfico en tiempo real con Plotly.js

Crear grafico en tiempo real

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:   5 Mejores Calendarios (Calendars plug-ins, datepickers)

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:   Conexión a Base de Datos PDO PHP MYSQL

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:   10 reglas para ser el mejor Programador y no el mejor Codificador

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
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)
Comparte