Live-Grafiken mit Dash und Plotly

1. Live-Grafiken mit Dash und Plotly
2. Initialisieren Sie die Anwendung und die Daten

Python ist eine dynamisch typisierte Allzweck-Programmiersprache, die in verschiedenen Bereichen der Informatik wie maschinelles Lernen, Webentwicklung, App-Entwicklung, Spieleentwicklung, Datenwissenschaft usw. verwendet wird. Sie wird von einer gigantischen Community leidenschaftlicher Softwareingenieure und Entwickler unterstützt, die sie aufbauen und Erstellen verschiedener APIs und Bibliotheken.

Eine solche Bibliothek ist Dash. Dash ist ein Framework, das auf Flask, Plotly und ReactJS aufbaut.

Dash wird verwendet, um interaktive Dashboards mit der Programmiersprache Python zu erstellen.

Live-Graphen oder Echtzeit-Graphen sind jene Arten von Graphen, die sich sehr häufig in einem kurzen Zeitintervall ändern. Anwendungen, die solche Diagramme integrieren, können es sich nur leisten, die Seite manchmal zu aktualisieren (neu zu laden); Einige neue Daten werden empfangen, da das wiederholte Laden einer großen Datenmenge zu teuer und zu schwer für den Server und den Client-Computer ist.

Darüber hinaus wird die Anwendung langsam und schwer zu bedienen. Aktiencharts sind das beste Beispiel für solche Grafiken.

In solchen Situationen wird eine Technik, nämlich Hot Loading, verwendet, die die geänderten Daten aktualisiert, ohne den Zustand der Anwendung zu optimieren. Beachten Sie, dass sich Hot Loading vom Live Reload unterscheidet, was bedeutet, dass die gesamte Anwendung aktualisiert (Reload) wird, wenn sich die Daten ändern.

In diesem Artikel erfahren wir anhand eines einfachen Beispiels, wie Sie Live-Grafiken mit Dash erstellen.

Live-Grafiken mit Dash und Plotly

Wir werden das gesamte Verfahren in einfachere Teile aufteilen, um den Entwicklungsprozess und das Verständnis zu erleichtern.

Installieren der Abhängigkeiten

Zuerst müssen wir zwei Abhängigkeiten installieren, nämlich dash und plotly. Verwenden Sie die folgenden pip-Befehle, um sie zu installieren.

Es wird dringend empfohlen, eine virtuelle Umgebung zu erstellen, bevor Sie mit den nächsten Schritten fortfahren.

pip install dash
pip install plotly

Importe

Erstellen Sie nun eine neue Datei, main.py, und fügen Sie alles, worüber wir vorher gesprochen haben, zu dieser Datei hinzu. Es wird nur eine einzige Datei benötigt, um diese einfache Anwendung zu erstellen.

Wir importieren dash, random (zum Generieren von Zufallswerten), plotly, plotly.graph_objs für Graph-Features, dash_core_components für Graphen, dash_html_components für HTML-Komponenten und Input und Output für Rückrufe.

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

Initialisieren Sie die Anwendung und die Daten

Initialisieren Sie eine Dash-Anwendung und zwei Deque-Datenstrukturen, um die x- und y-Koordinaten zu speichern, die im Diagramm dargestellt werden. Siehe dazu den folgenden Python-Code.

app = dash.Dash(__name__)

xData = [1]
yData = [1]

Dashboard-Layout

Um ein Dashboard-Layout zu erstellen, verwenden wir die HTML-Komponenten von 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
        ),
    ]
)

Beachten Sie, dass wir animate auf True gesetzt haben, da wir einen reibungslosen Übergang benötigen, wenn ein neuer Datenpunkt zum Diagramm hinzugefügt wird. Wenn es auf False gesetzt ist, wird die Grafik abrupt aktualisiert, was die Benutzererfahrung beeinträchtigen kann.

Aktualisieren Sie das Live-Diagramm

@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)]),
        ),
    }

Führen Sie den Server aus

Rufen Sie den in der Dash-Anwendung verfügbaren run_server() auf, um den Server auszuführen.

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

Vervollständigen Sie den Quellcode mit der Ausgabe

Es folgt der vollständige Quellcode zusammen mit der Ausgabe. Beachten Sie, dass beim Ausführen des Skripts mit python main.py eine URL als Ausgabe erscheint.

Öffnen Sie diese URL in einem beliebigen Webbrowser, um auf die Anwendung zuzugreifen.

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

Ausgang: