Gráficos en vivo usando Dash y Plotly

1. Gráficos en vivo usando Dash y Plotly
2. Inicialice la aplicación y los datos

Python es un lenguaje de programación de propósito general tipado dinámicamente que se utiliza en varios dominios de la informática, como el aprendizaje automático, el desarrollo web, el desarrollo de aplicaciones, el desarrollo de juegos, la ciencia de datos, etc. Está respaldado por una comunidad gigantesca de ingenieros y desarrolladores de software apasionados que lo construyen. y la creación de varias API y bibliotecas.

Una de esas bibliotecas es Dash. Dash es un marco construido sobre Flask, Plotly y ReactJS.

Dash se utiliza para crear paneles interactivos con el lenguaje de programación Python.

Los gráficos en vivo o gráficos en tiempo real son ese tipo de gráficos que cambian con mucha frecuencia en un corto intervalo de tiempo. Las aplicaciones que integran dichos gráficos solo pueden permitirse actualizar (recargar) la página a veces; se reciben algunos datos nuevos porque la carga repetida de una gran cantidad de datos es demasiado costosa y pesada para el servidor y la máquina cliente.

Además, hará que la aplicación sea lenta y difícil de operar. Los gráficos de acciones son el mejor ejemplo de dichos gráficos.

Durante tales situaciones, se utiliza una técnica, a saber, carga en caliente, que actualiza los datos modificados sin modificar el estado de la aplicación. Tenga en cuenta que la carga en caliente difiere de la recarga en vivo, lo que significa actualizar toda la aplicación (recargar) cuando cambian los datos.

En este artículo, aprenderemos cómo crear gráficos en vivo usando Dash con la ayuda de un ejemplo simple.

Gráficos en vivo usando Dash y Plotly

Dividiremos todo el procedimiento en partes más simples para facilitar el proceso de desarrollo y la comprensión.

Instalando las Dependencias

Primero, necesitamos instalar dos dependencias, a saber, dash y plotly. Utilice los siguientes comandos pip para instalarlos.

Se recomienda encarecidamente crear un entorno virtual antes de continuar con los pasos siguientes.

pip install dash
pip install plotly

Importaciones

Ahora, crea un nuevo archivo, main.py, y agrega todo lo que hablamos antes a ese archivo. Solo se requerirá un único archivo para crear esta sencilla aplicación.

Importaremos guión, aleatorio (para generar valores aleatorios), plotly, plotly.graph_objs para características gráficas, dash_core_components para gráficos, dash_html_components para componentes HTML y Input y Output para devoluciones de llamada.

import dash
import random
import plotly
import plotly.graph_objs as go  # graph features
import dash_core_components as dcc  # graphs
import dash_html_components as html  # html components
from dash.dependencies import Output, Input  # callbacks

Inicialice la aplicación y los datos

Inicialice una aplicación Dash y dos estructuras de datos deque para almacenar las coordenadas x e y que se trazarán en el gráfico. Consulte el siguiente código de Python para lo mismo.

app = dash.Dash(__name__)

xData = [1]
yData = [1]

Diseño del tablero

Para crear un diseño de tablero, usaremos los componentes HTML de Dash.

app.layout = html.Div(
    [
        dcc.Graph(
            id="live-graph", animate=True  # enable smooth transition upon updation
        ),
        dcc.Interval(
            id="live-graph-interval",
            interval=1000,  # time, in ms, elapsed between two consecutive values
            n_intervals=0,  # number of intervals completed from the start of the server
        ),
    ]
)

Tenga en cuenta que hemos establecido animar en True porque necesitamos una transición suave cuando se agrega algún punto de datos nuevo al gráfico. Si se establece en False, el gráfico se actualizará abruptamente, lo que puede dificultar la experiencia del usuario.

Actualizar el gráfico en vivo

@app.callback(
    Output("live-graph", "figure"), [Input("live-graph-interval", "n_intervals")]
)
def updateGraph(n):
    xx = xData[-1] + 1
    yy = yData[-1] + (yData[-1] * random.uniform(-0.5, 0.5))

    if yy == 0:
        yy = 1

    xData.append(xx)
    yData.append(yy)

    data = plotly.graph_objs.Scatter(
        x=list(xData), y=list(yData), name="Scatter", mode="lines+markers"
    )

    return {
        "data": [data],
        "layout": go.Layout(
            xaxis=dict(range=[min(xData), max(xData)]),
            yaxis=dict(range=[min(yData), max(yData)]),
        ),
    }

Ejecutar el servidor

Realice una llamada al run_server() disponible en la aplicación Dash para ejecutar el servidor.

if __name__ == "__main__":
    app.run_server()

Código fuente completo con la salida

A continuación se muestra el código fuente completo, junto con la salida. Tenga en cuenta que aparecerá una URL como salida al ejecutar el script usando python main.py.

Abra esa URL en cualquier navegador web para acceder a la aplicación.

import dash
import random
import plotly
import plotly.graph_objs as go  # graph features
import dash_core_components as dcc  # graphs
import dash_html_components as html  # html components
from dash.dependencies import Output, Input  # callbacks

app = dash.Dash(__name__)

xData = [1]
yData = [1]

app.layout = html.Div(
    [
        dcc.Graph(
            id="live-graph", animate=True  # enable smooth transition upon updation
        ),
        dcc.Interval(
            id="live-graph-interval",
            interval=1000,  # time, in ms, elapsed between two consecutive values
            n_intervals=0,  # number of intervals completed from the start of the server
        ),
    ]
)


@app.callback(
    Output("live-graph", "figure"), [Input("live-graph-interval", "n_intervals")]
)
def updateGraph(n):
    xx = xData[-1] + 1
    yy = yData[-1] + (yData[-1] * random.uniform(-0.5, 0.5))

    if yy == 0:
        yy = 1

    xData.append(xx)
    yData.append(yy)

    data = plotly.graph_objs.Scatter(
        x=list(xData), y=list(yData), name="Scatter", mode="lines+markers"
    )

    return {
        "data": [data],
        "layout": go.Layout(
            xaxis=dict(range=[min(xData), max(xData)]),
            yaxis=dict(range=[min(yData), max(yData)]),
        ),
    }


if __name__ == "__main__":
    app.run_server()

Producción: