Q&A Highcharts - Multigraph V1.0

Bernardo71 · 27. Juni 2011 um 18:41

Wenn Du Highcharts, wie in Post 1 beschrieben, installiert hast, findest Du auf Deiner Festplatte auch ein Highcharts Verzeichnis in das Du die IPS template kopieren kannst.

Das würde Frage 1 beantworten.

Gruss
B71

jabodu · 28. Juni 2011 um 17:00

Danke für den Tipp, jetzt tut’s! Problem war, dass man sich das HighCharts-Verzeichnis unter webfront/user selbst anlegen und highcharts.zip dorthin entpacken muss. Da hat dann auch IPS_Template.php eine Heimat gefunden.

Grüße,

Oliver

Raketenschnecke · 4. Juli 2011 um 09:40

Hi KHC,

ich hab zwischenzeitlich meine Highcharts erweitert, angepasst usw, kome schon ganz gut zurecht. Habe nun aber eine Frage zu Float-Werten: ich habe Werte, die in der db mit mehreren Nachkommastellen abgelegt werden. Nun möchte ich im Graphen und im Tooltip aber keine 12 Nachkommastellen angegeigt bekommen. Wo macht es Deiner Meinung nach Sinn in den Scripts die Werte zu runden (bin noch weit weg davon, das Scriopt komplett verstanden zu haben)?

bbernhard · 4. Juli 2011 um 10:11

Hi rakete

Am besten ist das wohl in den settings fürs Highchart aufgehoben.
Ich habs bei mir schon entsprechend eingebaut, kann dir am Abend die den Code schicken.

gruß
bb

Raketenschnecke · 4. Juli 2011 um 10:39

würd’ ich glatt nehmen

Danke Dir°!

bbernhard · 4. Juli 2011 um 21:20

Servus raketendings

Hab grad nachgesehn wie ichs eingebaut habe.
KHZ’s Variante hab ich komplett umgebaut, d.h. direktes Copy&Paste kann ich dir leider nicht bieten, aber paar Beispiele wir ichs für Bar Pie verwende.
Für deine Line Plots funktioniert es ganz gleich.

Du kannst im Highchart an vielen Stellen eine „Formatter“ Function benutzen.
Mit der kannst die im Chart erscheinenden Strings und Daten formatieren bzw. entsprechend andere Texte setzen.

Dies Zeile „return this.point.y.toPrecision(3) + " Std.“;"

macht zb. 3 Dtellige Ausgabe mit „Std.“ als Suffix
So isses eingebaut, bei mir aber im BAR Graph. Müßte bei dir also unter „Line“ oder „Area“ stehen.

plotOptions: {
   	bar: {
   	      showInLegend: false,
		       allowPointSelect: true,

            series: {

        },
				dataLabels: {
        				enabled: true,
                	color: "#CCC",
						formatter: function() {
                    return this.point.y.toPrecision(3) + " Std.";
						}
				},


		 		},

oder hier:
Im Tooltip erscheint der Name, der Wert wird im Graph in Prozent umgerechnet und 2-Stellig ausgegeben.

tooltip: {
               backgroundColor: {
                  linearGradient: [0, 0, 10, 40],
                  stops: [
                     [0, "rgba(166, 160, 150, .7)"],
                     [1, "rgba(29, 27, 21, .4)"]
                  ]
               },
               borderWidth: 0,
               style: {
                  color: "#FFF"
               },
               formatter: function() {
                  return "<b>"+ this.point.name +"</b><br/>"+
                      this.percentage.toPrecision(2) +"%";
               }
   },

Üben kannst zb. hier:
ElementStacks - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

ersetze die formatter Function durch entsprechde Strings und du kannst entsprechend rumspielen.

viel Glück
bb

Raketenschnecke · 5. Juli 2011 um 09:11

Hi bb,

danke für die Code-Schnipsel.
Ich hatte zwischenzeitlich schon mit dfen Formatter-Funktionen rumgespielt, aber darauf bin ich nicht gekommen
Habs gestern kurz versucht (hatte nicht allzuviel Zeit), aber so richtig gefällt mir die Option nicht: kann man wirklich nur vorgeben, wieviel Stellen der gesamte Wert hat (also incl. der Stellen vor dem Komma)? Das kann doch nicht sein, oder ? Jedenfalls bringt mir das leider nix. Allerdings komme ich mit meinem Englisch auf den Options-Seiten von Highcharts nicht weiter, vioelleicht liegt’s daran:rolleyes:

bbernhard · 5. Juli 2011 um 09:48

Hi

du kannst hier alle Java Script Befehle verwenden.
Wennst statt „to.Precission()“ einfach "to.Fixed() verwendest müßte es klappen.

SELFHTML: JavaScript / Objektreferenz / Number

gruß
bb

ernie · 5. Juli 2011 um 15:11

Hallo,

ich habe den Thread die ganze Zeit verfolgt und bin jetzt kurz davor, meinen Stromverbrauch zu visualisieren. Bisher wollte ich pChart2 benutzen, aber die Interaktivität von highChart reizt natürlich schon sehr …

Aber hier die beiden aktuellen Fragen:

kann ich mit der Version 1.003 Area-Charts umsetzen (siehe Bild)?
hat schon jemand den Vorschlag aus dem Forum umgesetzt, die Grafiken vorzuberechnen und ohne Animationen zu nutzen (Highslide Software • View topic - Can I generate charts on the server without using a browser??) (4 Charts, 4 Reihen, 500 Punkte pro Serien mit 500px Breite hat meine Safari auf dem MacBook schon ziemlich gefordert. Wie soll das erst mit dem iPad werden??? / Highcharts Example)

Gruß,

ernie

khc · 5. Juli 2011 um 16:27

Hallo ernie,

ich kann dir nur deine erste Frage „1. kann ich mit der Version 1.003 Area-Charts umsetzen (siehe Bild)?“ mit einem klaren JA beantworten. siehe auch Link

Grüße KHC

Raketenschnecke · 5. Juli 2011 um 18:10

Beispiel zu Frage1: link

ernie · 5. Juli 2011 um 18:40

Der Link ist bei mir down

Aber ich versuche es nachher noch mal und gehe einfach mal davon aus, dass Du das schon zufriedenstellend umgesetzt hast …

Gruß,

ernie

computerpap · 5. Juli 2011 um 19:57

Hallo
Hab heute auch mal Higcharts installiert und läuft auch super. Was mich allerdings stört, ist der graue Hintergrund bei der Chartdarstellung. Im Beitrag 10 hat sanman eine „ips.js“ bereitgestellt. Laut Beschreibung wird da alles angepaßt. Ich dachte ich muß jetzt nur die ips.js austauschen, aber ich finde diese Datei nicht auf meinen PC. In welchen Ordner muß denn diese Datei rein?

Edit: Habs gefunden, jetzt funzt alles.

Raketenschnecke · 5. Juli 2011 um 20:18

hi bb,

ich bin zu blöd. Habs nicht hinbekommen. Dafür hab ich eine andere -temporäre- Lösung gefunden:

im HighCharts-Script Zeile 393 hab ich eine Runden-Zeile eingefügt:

			// Variablenwert auslesen
			$val = $value[$valStr];
			$val = round($val, 1); // rundet auf 1 Nachkommastelle

ist nicht schön (weil gilt jetzt für alle Graphen, ich kann aber erstmal mit leben.

Bernardo71 · 5. Juli 2011 um 20:38

Och bei zu blöd reihe ich mich mal ein…

Ich hätte gerne mal ein Pie Chart Konfigscript gesehen und vor allem wie man das zum fliegen bekommt…

Ich kann Euch irgendwie nicht mehr folgen…

Gruss
B71

Raketenschnecke · 6. Juli 2011 um 09:46

hi bb,

das sieht sehr cool aus (auch wenn pie’s überhaupt nicht mein Ding sind - aber manchmal braucht man die Dinger wirklich). Ich denke, dass ich von diesen Scripts auf jeden Fall partizipieren kann und werd wohl mal am WE mit rumspielen

Bernardo71 · 6. Juli 2011 um 11:35

Sehr cool.

Vielen Dank BB

bbernhard · 6. Juli 2011 um 12:31

Bitte, gern geschehen.

Aber wie gesagt, das sind meine Originalscripte -as-it-is-. Die sind für meine Umgebung hingetrimmt.
Gut möglich das es bei euch irgendwelcher Anpassungen bedarf.

viel Spass
bb

UH368 · 13. Juli 2011 um 17:06

Hallo,

hat es von euch schon einer im Dahboard am laufen bekommen, wenn ja wie?
Bei mir geht es immer noch nicht.

Gruß Uwe

Lieschen · 16. Juli 2011 um 13:50

Hallo zusammen,

freue mich sehr über die Möglichkeit des Multigraph ohne permanente Internetverbindung.

Könntet ihr die Anleitung nur noch ein wenig ausführlicher gestalten, damit man als „normaler Nutzer“ die Schritte etwas besser nachverfolgen kann.

Ich kann leider nichts mit: „Einspielen und Parametrieren des ConfigScripts (siehe Anhang)“ und „Starten des ConfigScripts“ anfangen.

Besten Dank im Voraus und allen ein schönes WE
Lieschen