C#: OxyPlot-Bibliothek zum Erstellen von Diagrammen

OxyPlot (https://github.com/oxyplot/oxyplot) ist eine plattformübergreifende OpenSource Diagramm-Bibliothek, die unter WPF, WindowsForms, Silverlight, WindowsPhone und Xamarin eingesetzt werden kann. In diesem Artikel möchte ich einen kleinen Überblick über die Funktionen der Bibliothek geben und anhand von kleinen Beispielen zeigen, wie man diese Bibliothek in eigenen Anwendungen einsetzen kann.

Beispiel

Zunächst einmal ein Beispiel. Ich habe die OxyPlot-Bibliothek z.B. innerhalb des Programms YAHW – Yet Antoher Hardware Monitor verwendet. In diesem Programm werden diverse Hardwaresensoren (CPU-Auslastung, Temperaturen, Lüftergeschwindigkeiten, …) mit Hilfe der OpenHardwareMonitor-Bibliothek ausgelesen und visualisiert. Innerhalb des Programms sieht das wie folgt aus:

Beispiel 1

YAHW - Informationen zur CPU (Auslastung, Temperaturen, Taktgeschwindigkeit)

YAHW – Informationen zur CPU (Auslastung, Temperaturen, Taktgeschwindigkeit)

Beispiel 2

YAHW - Lüftersteuerung

YAHW – Lüftersteuerung

Im ersten Beispiel wird die die Auslastung der CPU über einen Zeitraum von 60 Sekunden angezeigt. Im zweiten Beispiel wird ein Diagramm für die Anzeige der aktuellen Lüftergeschwindigkeit verwendet. Dabei wird eine vorher festgelegte Kurve in das Diagramm gezeichnet und der aktuelle Wert (Lüftergeschwindigkeit) als Punkt eingezeichnet (der aktuelle Wert wird dabei jede Sekunde aktualisiert). Mehr Informationen zur Lüftersteuerung sind hier zu finden: YAHW – Yet Another Hardware Monitor Lüftersteuerung

Installation

Die OxyPlot-Bibliothek kann einfach über den NuGet-Paketmanager installiert werden:

OxyPlot_NuGet

Die verfügbaren NuGet-Pakete sind hier zu finden:

http://www.nuget.org/packages?q=oxyplot

Verwendung

Nachdem man die Bibliothek installiert hat kann diese auch direkt verwendet werden.

Erzeugung des ViewModels

Die OxyPlot-Bibliothek unterstützt das MVVM-Pattern und dadurch ist es möglich die Erzeugung und das Aussehen Diagramms aus dem ViewModel heraus zu steuern, z.B. können aus dem ViewModel heraus Achsen hinzugefügt, Legenden/Titel angepasst und natürlich Werte aktualisiert werden. Dafür muss das ViewModel eine Eigenschaft vom Typ PlotModel bereitstellen. Nachfolgend ein Auszug des ViewModels zu Beispiel 1 (CPU-Auslastung):

Diese Eigenschaft muss jetzt noch an ein entsprechendes Diagramm, innerhalb des Views, gebunden werden. Für das Beispiel 1 sieht das wie folgt aus:

In Zeile 7 wird zunächst der Namespace http://oxyplot.org/wpf importiert. In Zeile 22 wird dann der eigentliche PlotView erzeugt und die Model-Eigenschaft an die vorher erstellte Eigenschaft im ViewModel gebunden. Damit haben wir also ein Diagramm erzeugt, welches aktuell noch leer ist bzw. noch nichts anzeigt. Wie schon geschrieben kann das Aussehen des Diagramms innerhalb des ViewModels über die Eigenschaft CPUPlot gesteuert werden.

Diagramm-Setup

Das Aussehen des Diagramms kann jetzt aus dem ViewModel heraus gesteuert werden. Dies erfolgt im Normalfall in einer eigenen Methode und für das Beispiel 1 sieht das wie folgt aus:

In Zeile 9 wird zunächst eine neue Instanz vom Typ PlotModel erzeugt. Über dieses Objekt kann das Aussehen des Diagramms jetzt gezielt gesteuert werden. In Zeile 12 und 23 werden jeweils X- und Y-Achse erzeugt und dem Diagramm hinzugefügt. In Zeile 31 wird eine Instanz vom Typ LineSeries erstellt. Diese Instanz übernimmt die Visualisierung der eigentlichen Daten (für Beispiel 1 ist das die aktuelle CPU-Auslastung). Bevor dieses Objekt nun dem Diagramm in Zeile 45 hinzugefügt wird, wird es vorher mit Initialwerten gefüllt (Zeile 39). Damit wäre das Setup des Diagramms abgeschlossen. Jetzt muss das Diagramm nur noch mit Daten gefüllt und aktualisiert werden.

Diagramm aktualisieren

Für das Beispiel 1 muss das Diagramm jede Sekunde aktualisiert werden. Dafür gibt es innerhalb des ViewModels einen EventHandler, der jede Sekunde getriggert wird. Innerhalb dieses EventHandlers erfolgt dann die Aktualisierung des Diagramms.

In Zeile 7 werden die aktuellen Daten für die Visualisierung geholt. Danach wird der älteste Eintrag gelöscht (Zeile 11) und die aktuelle CPU-Auslastung als Datenpunkt hinzugefügt (Zeile 19). Wichtig ist der Aufruf der Methode InvalidatePlot in Zeile 22, denn nur durch den Aufruf dieser Methode wird das Diagramm auch aktualisiert.

Erstellung eines Diagramms im XAML-Code

Es natürlich auch möglich ein Diagramm direkt im XAML-Code zu erzeugen. Für Beispiel 2 (Lüftersteuerung) wurde diese Möglichkeit verwendet. Das Digramm sieht dabei wie folgt aus:

FanControl_Diagram

Innerhalb des XAML-Codes ist dieses Diagramm wie folgt realisiert:

Wie zu sehen lassen sich mit recht wenig Code (sei es C# oder XAML) echt schöne Diagramme erstellen. Weitere Diagrammtypen kann man sich im Sample-Browser anschauen: http://resources.oxyplot.org/examplebrowser/ oder im Beispielprogramm, welches hier zu finden ist: https://github.com/oxyplot/oxyplot/tree/master/Source/Examples. Jeder der eine Anwendung mit Diagramm-Support realisieren möchte sollte unbedingt mal einen Blick auf diese Bibliothek werfen. Der gesamte Quellcode, der hier vorgestellten Beispiele, ist übrigens in folgendem GitHub-Repository zu finden: https://github.com/steve600/YAHW

Literaturverzeichnis und Weblinks

Abk.Quelle
[1]OxyPlot-Biblithek
Homepage
GitHub-Repository
Sample-Browser
OxyPlot-Documentation
NuGet-Pakete
[2]YAHW - Lüftersteuerung
YAHW – Yet Another Hardware Monitor Lüftersteuerung

leave your comment

Fork me on GitHub