Q&A Highstocks by Highcharts V2.0

ich denke, mit einer weiteren HighCharts-Config fährst du am besten.
Du musst aber nicht zwingend eine neue Variable erzeugen, die das neue Chart aufnimmt (wenn du z. B. mehrere Charts im Wechsel anzeigen willst)

Gut hab auch geadcht eine zweite Highcharts Config Datei anzulegen, nur war mir nich sicher ob das richtig ist. Gut ich bedanke mich mal für den Exkurs in Highcharts und Highstock. Top Arbeit! :slight_smile:

viel Erfolg und Spass mit HC%HS, und immer schön in der HC-API-Doku stöbern, da lernt man ne Menge
Und wenn doch noch Fragen hochkommen: fragen! :wink:

Ok jetzt habe ich noch ein Problem :wink: ich möchte einmal einen reset Button erstellen, jedoch kriege ich nicht heraus wie. Die ganzen Funktionen sind ja in der liste gezeigt, jedoch nicht wie man die Parameter darfür eingibt. Gibt es dafür eine Liste?! Also ich habe jetzt grob dazu alles jedoch weiß ich nciht wie ich die position einstellen kann.

$CfgDaten['chart']['zoomType'] = "'x'";			//default: $CfgDaten['chart']['zoomType'] = "'xy'";
	$CfgDaten['chart']['resetZoomButton']['position'] =(?x?40?,?y?40?);

und noch eins. Oben links sind Buttons die auf 1Momat 1Jahr usw. heranzoomen. Jedoch finde ich in den Quellcodes nicht wo diese deklariert werden und halt programiert. Ich bräuchte nur die Stelle wo diese bearbeitet werden den Rest kann ich mir ja dann erlesen um neue Buttons zu erstellen :wink:

eine Liste gibt es nicht (wer soll die bauen, ich schätze es gibt an die eintausend Optionen?!) Schau dir die API-Doku an und vergleiche, wie es im Script formuliert ist. Dann wist du auch die Syntax verstehen lernen.

Einen Rest-Button gibt es m.W. bei HS nicht, nur bei HC, die Syntax wäre z.B. diese hier:


$CfgDaten['chart']['resetZoomButton']['position']['x'] = -10;
$CfgDaten['chart']['resetZoomButton']['position']['y'] = -40;

schau in den Code, den ich dir geschickt habe, da ist es kommentiert wie der default Button zugewiesen wird:


   // Range Selctor
	$CfgDaten['rangeSelector']['selected']					= 4;
	$CfgDaten['rangeSelector']['inputEnabled']			= false;

die Button-Definition hab ich grad nicht parat, ist aber hier beschrieben:
Highcharts Stock - API Reference

Ok wenn es diesen reset Button nicht gibt wie kann man dann wieder herauszoomen?!

Du meinst du beschreibst den default Button, jedoch bin ich alle Scripte durchgegangen die ich finden konnte, habe aber nichts gefunden was das angeht. Deiner Meinung steht das dann in der „Highcharts Config“ richtig? Hier ist nochmal mein Script, jedoch funktioniert hier ein Graph nicht, dies ist jedoch nicht relewand gerade. Kanns du mir zeigen wo genau ich das machen muss? Aber mach es bitte nich selber ich möchte das schon selber können/machen.

Highcharts Config3.txt (25.4 KB)

im HS gibts andere Möglichkeiten als im HC, z.B. über den Navigator. Allerdings hilft der nicht, wenn man den y-Zoom aktiviert hat. Deshalb aktivere ich in den HS nur den x-Zoom

??

yes

was?

:smiley: ich meine diese Button mit denen man 1Monat und so herzanzoomen kann. Wo werden diese deklariert und programiert?! so wie ich das verstanden habe sind diese in der „Highcharts Config“, jedoch finde ich diese dort nicht und du müsstest mir die Codezeile sagen wo das gemacht wird. Mehr brauche ich jetzt nicht mehr. Deine restlichen Informationen haben mir die restlichen Hinweise gegeben um meine Probleme zu lösen.

das Element mit den vielen Buttons oben links ist der RangeSelector. Den Link dazu hatte ich bereits gepostet. Da die in der Doku genannten Einstellungen zum RangeSelector default-Einstellungen sind (was im Übrigen in der HC/HS-Doku erwähnt wird), ist es nicht nötig, diese extra im HC-Script zu definieren.
Nötig ist dies sehr wohl bei der Zuweisung des Default-Buttons, da HC hier keinen Defaultwert vorsieht. Deswegen habe ich dir dazu den nötigen Code geschickt.

jap den code habe ich gesehen von dir

// Range Selctor
	$CfgDaten['rangeSelector']['selected']					= 4;
	$CfgDaten['rangeSelector']['inputEnabled']			= false;

jedoch kriege ich es nicht hin noch einen button zu erzeugen. ich hab alles sinnvolle meiner meinnung nach gemacht. Könntest du mir den code zeigen den ich schreiben muss damit dort ein Button ist der auf einen Tag heranzoomt. Halt nur auf der x-Achse, da man ja auf der y-Achse nicht herauszoomen kann.

hier der RangeSelector-Button für 1Tag:


// Range Selctor
$CfgDaten['rangeSelector']['selected']	 = 0;
$CfgDaten['rangeSelector']['enabled'] 	 = true;
$CfgDaten['rangeSelector']['buttons'][]	 = array("type"=>'day', "count"=> 1, "text"=>'1d');

Top :wink: danke!
läuft alles.
Das selbe habe ich auch ausprobiert nur andere Syntax.
Die versteh ich nämlich noch nicht ganz wie die angewendet wird.

Ok so ich bin mal das „highcharts“ Script durchgegangen und habe diese Funktion gefunden

// ------------------------------------------------------------------------
	// ReadDataFromDBAndCreateDataArray
	//    Liest die Series-Daten aus der DB und schreibt sie in den DataString
	//    IN: $cfg, $Serie
	//    OUT: der Data String
	// ------------------------------------------------------------------------
	function ReadDataFromDBAndCreateDataArray($cfg, $Serie)
	{
		DebugModuleName($cfg,"ReadDataFromDBAndCreateDataArray");

		if (!isset($Serie['Id']))
		   return "";

		// errechne die Zeitspanne
		if ($Serie['EndTime'] > time())
			$Diff = time() - $Serie['StartTime'];
		else
			$Diff = $Serie['EndTime'] - $Serie['StartTime'];



		$Id_AH = $cfg['ArchiveHandlerId'];
		$dataArray = array();
		$VariableId = (int)$Serie['Id'];
		$Agg = -1;
		$ReadCurrentValue = true;

		// wenn ReplaceValues definiert wurden werden nur geloggte und keine Aggregated Werte gelesen
		if ($Serie['ReplaceValues'] != false)
		{
			if ($Diff > $Serie['AggregatedValues']['NoLoggedValues'])
			{
				$Serie['StartTime'] = $Serie['EndTime'] - $Serie['AggregatedValues']['NoLoggedValues'];
			}

			// Einzelwerte lesen
		   $dataArray = ReadAndAddToLoggedData($dataArray, $Id_AH, $VariableId, -1 , $Serie["StartTime"], $Serie["EndTime"], "Value", $Serie);
		}
		else if ($Serie['AggregatedValues']['MixedMode'])    // im MixedMode werden anfangs alle Werte, dann die Stunden- und zuletzt Tageswerte ausgelesen
		{
			// zuerst Einzelwerte
			$result = CalculateStartAndEndTimeForAggreagtedValues($Serie, "");
			if ($result != false)
			{
				if ($Serie['Ips']['IsCounter']) 						// wenn Zähler dann immer Agg.Values
					$dataArray = ReadAndAddToLoggedData($dataArray, $Id_AH, $VariableId, 0, $result["StartTime"], $result["EndTime"], $Serie['AggValue'], $Serie);
				else
   			   $dataArray = ReadAndAddToLoggedData($dataArray, $Id_AH, $VariableId, -1 , $result["StartTime"], $result["EndTime"], "Value", $Serie);
			}
			// -> Stundenwerte
			$result = CalculateStartAndEndTimeForAggreagtedValues($Serie,"Hour");
			if ($result != false)
				$dataArray = ReadAndAddToLoggedData($dataArray, $Id_AH, $VariableId, 0, $result["StartTime"], $result["EndTime"], $Serie['AggValue'], $Serie);

			// -> Tageswerte
			$result = CalculateStartAndEndTimeForAggreagtedValues($Serie,"Day");
			if ($result != false)
				$dataArray = ReadAndAddToLoggedData($dataArray, $Id_AH, $VariableId, 1, $result["StartTime"], $result["EndTime"], $Serie['AggValue'], $Serie);

			// -> Wochenwerten
			$result = CalculateStartAndEndTimeForAggreagtedValues($Serie,"Week");
			if ($result != false)
				$dataArray = ReadAndAddToLoggedData($dataArray, $Id_AH, $VariableId, 2, $result["StartTime"], $result["EndTime"], $Serie['AggValue'], $Serie);

			// -> Monatswerte
			$result = CalculateStartAndEndTimeForAggreagtedValues($Serie,"Month");
			if ($result != false)
				$dataArray = ReadAndAddToLoggedData($dataArray, $Id_AH, $VariableId, 3, $result["StartTime"], $result["EndTime"], $Serie['AggValue'], $Serie);

			// -> Jahreswerte
			$result = CalculateStartAndEndTimeForAggreagtedValues($Serie,"Year");
			if ($result != false)
				$dataArray = ReadAndAddToLoggedData($dataArray, $Id_AH, $VariableId, 4, $result["StartTime"], $result["EndTime"], $Serie['AggValue'], $Serie);
		}
		else
		{
			$Agg = -1;	// ->  AC_GetLoggedValues

         if  (isset($Serie['AggType']))   // wenn 'AggType' definiert wurde, wird dies vorrangig bearbeitet
         {
         	$Agg = $Serie['AggType'];
         }
			elseif ($Serie['AggregatedValues']['YearValues']!= -1 && $Diff > $Serie['AggregatedValues']['YearValues'])
				$Agg = 4;	//  -> AC_GetAggregatedValues [0=Hour, 1=Day, 2=Week, 3=Month, 4=Year]
			elseif ($Serie['AggregatedValues']['MonthValues']!= -1 && $Diff > $Serie['AggregatedValues']['MonthValues'])
				$Agg = 3;	//  -> AC_GetAggregatedValues [0=Hour, 1=Day, 2=Week, 3=Month, 4=Year]
			elseif ($Serie['AggregatedValues']['WeekValues']!= -1 && $Diff > $Serie['AggregatedValues']['WeekValues'])
				$Agg = 2;	//  -> AC_GetAggregatedValues [0=Hour, 1=Day, 2=Week, 3=Month, 4=Year]
			elseif ($Serie['AggregatedValues']['DayValues']!= -1 && $Diff > $Serie['AggregatedValues']['DayValues'])
				$Agg = 1;	//  -> AC_GetAggregatedValues [0=Hour, 1=Day, 2=Week, 3=Month, 4=Year]
			else if ($Serie['AggregatedValues']['HourValues']!= -1 && $Diff > $Serie['AggregatedValues']['HourValues'])
				$Agg = 0;	//  -> AC_GetAggregatedValues [0=Hour, 1=Day, 2=Week, 3=Month, 4=Year]

			// es wurde noch nichts definiert und es handelt sich um einen Zähler --> Tageswerte
         if ($Agg == -1 && $Serie['Ips']['IsCounter'])
	         $Agg = 0;

			if ($Agg == -1)
			{
				// Zeitraum ist zu groß -> nur bis max. Zeitraum einlesen
				if ($Diff > $Serie['AggregatedValues']['NoLoggedValues'])
					$Serie['StartTime'] = $Serie['EndTime'] - $Serie['AggregatedValues']['NoLoggedValues'];

				// Alle Werte
			   $dataArray = ReadAndAddToLoggedData($dataArray, $Id_AH, $VariableId, -1 , $Serie["StartTime"], $Serie["EndTime"], "Value", $Serie);
			}
			else
			{
				$dataArray = ReadAndAddToLoggedData($dataArray, $Id_AH, $VariableId, $Agg, $Serie["StartTime"], $Serie["EndTime"], $Serie['AggValue'], $Serie);
				$ReadCurrentValue = false;
			}
		}

		// sortieren, so , dass der aktuellste Wert zuletzt kommt
		$dataArray = array_reverse($dataArray);

		// aktuellen Wert der Variable noch in Array aufnehmen
		if ($ReadCurrentValue
			&& $Serie['EndTime'] >= time()    			// nicht wenn Endzeitpunkt vor NOW ist
			&& !$Serie['Ips']['IsCounter'])				// nicht bei Zählervariablen
			{
				$curValue = ReadCurrentValue($VariableId);
				$dataArray[] = CreateDataItem($curValue['TimeStamp'], $curValue['Value'], $Serie);
			}


		return $dataArray ;
	}

Dort steht etwas von Stundenanzeige, Tage, Wochen usw. Jedoch auch etwas von Einzelwerte anzeigen. Da die Temperatur von den Messgeräten alle paar Minuten gemessen wird, wäre es doch ganz interessant auch alle Werte anzeigen zu lassen, wenn man entsprechend heranzoomt. Jedoch wird in dem „Highcharts Config“ Script dies dabei erwähnt.

// Serienübergreifende Einstellung für das Laden von Werten
	$CfgDaten['AggregatedValues']['HourValues'] = 0;      // 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']['WeekValues'] = -1;      // ist der Zeitraum größer als X Tage werden Wochenwerte geladen
	$CfgDaten['AggregatedValues']['MonthValues'] = -1;      // ist der Zeitraum größer als X Tage werden Monatswerte geladen
	$CfgDaten['AggregatedValues']['YearValues'] = -1;      	// ist der Zeitraum größer als X Tage werden Jahreswerte geladen
	$CfgDaten['AggregatedValues']['NoLoggedValues'] = 1000; 	// 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
	$CfgDaten['AggregatedValues']['MixedMode'] = false;
	// Systematik funktioniert jetzt additiv. D.h. die angegebenen Werte gehen ab dem letzten Wert
	//
	//            -5 Tage           -3 Tage    					EndTime
	// |           |              	|            				 |
	// |           |DayValue = 2     |HourValues = 3          |
	// |Tageswerte |Stundenwerte     |jeder geloggte Wert     |

Daraus lese ich das es mind. Stundenwerte angezeigt werden, jedoch auch im MixedMode alle Werte. Doch wenn ich den MixedMode anwende spinnt mein Highstock-Diagramm total rum und zeigt nur noch Werte an wenn ich heranzoome und dann auch nur die werte von der letzten Minute. Also total verdreht alles. Daher wollte ich mal fragen ob das überhaupt funktioniert, das man sich sag ich mal die letzten 2 Stunden anguckt und dann wirklich alle Werte sieht in der Toolbox die gespeichert wurden, wenn „ja“ wie stelle ich den MixedMode ein damit er nicht nur die letzte Minute anzeigt sondern, dass das Diagramm erst normal angezeigt wird und dann erst wenn man zoomt auf max. 2 Tage alle Werte lesen kann.

Ich habe mal 2Fotos angehangen, die mein Problem beser darstellen. Das erste repräsentiert mein Diagramm wenn ich über das Web das Diagramm öffne und nichts mache. Das zweite zeigt die Werte an wenn ich kurz ranzoome(Man beachte die zeitleiste unten)

Kann es sein, dass Highstocks noch massive Performanceprobleme hat?

Habe eine gut funktionierende Highchart Grafik in eine Highstock umgestellt.
Manchmal kommt da garnix, manchmal aber schon.
Oft ist es dann aber so, dass wenn ich den Rangeselektor einstellen will, dass das dann nicht mehr funktioniert.

Hallo,

ich bin jetzt auch auf die Highstocks gewechselt, habe aber noch ein Problem mit der Beschriftung der Y-Achse.

Wie im Screenshoot zu sehen ist die Beschriftung zusammen geschoben, kann mann das irgendwo einstellen/ändern ?

Beschriftung.jpg

hallo Horst,
ja muss man. die HS sind leider nicht so komfortabel wie die HC’s. Vielleicht wird das noch.
Die Verschiebung der Labels kann man mit


$CfgDaten["yAxis"][0]['offset']                        = 60;

einstellen

Danke, werde es dann heute Abend anpassen.

viel Spass :smiley:
Das Gleiche kann man übrigens auch mit der Legende machen, ich hab das hier exemplarisch gemacht (vorletztes Chart): RS.SYS Health | Raketenschnecke.net

die Parameter hierfür sind:

// Legend
	$CfgDaten['legend']['enabled']							= true;
	$CfgDaten['legend']['align']								= "right";
	$CfgDaten['legend']['shadow']								= true;
	$CfgDaten['legend']['floating']							= true;
$CfgDaten['legend']['y']									= -211;
	$CfgDaten['legend']['x']									= -40;

Huhu,

ich hab mich auch mal an die Highstocks getraut.
Ich hab nur ein Problem mit dem Tooltip. Im Grunde habe ich ein normales HC Config Script übernommen.
Prinzipiell klappt es auch. Nur wenn man einmal einen Wert in der Kurve berührt hat, kann man den Selector nicht mehr verschieben.
Der Käfersucher von Firefox hat auch prompt folgenden Fehler ergeben:

TypeError: this.series is undefined

Das ganze kommt aus der Tooltipformatierung.
Wenn ich das this.series weglasse, bekomme ich einen Tooltip mit undefinierten Werten, aber der Selector geht wieder.
Ein Blick in die dom Anzeige zeigt, das in this auch gar kein series enthalten ist.
Wie macht ihr das?
Habt ihr eigene Tooltipformater?

Irgendwie steh ich auf dem Schlauch.

cu…

hs_config.php.txt (18.1 KB)

Hi Marty,

ich verwende ausschließlich eigene Tooltips. Dein Config-Script hab ich probehalber in mein System geschossen, aber die Anpassungen waren mir zu aufwändig :smiley:
Im Anhang mal mein Tooltip-Code für HighStock-Charts

HC HighStock Tooltip Formatter.zip (774 Bytes)

was Buntes wär vielleicht auch nicht schlecht: so sieht das Tooltip im Anhang aus (ohne Pic)