Q&A Highcharts - Multigraph V1.0

gerald1976 · 6. März 2012 um 15:40

Hallo!

Hab ich schon,
aber das schaut dann so wie im Screenshot aus.

Raketenschnecke · 6. März 2012 um 15:55

dann bitte ich etwas um Geduld, ich komm erst heute Abend an mein System ran

McFly · 6. März 2012 um 15:58

Vom Rand eingesprungen:

Es müsste kWh nicht KW/h heissen.

cu…

gerald1976 · 6. März 2012 um 16:14

Hallo!

Du hast natürlich recht!
Hab es sofort geändert.

LG

gerald1976 · 6. März 2012 um 16:42

Super!!

Danke

Raketenschnecke · 6. März 2012 um 23:28

@ gerald1976,

hier mal die entscheidenden Config-Teile für column-Charts, alles aus einem Script, welches bei mir funktioniert (du solltest die Variablen anpassen):

1.Graph-Variablen (habe ich in meinen Scripts erweitert, wird unter dem Block „// IPS Variablen ID´s“ eingefügt)


$chart_var7_id = 38711 /*[Wetterdaten RS.loc\Thies Clima D\Helligkeit\Meßdaten\Belichtungszähler (klxh)]*/  ;
$chart_var7_name = "Belichtung";
$chart_var7_unit = "klx min";
$chart_var7_yAxis = 0;

Einstellung für das Laden von Werten (ich meine mich dunkel zu erinnnern, das es mit column Probleme gibt, wenn [„AggregatedValues“][„MixedMode“] auf true steht → bei mir funktioniert in diesem Script beides)


// => ab V1.0003
// Serienübergreifende Einstellung für das Laden von Werten
$CfgDaten["AggregatedValues"]["HourValues"] = 1;      // ist der Zeitraum größer als X Tage werden Stundenwerte geladen
$CfgDaten["AggregatedValues"]["DayValues"] = 1;       // ist der Zeitraum größer als X Tage werden Tageswerte geladen
$CfgDaten["AggregatedValues"]["NoLoggedValues"] = 60; // ist der Zeitraum größer als X Tage werden keine Boolean Werte mehr geladen, diese werden zuvor immer als Einzelwerte geladen
$CfgDaten["AggregatedValues"]["MixedMode"] = false;     // alle Zeitraumbedingungen werden kombiniert

Graph-Konfigdaten


$CfgDaten["Series"][] = array("Id"=>$chart_var7_id, "Name" =>$chart_var7_name,"Unit"=> $chart_var7_unit,    "AggType"=>1, "ValueType"=>'Max',  "ReplaceValues"=>false,
    "Param" =>"type:'column', step:true, fillOpacity: 0.5, yAxis: $chart_var7_yAxis, color: '#FFAA00', shadow: true, lineWidth: 1,
        states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");

noch was vergessen: Formatierung x-Achse
dieses Posting solltest Du auch noch einarbeiten

versuch das mal in Dein Script einzubauen. Wenn das nichts hilft muss ich mal das komplette Script posten und du probierst es bei dir aus

gerald1976 · 7. März 2012 um 08:18

Hallo Raketenschnecke!

Danke, ich werde es mir heute am Abend gleich ansehen.
Du kannst mir aber gerne dein ganzes Script posten, ich lerne gerne von dir!!
LG
Gerald

gerald1976 · 7. März 2012 um 18:17

Hallo!

Vielleicht kannst du mir ja dein script schicken, ich bekomme es bei mir nicht zum laufen.

Danke
Gerald

Raketenschnecke · 9. März 2012 um 12:23

Threadbereinigung:
Probleme mit korrekter Darstellung der Meßdaten/Tooltipshierher verschoben

axelp · 11. März 2012 um 23:26

Gibt es eine Möglichkeit, Daten einer Variable umrechnen zu lassen? Mein Gaszähler tickt in m3, ich hätte zur besseren Vergleichbarkeit gerne kWh. Formel ist bekannt. Dachte an Replacevalues oder Übergabe eines Arrays statt Variable. Hat das schon mal jemand gemacht?

JAlbrecht · 16. März 2012 um 12:45

Nachdem ich mich relativ neu mit dem Thema HighCharts beschäftige habe ich hier im Forum schon diverse Zeit mit der Suchfunktion verbracht. Mein „Problem“: Ich kann 2 y-Achsen definieren, die neben der eigentlichen Achse auch die Bezeichnung anzeigen. Möchte ich z.B. eine 3. Achse definieren, wird mir in der Darstellung lediglich die Achsenbeschriftung, nicht aber die Achse als solche angezeigt. Woran könnte dieses liegen?

Mit den besten Grüßen aus dem sonnigen OWL

Raketenschnecke · 16. März 2012 um 12:59

vermutlich hast Du dem entsprechenden Graphen diese neue Achse nicht zugewiesen.
Die Skala wird immer dann ausgeblendet, wenn keine Werte (die zu dieser Skala gehören) im Diagramm sind (z.B. wenn man den Graphen per Mausklick ausblendet)

Boui · 16. März 2012 um 13:20

Hi Leute,

ich möchte mich nur mal schnell als neuer Highcharts-User outen. Irgendwann gingen mir doch die Einzelgraphen auf den Geist und da bot es sich an, zu wechseln.
Der WebFront ist nun komplett umgebaut und neu gestaltet. Es schaut einfach klasse aus.

Vielen Dank an KHC für diese bemerkenswerte Vorarbeit und auch an die anderen User, die mit Ihren Erweiterungen das Thema voranbringen.

JAlbrecht · 16. März 2012 um 13:30

Zuweisung?
Ich habe die Definition der Graphen und der y-Achsen entsprechend der beispiele vorgenommen:

Definition Graphen:

    //  Sonnenstand
    $CfgDaten["Series"][] = array("Id"=>12498, "Name" =>"Elevation","Unit"=>"°",         "ReplaceValues"=>false,
        "Param" =>"type:'line',  step:false, yAxis: 0, shadow: false,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
    $CfgDaten["Series"][] = array("Id"=>12733, "Name" =>"Azumit","Unit"=>"°",         "ReplaceValues"=>false,
        "Param" =>"type:'line',  step:false, yAxis: 0, shadow: false,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");

    //  Ess-/Wohnzimmer Ist-Temperatur
    $CfgDaten["Series"][] = array("Id"=>31098, "Name" =>"Ist-Temperatur","Unit"=>NULL,         "ReplaceValues"=>false,
        "Param" =>"type:'spline',  step:false, yAxis: 0, shadow: false,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
    //  Ess-/Wohnzimmer Soll-Temperatur
    $CfgDaten["Series"][] = array("Id"=>52353, "Name" =>"Soll-Temperatur", "Unit"=>"°C","ReplaceValues"=>false,
        "Param" =>"type:'line', step:true, yAxis: 0, shadow: false,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");

    //  Esszimmer Fenster-Drehgriffe
    $CfgDaten["Series"][] = array("Id"=>17466, "Name" =>"Drehgriff Esszimmer li", "Unit"=>array(0=>'geschlossen',1=>'gekippt',2=>'geöffnet'), "ReplaceValues"=>array(0=>10,1=>55,2=>100),
        "Param" =>"type:'area', fillOpacity: 0.25, step:true, yAxis: 1, shadow: true,lineWidth: 0, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
    $CfgDaten["Series"][] = array("Id"=>14772, "Name" =>"Drehgriff Esszimmer re", "Unit"=>array(0=>'geschlossen',1=>'gekippt',2=>'geöffnet'), "ReplaceValues"=>array(0=>10,1=>55,2=>100),
        "Param" =>"type:'area', fillOpacity: 0.25, step:true, yAxis: 1, shadow: true,lineWidth: 0, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");

    //  Ess-/Wohnzimmer Heizungsventile
    $CfgDaten["Series"][] = array("Id"=>11319, "Name" =>"Heizungsventil Wohnzimmer", "Unit"=>"%","ReplaceValues"=>false,
        "Param" =>"type:'line', step:true, yAxis: 1, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");
    $CfgDaten["Series"][] = array("Id"=>46497, "Name" =>"Heizungsventil Esszimmer", "Unit"=>"%","ReplaceValues"=>false,
        "Param" =>"type:'line', step:true, yAxis: 1, shadow: true,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");

Definition y-Achsen:

    // Y-Achsen
    $CfgDaten["yAxis"][] = array("Name" =>"Elevation", "Unit"=>"°","Min"=>0, "Max"=>90,"TickInterval"=>2.25);
    $CfgDaten["yAxis"][] = array("Name" =>"Temperaturen", "Unit"=>"°C","Min"=>0, "Max"=>40,"TickInterval"=>1);
    $CfgDaten["yAxis"][] = array("Name" =>"Heizungssteller / Luftfeuchte", "Unit"=>"%","Min"=>0, "Max"=>100,"TickInterval"=>2.5);

Im Diagramm werden alle Werte als Graph dargestellt. Lediglich die jeweils 3. y-Achse erscheint ohne Skala.

Herzlichen Dank schonmal für die schnelle Antwort auf meine Eingangsfrage.

Raketenschnecke · 16. März 2012 um 13:47

Dann trifft meine Vermutung zu: du hast zwar 3 y-Achsen definiert, aber keinen Graphen, der die 3. benutzt. Da es keine Werte zu diese y-Achse gibt, gibts natürlich auch keine Skala… die HighCharts sind schon schlau …

PS: Du solltest mal alle deine Graphen checken, bis auf den ersten stimmen alle Skalenzuweisungen nicht

JAlbrecht · 16. März 2012 um 14:51

Danke - dann stellt sich die Frage - wie erfolgt die Zuweisung? sorry - aber offensichtlich habe ich da wasnicht verstanden.

Superherzlichen dank

Raketenschnecke · 16. März 2012 um 16:25

ja, ok:

das hier ist die Definition eines Graphen (=Datenreihe im Diagramm) mit den notwendigen und optionalen Parametern:


$CfgDaten["Series"][] = array("Id"=>12498, "Name" =>"Elevation","Unit"=>"°",         "ReplaceValues"=>false,
        "Param" =>"type:'line',  step:false, yAxis: 0, shadow: false,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");

dort drin findest Du auch die Definition, welche Achse für diesen Graphen genutz werden soll:


yAxis: 0,

weiter unten im Config-Script sind genau diese Achsen definiert: pro Zeile 1Achse, Zählweise beginnend mit 0:


 // Y-Achsen
    $CfgDaten["yAxis"][] = array("Name" =>"Elevation", "Unit"=>"°","Min"=>0, "Max"=>90,"TickInterval"=>2.25);
    $CfgDaten["yAxis"][] = array("Name" =>"Temperaturen", "Unit"=>"°C","Min"=>0, "Max"=>40,"TickInterval"=>1);
    $CfgDaten["yAxis"][] = array("Name" =>"Heizungssteller / Luftfeuchte", "Unit"=>"%","Min"=>0, "Max"=>100,"TickInterval"=>2.5);

Wenn Du Dir dann deine Graphen anschaust, z.B. diesen hier:


//  Ess-/Wohnzimmer Ist-Temperatur
    $CfgDaten["Series"][] = array("Id"=>31098, "Name" =>"Ist-Temperatur","Unit"=>NULL,         "ReplaceValues"=>false,
        "Param" =>"type:'spline',  step:false, yAxis: 0, shadow: false,lineWidth: 1, states: {hover:{lineWidth: 2}}, marker: { enabled: false, states: { hover: { enabled: true, radius: 4}}}");

dann ist dort die Achse Nr. 0 angegeben. Diese Achse hast du unten wie folgt definiert:


// Y-Achsen
    $CfgDaten["yAxis"][] = array("Name" =>"Elevation", "Unit"=>"°","Min"=>0, "Max"=>90,"TickInterval"=>2.25);

da passt was nicht, würde ich sagen. Die Temperatur auf der Achse für Elevation zu plotten ist schon komisch. Noch komischer ist z.B. den Heizungssteller Wohnzimmer auf der temperaturachse plotten zu lassen;)

JAlbrecht · 16. März 2012 um 18:56

Großes Dankeschön - ich habe es nun verstanden und kann meine Versuche (wenn Tochter, Ehefrau und Arbeit es zulassen ) fortsetzen. Welche Graphen ich dann sinnvollerweise kombiniere muss ich austesten. Aber nochmals ganz herzlichen Dank.

Raketenschnecke · 16. März 2012 um 20:45

gerne, und wenn was unklar ist: nachfragen, nicht quälen

Tuxtom007 · 17. März 2012 um 08:47

Hallo,

ich hab mal eine banale Frage, aber deren Antwort ich nicht finde:

Wo kann ich im Highchart einstellen, wieviele Nachkommastellen die Werte im Tooltip anzeigen.
Ich hab bei einigen Werte, egal ob nun Temperatur, Luftfeuchte oder die Speicherauslastung vom Server 8 Nachkommastellen drin, was ziemlich sinnfrei ist.
Komischerweise in anderen Graphen mit gleichen Darstellungen wie Temperatur und Luftfeucht in anderen Raum sind die dann ok.

Welcher Parameter ist es im Script.

Danke im voraus.