Diagramme im Protokoll und der Kalibrierumgebung

Einführung

Analog zum alten Kalibriscript können auch in Kalibriware Diagramme aus Messreihen erzeugt werden. Die Diagrammfunktion basiert auf der MeasurementSeries Klasse (unsichtbare Tabelle im Protokoll), welche dann nachfolgend in eine DisplayTable (sichtbare Tabelle im Protokoll) oder eine Grafik dargestellt werden kann.

Wir benutzen echarts als Diagrammbibliothek, sodass alle möglichen Diagrammtypen unterstützt werden.

Diagramm im Protokoll

Zuerst benötigen wir eine MeasurementSeries um die darunterliegenden Daten abzuspeichern:

const table = this.steps.createSeries(SeriesTemplates.XSTIAQ(Fields.Empty, Tolerance.Absolute(0.20)));
this.proto.addMeasurementSeries(table);

Danach können wir ein Diagramm erstellen:

const chart = new LineChart('Diagrammtitel', {
    axisX: {
        type: 'lin',
        title: "X-Wert",
        min: 0,
        max: 42,
        unit: 'Volt'
    },
    axisY: {
        type: 'lin',
        title: 'Y-Wert',
        min: -10,
        max: 10,
        unit: 'dBm'
    }
});

Das obere Beispiel erstellt ein Linien-Diagramm, mit einer X-Achse und einer Y-Achse, beide linear. Alternativ kann auch ein BarChart (Balkendiagramm) oder PieChart (Kreisdiagramm) erstellt werden. Nachdem das Chart erzeugt wurde, kann die Verlinkung zur vorher definierten Messreihe hergestellt werden:

// durch die Benutzung von addSeries() kennt das Chart automatisch die Spaltendefinitionen für xValues, yValues und tolerances
// dadurch werden Benutzerfehler minimiert.
chart.addSeries(table, {
mapping: {
    xValues: 'x',
    yValues: 'i',
    tolerances: 't',
},
showLine: true, // showLine = Linie Anzeigen ja/nein
showPoints: true // showPoints = Punkte Anzeigen ja/nein
});

Schlussendlich kann das Diagramm zum Protokoll hinzugefügt werden:

this.proto.addDisplayChart(chart);

Damit haben wir dann ein Liniendiagramm im Protokoll.

Live-Diagramm im UI

Um ein Live-Chart anzuzeigen, wird analog zum Diagramm-Chart ebenfalls ein DisplayChart angelegt, also müssen wir alle Schritte von oben wiederholen, bis auf das Hinzufügen zum Protokoll:

// Schritt 1: Tabelle erstellen
const table = this.steps.createSeries(SeriesTemplates.XSTIAQ(Fields.Empty, Tolerance.Absolute(0.20)));
this.proto.addMeasurementSeries(table);

// Schritt 2: Chart erstellen
const chart = new LineChart('Diagrammtitel', {
    axisX: {
        type: 'lin',
        title: "X-Wert",
        min: 0,
        max: 42,
        unit: 'Volt'
    },
    axisY: {
        type: 'lin',
        title: 'Y-Wert',
        min: -10,
        max: 10,
        unit: 'dBm'
    }
});

// Schritt 3: Diagramm und Tabelle verlinken:
chart.addSeries(table, {
    mapping: {
        xValues: 'x',
        yValues: 'i',
        tolerances: 't',
    },
    showLine: true, // showLine = Linie Anzeigen ja/nein
    showPoints: true // showPoints = Punkte Anzeigen ja/nein
});

Abweichend zum protokoll wird nun statt this.proto mit der Funktion createLiveChart aus StepsService gearbeitet:

const lc = this.steps.createLiveChart(chart);

Diese Funktion sendet alle Daten aus allen verlinkten MeasurementSeries automatisch zum UI und wird dort ein Diagramm entsprechend der Konfiguration anzeigen.

Um das Diagramm z.B. nach Abschluss eines Messschritts wieder auszublenden muss dann folgendes ausgeführt werden:

lc.stop();

Hinweis: Bei Nutzung der Live-Diagramme sollte erst die Tabelle, dann das Diagramm und dann das LiveChart angelegt werden und erst danach sollten Messwerte über MeasurementSeries.addRows() oder MeasurementSeries.generateRows() aufgenommen werden - ansonsten wird das Live-Diagramm erst nach Abschluss der Messung mit Daten befüllt.