Highstock Chart für "Charts in Schick" :)

[Chris46]

Ich wollte mit den folgenden Chartoptionen je eine statische Gerade bei 37.9 und 26.5 in den Chart zeichnen. Die Linien sind im Standardgrau vorhanden, es funktioniert also prinzipiell. Leider werden die Optionen color, dashStyle, width und lable nicht übernommen.

Hat jemand eine Idee?

{ yAxis:  [{plotLines: [{value: 37.9, color: '#228220', dashStyle: 'shortdash', width: 2, label: { text: '100%' }}, {value: 26.5, color: '#ff4141', dashStyle: 'shortdash', width: 2, label: { text: '70%'}}]}]}

[smai]

Die smartVISU verwendet Highcharts im so genannten styled mode.
In diesem erfolgt das Styling nicht per JavaScript sondenr per CSS.

Um deine erste Linie zu gestalten, kannst du folgendes machen:

{ yAxis:  [{plotLines: [{value: 37.9, className: 'plotline1', label: { className: 'plotline1-label', text: '100%'}}]}]}

<style type="text/css">
  .plotline1 {
    stroke: #228220;
    stroke-width: 2px;
    stroke-dasharray: 5,5;
  }
  .plotline1-label {
    fill: #228220;
  }
</style>

Das CSS darf zwar direkt so auf die Seite, die Klassen müssen dann aber einen eindeutigen Namen über alle Seiten haben.
Besser wäre es, dieses in deinen Pages in die visu.css zu schreiben. Dann kannst du diese auch in mehreren Plots bzw. auf mehreren Seiten verwenden.

[KaiAlfonso]

Hi,

ich habe auch mal eine Frage zu Highcharts. Ich habe einen Graphen mit Monatswerten vom Stromverbrauch. Erfasst werden die Werte am Ende des Monats. In dem Graphen sind die Bars dann aber verschoben. Wie kann ich die Balken denn auf den Monat mappen? Es gibt immer nur einen Wert je Monat.Ich hoffe, es ist verständlich, was ich meine?

Der letzte rechte Balken ist vom 30.9 und sollte eigentlich fest auf dem September gemappt sein.

nas_smartvisu_index.php_page=energy(iPhone X).png

[KaiAlfonso]

So, ich habe wohl selber den Fehler gemacht. Mode war als Raw angegeben. Wenn ich das rausnehme, dann geht es

[Chris46]

Die smartVISU verwendet Highcharts im so genannten styled mode.
In diesem erfolgt das Styling nicht per JavaScript sondenr per CSS.

Um deine erste Linie zu gestalten, kannst du folgendes machen:

{ yAxis: [{plotLines: [{value: 37.9, className: 'plotline1', label: { className: 'plotline1-label', text: '100%'}}]}]}

<style type="text/css">
.plotline1 {
stroke: #228220;
stroke-width: 2px;
stroke-dasharray: 5,5;
}
.plotline1-label {
fill: #228220;
}
</style>

Das CSS darf zwar direkt so auf die Seite, die Klassen müssen dann aber einen eindeutigen Namen über alle Seiten haben.
Besser wäre es, dieses in deinen Pages in die visu.css zu schreiben. Dann kannst du diese auch in mehreren Plots bzw. auf mehreren Seiten verwenden.

Ach styled Mode war das Zauberwort

Vielen Dank, damit hat funktioniert, das fehlende Komma habe ich dabei auch bemerkt, du hast es ja aber auch schon korrigiert.

Die Chartoptions sehen jetzt so aus:

{ yAxis:  [{plotLines: [{value: 37.9, className: 'plotline1', label: { className: 'plotline1-label', text: '100%'}}, {value: 26.5, className: 'plotline2', label: { className: 'plotline2-label', text: '70%'}}]}], plotOptions: {line: { dataLabels: { enabled: true }}}}

In der visu.css habe ich folgendes eingetragen:

plotline1 {
    stroke: #228220;
    stroke-width: 2px;
    stroke-dasharray: 5,5;
  }
  .plotline1-label {
    fill: #228220;
    
  }
  .plotline2 {
    stroke: #ff4141;
    stroke-width: 2px;
    stroke-dasharray: 5,5;
  }
  .plotline2-label {
    fill: #ff4141;
    
  }

Das Ergebnis sieht dann bspw. so aus:
Ergebnis.PNG

[Chris46]

Gibt es denn eine Möglichkeit mit den von-bis Feldern einen erneute Abfrage zu starten und einen anderen Zeitraum zu laden? Eigentlich ist dieser ja fest vorgegeben. Klar man könnte bei wenigen Daten (wie beim Post zuvor) das ganze Jahr angeben und dann den Zeitraum ändern, das klappt aber nur mit Diagrammen mit wenigen Daten, bei großen Datenmengen würde dies auch einfach viel zu lange dauern.

[smai]

Gibt es denn eine Möglichkeit mit den von-bis Feldern einen erneute Abfrage zu starten und einen anderen Zeitraum zu laden?

Nein, diese gibt es zur Zeit nicht.
Darüber wurde auch schon diskutiert, es wäre aber erst eine Änderung im visu_websocket Plugin in SmartHomeNG notwendig.
Dort ist es nämlich nicht möglich, eine einmal abonnierte Datenserie wieder abzumelden. Bei jeder Änderung des Zeitraums würden deshalb weiterhin auch regelmässig die Daten der nicht mehr angezeigten Serien übertragen. Dies würde sicher schnell zur Überlastung führen.