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