Ankündigung

Einklappen
Keine Ankündigung bisher.

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

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • smai
    antwortet
    Zitat von Chris46 Beitrag anzeigen
    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.

    Einen Kommentar schreiben:


  • Chris46
    antwortet
    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.

    Einen Kommentar schreiben:


  • Chris46
    antwortet
    Zitat von smai Beitrag anzeigen
    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:

    Code:
    { yAxis: [{plotLines: [{value: 37.9, className: 'plotline1', label: { className: 'plotline1-label', text: '100%'}}]}]}
    HTML-Code:
    <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:
    Code:
    { 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:
    Code:
    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

    Einen Kommentar schreiben:


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

    Einen Kommentar schreiben:


  • KaiAlfonso
    antwortet
    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
    Angehängte Dateien

    Einen Kommentar schreiben:


  • smai
    antwortet
    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:

    Code:
    { yAxis:  [{plotLines: [{value: 37.9, className: 'plotline1', label: { className: 'plotline1-label', text: '100%'}}]}]}
    HTML-Code:
    <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.
    Zuletzt geändert von smai; 25.10.2019, 09:45. Grund: Komma im Code hat gefehlt.

    Einen Kommentar schreiben:


  • Chris46
    antwortet
    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?
    Code:
    { 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%'}}]}]}

    Einen Kommentar schreiben:


  • TCr82
    antwortet
    ok, ich habe meine beiden Fehler mittlerweile selbst gefunden. Und zwar hatte ich ycolor an Pos 16 vergessen
    Jetzt funktioniert alles....

    Einen Kommentar schreiben:


  • TCr82
    antwortet
    Wenn ich mir das Widget über die Entwicklerkonsole ansehe, dann ist auch
    Code:
    data-chart-options="null"

    Einen Kommentar schreiben:


  • TCr82
    antwortet
    ähm, kann man mal ein Beispiel liefern, dass funktioniert... Also in der kompletten schreibweise... Ich teste gerade das neue plot.period mit den chartoptions aus develop.

    das funzt nur irgendwie nicht so ganz... auch bekomme ich nicht die unit hinterlegt... ist die nun für die Axe ['°',''] oder für alle Linien?

    HTML-Code:
    <!--
         {{ plot.period   (id, item, mode, tmin, tmax, ymin, ymax, count, label, color, exposure, axis, zoom, assign, opposite, ycolor, ytype, unit, chartoptions) }}
                           1   2     3     4     5     6     7     8      9      10     11        12    13    14      15        16      17     18    19
    
    -->
    
        {{ plot.period(uid~'plot',
                ['technik.heizung.ha.TempKist','technik.heizung.ha.TempWWist','technik.heizung.ha.TempVListM2', 'technik.heizung.ha.BrennerStufe', 'technik.heizung.ha.PumpeStatusSp', 'technik.heizung.ha.PumpeStatusM1', 'technik.heizung.ha.PumpeStatusM2'],
                'avg',
                '8h',
                '',
                '[10,0]',
                '[85,4]',
                '',
                ['Kessel', 'WW.', 'HK2-VL.', 'Brenner', 'Pumpe WW', 'Pumpe HK1', 'Pumpe HK2'],
                ['#d30000', '#0054d3', '#c100d2', '#d20000', '#0089d2', '#1cd200', '#9000d2'],
                ['areaspline', 'areaspline', 'areaspline', 'stair', 'stair', 'stair', 'stair'],
                ['Zeit', 'Temperatur', 'Zustand'],
                '',
                [1,1,1,2,2,2,2],
                [0,1],
                ['linear','boolean'],
                ['°', '°', '°', '', '', '', ''],
                { tooltip: { split: true, distance: 30, padding: 5}}
        )}}

    Einen Kommentar schreiben:


  • schuma
    antwortet
    Ich habe jetzt für eine Stromanzeige (0-16000mA) gute Erfahrungen mit:

    Code:
    { yAxis: [ { tickInterval: 100 } ] , legend: { verticalAlign: 'top', y: 0 } }

    Einen Kommentar schreiben:


  • smai
    antwortet
    Zitat von smai Beitrag anzeigen
    Ich werde wohl einen Parameter hinzufügen, über welchen man beliebige Chart Options setzen kann.


    Das neue Argument ist in der Doku aufgeführt und die Anwendung wird im zweitletzten Beispiel gezeigt.


    Drei Bitten habe ich dazu:
    1. Wenn es Einstellungen gibt, welche ihr für allgemein sinnvoll haltet, meldet diese trotzdem, damit ich sie in den Standard aufnehmen kann.
    2. Fragt mich jetzt nicht zu jeder Option, die Referenz ist zu finden unter https://api.highcharts.com/
    3. Nicht jede Option verträgt sich mit den Standardoptionen in plot.period und nicht alle Anforderungen sind per Highcharts-Option erfüllbar. Jammert also nicht, wenn etwas nicht funktioniert.

    Einen Kommentar schreiben:


  • schuma
    antwortet
    Zitat von smai Beitrag anzeigen
    Indem man nich zoom=advanced verwendet
    Aber dann habe ich auch nicht die Button und die Zeitangabe oder?

    Zitat von smai Beitrag anzeigen
    Ich werde wohl einen Parameter hinzufügen, über welchen man beliebige chart options setzen kann. So kann jeder selbst einstellen, was er will.
    Ich glaube das wäre gut.

    Einen Kommentar schreiben:


  • smai
    antwortet
    Zitat von schuma Beitrag anzeigen
    1. Kann man die untere Übersicht irgendwie ausblenden?
    Indem man nich zoom=advanced verwendet
    Zitat von schuma Beitrag anzeigen
    2. Kann man irgendwie eine kleinere Teilung auf der Y-Achse einstellen? Also kleiner als 5?
    Im Moment nicht. Es ist übrigens nicht prinzipiell 5, bei kleineren Abständen können es auch 2,5 sein oder auch runter bis 1.

    Ich werde wohl einen Parameter hinzufügen, über welchen man beliebige chart options setzen kann. So kann jeder selbst einstellen, was er will.

    Einen Kommentar schreiben:


  • schuma
    antwortet
    Sieht jetzt, glaube ich, ganz gut aus.
    Zwei Fragen hätte ich noch:

    1. Kann man die untere Übersicht irgendwie ausblenden?

    2. Kann man irgendwie eine kleinere Teilung auf der Y-Achse einstellen? Also kleiner als 5?

    Einen Kommentar schreiben:

Lädt...
X