SVG Plot als interaktives HTML Exportieren/Speichern

[GunterB]

Hallo zusammen,

kann ich ein SVG Diagramm als HTML exportieren, so, dass ich es jemandem z.B. per Email schicken könnte?
Wichtig wäre mir hierbei, dass sich die Werte im Nachhinein nachvollziehen lassen.

Wenn ich "nur" ein PNG verschicke, gehen die Achsenzuordnungen verloren, Zeitpunkte und Werte müssen geschätzt werden.
Bei über 20 Linien kommt man schnell auch mit den Farben nicht mehr zurecht.

Wenn ich den Plot als .svg speichere, habe ich zwar eine 80kB Vektordatei, aber keine Werte und Zeitpunkte.

Ich kann die Website mit dem Plot als .html speichern, die Datei(en) sind aber wesentlich größer als die reine .svg Datei. Die HTML hat darüber hinaus die volle Funktionalität (Display plot values, Hide lines, etc.. ), nur, dass die FHEM Menüs, Befehlszeile, ect. auch noch mit dabei sind, was ich gerne vermeiden würde.
Wünschenswert wäre noch, eine Tabelle mit statistischen Werten zu integrieren...

Ich habe mir schon Grafana installiert, dort scheint es mir aber auch nicht möglich zu sein.

Kennt jemand einen Weg wie ich jemanden ein Diagramm mit allen darin befindlichen Werten schicken kann?

Vielen Dank schon mal 

[flummy1978]

Holla,

aus dem Stehgreif heraus würde mir am einfachsten ein Screenshot einfallen? Hierzu kann man alles (un)wichtige ein(aus)blenden und dann einen entsprechenden Screenshot verschicken. Zustätzlicher Vorteil ist dass man dann die Größe auch noch mal ergänzend regeln kann 

VG
Andreas

[GunterB]

Hallo,
da wäre ein SVG aber besser, das lässt sich, da eine Vectorgrafik, unendlich "zoomen".

Ich möchte aber, dass jemand aus dem Diagramm auslesen kann, welcher Wert um z.B. 8:15 am Sensor 15 angestanden hat.

[Damian]

Im SVG-Plot sind die originalen Werte nicht mehr drin, diese werden entsprechend in Koordinatenpunkte umgerechnet. Man kann zwar beliebig skalieren, den ursprünglichen Wert kann man nur ungefähr bestimmten.

[GunterB]

Genau, und deswegen speichere ich die Website als HTML.
Dort ist alles drin, nur dass ich mit nem Webeditor das Menü etc. löschen muss.

Gibt es eine Seite, die nur den Plot anzeigt, ohne den "Rest" wie z.B. "show SVG_Plot_Dummy1".
Da wäre zumindest mal der Ploteditor weg.

[betateilchen]

Schonmal versucht, den plot in ein InfoPanel einzubauen?
Das kannst Du ja so machen, dass der plot das einzige Element ist.
Die resultierende Webseite enthält dann nichts weiter als den vollständigen plot.

[GunterB]

Hallo betateilchen,

danke für den Tipp!
Ich habe gerade das InfoPanel getestet.

Code Auswählen Erweitern

defmod myInfoPanel InfoPanel ./FHEM/panel.layout
attr myInfoPanel DbLogExclude .*
attr myInfoPanel size 1400x800

Code (panel.layout) Auswählen Erweitern

plot <1> <1> <1> <0.5> <1> <{SVG_Heizung_Regelung}>

Code Auswählen Erweitern

http://10.49.xxx.yyy:8083/fhem/btip/myInfoPanel.html

Das Diagramm wird als SVG eingebunden:

Code Auswählen Erweitern

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1400px" height="800px"
viewPort="0 0 1400 800"
style="stroke-width: 0px; background-color:000000; " >

<!-- /fhem/SVG_showLog?dev=SVG_Heizung_Regelung&amp;logdev=logdb&amp;gplotfile=SVG_Heizung_Regelung&amp;logfile=HISTORY&amp;plotsize=1400,800&amp;pos= -->
<image id="<1>" x="0" y="0" width="1400px" height="800px"
xlink:href="/fhem/SVG_showLog?dev=SVG_Heizung_Regelung&amp;logdev=logdb&amp;gplotfile=SVG_Heizung_Regelung&amp;logfile=HISTORY&amp;plotsize=1400,800&amp;pos=" />

Sorry, your browser does not support inline SVG.
</svg>

Das ist schon mal garnicht schlecht.
Aber leider kann ich keine Plots ausblenden, und die Werte im Quelltext scheinen auch nur Koordinaten ohne Zeitstempel zu sein:

Code Auswählen Erweitern

<path id="line_21" decimals="1" style='mask:url(#mask_SVG_Heizung_Regelung); stroke-width:1' x_min="96" x_off="1674169200" t_mul="0.0139816433060568" y_h="780.8" y_min="-5" y_mul="25.3866666666667" title="Außen TP" scale="" onclick="parent.svg_click(evt)" class="SVGplot l0" d="M 98,671 L 102,674 107,676 111,679 115,..."/>
<path id="line_20" decimals="1" style='mask:url(#mask_SVG_Heizung_Regelung); stroke-width:1' x_min="96" x_off="1674169200" t_mul="0.0139816433060568" y_h="780.8" y_min="-5" y_mul="25.3866666666667" title="Außen GED" scale="" onclick="parent.svg_click(evt)" class="SVGplot l0" d="M 98,661 L 102,664 106,664 110,664 ..."/>