NAME

Quiq::PlotlyJs::TimeSeries - Erzeuge Zeitreihen-Plot auf Basis von Plotly.js

BASE CLASS

Quiq::Hash

DESCRIPTION

Diese Klasse ist ein Perl-Wrapper für die Erzeugung für Zeitreihen-Plots auf Basis von Plotly.js.

Dokumentation und Beispiele: https://plotly.com/javascript/

EXAMPLE

(Folgendes Diagramm erscheint in HTML - außer auf meta::cpan, da der HTML-Code dort gestrippt wird - es zeigt 720 Messwerte einer Windgeschwindigkeits-Messung)

METHODS

Konstruktor

new() - Instantiiere Objekt

Synopsis

$plt = $class->new(@attVal);

Attributes

axisColor => $color (Default: '#b0b0b0')

Farbe der Achsenlinien.

background => $color

Hintergrundfarbe.

class => $class (Default: 'plotly-timeseries')

CSS-Klasse des div-Containers. Kann zur Definition eines Rahmens, von Außenabständen usw. genutzt werden.

color => $color (Default: 'rgb(255,0,0,1)')

Farbe der Kurve. Alle Schreibweisen, die in CSS erlaubt sind, sind zulässig, also NAME, #XXXXXX oder rgb(NNN,NNN,NNN).

fillColor => $color (Default: 'rgb(230,230,230,01)'

Farbe zwischen Kurve und X-Achse.

gridColor => $color (Default: 'rgb(230,230,230,01)'

Gitter-Farbe.

height (Default: 450 Default von plotly.js)

Höhe des Plot in Pixeln.

marginBottom => $n (Default: 135)

Unterer Rand in Pixeln.

marginLeft => $n

Linker Rand in Pixeln.

marginRight => $n

Rechter Rand in Pixeln.

marginTop => $n (Default: 70)

Oberer Rand in Pixeln.

mode => $mode (Default: 'lines')

Art der Kurvendarstellung: 'lines', 'markers', 'text', 'none'. Die ersteren drei können auch mit '+' verbunden werden.

name => $name (Default: 'plot')

Name des Plot. Der Name wird als CSS-Id für den Div-Container und als Variablenname für die JavaScript-Instanz verwendet.

plotBackground => $color

Hintergrundfarbe des Plot-Bereichs.

plotBox => $bool (Default: 1)

Zeichne eine Box um den Plotbereich. Die Box hat die Farbe der Achsen (siehe axisColor).

shape => 'spline'|'linear'|'hv'|'vh'|'hvh'|'vhv' (Default: 'spline')

Legt die Linienform fest.

title => $str

Titel des Plot. Wird über das Diagramm gesetzt. Typischerweise der Name des gemessenen Parameters.

x => \@x (Default: [])

Referenz auf Array der Zeit-Werte (bevorzugt in JavaScript-Epoch).

xSpikeFormat => $timeFormat ('%Y-%m-%d %H:%M:%S')

Format der Spike-Beschriftung für die X-Koordinate. Siehe: https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format.

xTickFormat => $timeFormat ('%Y-%m-%d %H:%M')

Format der Zeitachsen-Beschriftung. Siehe: https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format.

y => \@y (Default: [])

Referenz auf Array der Y-Werte (Weltkoordinaten).

yMin => $val

Kleinster Wert auf der Y-Achse. Der Default 'undefined' bedeutet, dass der Wert aus den Daten ermittelt wird.

yMax => $val

Größter Wert auf der Y-Achse. Der Default 'undefined' bedeutet, dass der Wert aus den Daten ermittelt wird.

ySide => 'left'|'right' (Default: 'left' Default von plotly.js)
yTitle => $str

Beschriftung an der Y-Achse. Typischerweise die Einheit des gemessenen Parameters.

Returns

Objekt

Description

Instantiiere ein Objekt der Klasse und liefere eine Referenz auf dieses Objekt zurück.

Klassenmethoden

cdnUrl() - Liefere CDN URL

Synopsis

$url = $this->cdnUrl;

Returns

URL (String)

Description

Liefere den CDN URL der neusten Version von Plotly.js.

Objektmethoden

html() - Generiere HTML

Synopsis

$html = $ch->html($h);

Returns

HTML-Code (String)

Description

Liefere den HTML-Code der Plot-Instanz.

js() - Generiere JavaScript

Synopsis

$js = $ch->js;

Returns

JavaScript-Code (String)

Description

Liefere den JavaScript-Code für die Erzeugung Plot-Instanz.

VERSION

1.184

AUTHOR

Frank Seitz, http://fseitz.de/

COPYRIGHT

Copyright (C) 2020 Frank Seitz

LICENSE

This code is free software; you can redistribute it and/or modify it under the same terms as Perl itself.