Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:
http://www.pscl.ch
Für Fragen, Kommentare und Kritik bin ich immer Dankbar.
Viel Spass und Grüsse
Tutorials von wetterbinningen.ch
Willkommen auf dem Tutorial Blog von der Wetterseite wetterbinningen.ch.
http://www.pscl.ch
Für Fragen, Kommentare und Kritik bin ich immer Dankbar.
Viel Spass und Grüsse
http://www.pscl.ch
Für Fragen, Kommentare und Kritik bin ich immer Dankbar.
Viel Spass und Grüsse
Tutorial - Wetterdaten und Datenbanken - Teil 1 - Einleitung
Wetterdaten und Datenbanken
Einleitung
Datenbanken eignen sich für die Ablage von Wetterdaten besonders gut. Diese wurden entwickelt, um große Datenmengen zu verwalten. Vereinfacht kann man sich Datenbanken wie eine Tabelle aus zB. Excel vorstellen. Oft enthalten Datenbanken mehrere solcher Tabellen, welche zudem miteinander verknüpft sein können.
Einige Vorteile
- Schneller Zugriff
- Filter / Sortierung
- Berechnungen wie sum/min/max/avg
- Datumsfunktionen
- geringer Platzbedarf
- komfortable Verwaltung
Tabellen
Hier ein Beispiel einer Tabelle:
 |
| MySQL Tabellen Inhalt angezeigt von phpMyAdmin |
Für jede Spalte muss mindestens ein Name und Typ angegeben werden. Gewisse Typen verlangen zusätzliche Parameter wie z.B die maximale Grösse/Länge.
 |
| MySQL Tabellen Struktur angezeigt von phpMyAdmin |
Speicherbedarf
Gehen wir von einem 5 Minuten Speicherinterval aus., dann sind das 288 Datenzeilen pro Tag. Das sind pro Monat bereits 8640 und im Jahr schon über 105'000. Gehen wir von ca. 15 Spalten aus, sind das über 1.5 Millionen Einzelwerte pro Jahr. (So eine Tabelle mit Wetterdaten, belegt bei mir ca. 6 MByte im Jahr.)
Diese Datenmengen aufzunehmen, sollte für MySQL aber kein Problem darstellen. Die Zugriffszeiten hängen aber von der Abfrage selbst, sowie der Leistungsfähigkeit und Auslastung des Servers ab.
Verwaltung:
Als Graphische Oberfläche dient uns das Tool phpMyAdmin. Es ist bei den meisten Providern vorinstalliert und erlaubt das einfache Verwalten von MySQL. Ansonsten bedient man eine Datenbank mit sogenannten sql-Befehlen. Dazu aber Später mehr.
Tutorial - Wetterdaten und Datenbanken - Teil 2 - Tabelle erstellen
Teil 2 - Tabelle erstellen
Die Wetterdaten werden in einer Tabelle gespeichert. Jede Zeile enthält Datum, Zeit und die Werte der Sensoren zum jeweiligen Zeitpunkt.
(Frühe Versionen dieses Tutorials enthielten noch die Spalte dateid. Diese wurde in einem Update entfernt.)
1. Neue Tabelle erzeugen
Zuerst in phpMyAdmin einloggen. Dann eine neue Tabelle erzeugen:
2. Spalten der Tabelle
Name, Typ und Länge wie im Bild ausfüllen und zusätzlich für die Spalte "datetime" PRIMARY aktivieren:
3. Speichern
Jetzt "speichern" um die Tabelle anzulegen. Diese ist jetzt für das Eintragen von Daten vorbereitet.
Weiter mit Teil 3 - Tabelle füllen
Weiter mit Teil 3 - Tabelle füllen
Optional: Kurze Beschreibung der Spalten und Typen
Name: datetime
Typ: "datetime" für Datum und Zeit im Format "2013-11-25 00:00:00"
Verwendung: Das Datum und die Zeit. Für diese Spalte aktivieren wir PRIMARY unter Index.
Typ: "datetime" für Datum und Zeit im Format "2013-11-25 00:00:00"
Verwendung: Das Datum und die Zeit. Für diese Spalte aktivieren wir PRIMARY unter Index.
Name: temp, hum, pressure, etc.
Typ: "decimal" für Dezimalzahlen mit Kommastellen. Benötigt max. Länge inklusive Anzahl Kommastellen. (Bei Länge (5,1) wären also die Werte -9999.9 bis 9999.9 erlaubt. Passen Sie diese gegebenenfalls an Ihre Bedürfnisse an. z.B: 2 Kommastellen (6,2) für 9999.99)
Typ: "decimal" für Dezimalzahlen mit Kommastellen. Benötigt max. Länge inklusive Anzahl Kommastellen. (Bei Länge (5,1) wären also die Werte -9999.9 bis 9999.9 erlaubt. Passen Sie diese gegebenenfalls an Ihre Bedürfnisse an. z.B: 2 Kommastellen (6,2) für 9999.99)
Verwendung: Die decimal Spalten nehmen die Wetterdaten auf.
Optimierung: (Besten Dank für den Tipp im Kommentar):
Die Wetterwerte könnte man auch in SMALLINT speichern (dann mit zb. 10 multiplizieren). Die Tabelle würde dann einiges weniger Speicherplatz belegen.
Optimierung: (Besten Dank für den Tipp im Kommentar):
Die Wetterwerte könnte man auch in SMALLINT speichern (dann mit zb. 10 multiplizieren). Die Tabelle würde dann einiges weniger Speicherplatz belegen.
Tutorial - Wetterdaten und Datenbanken - Teil 3 - Tabelle füllen
Teil 3 - Tabelle mit Daten füllen
Unsere Tabelle enthält noch keine Daten. Es gibt nun diverse Möglichkeiten, unsere Wetterdaten in die Tabelle zu bekommen. Sehen wir uns einige Wege an.
Mit phpMyAdmin
Mit phpMyAdmin lassen sich Daten über ein Formular einfügen.
1. Einfügen öffnen und einen ersten Datensatz wie im Bild eingeben. Dann auf "OK" klicken.
2. Um den Datensatz anzusehen, "Anzeigen" wählen:
Achtung: Die Tabelle lässt keine doppelten Einträge in der Spalte "datetime" zu. (Die "datetime" jeweils ändern, um einen neuen Datensatz anzulegen)
Ein wenig SQL ?
SQL ist die "Sprache" der Datenbanken. phpMyAdmin bietet einen Bereich wo man sql-Befehle direkt ausführen kann. Wir sehen uns das mal an:
In phpMyAdmin "SQL" öffnen und folgenden Text in das Fenster schreiben/kopieren:
In phpMyAdmin "SQL" öffnen und folgenden Text in das Fenster schreiben/kopieren:
1. Zuerst unsere Tabelle auswählen ...
2. ... dann die Spaltennamen ...
3. ... und die eigentlichen Werte. (in gleicher Reihenfolge wie die Spaltennamen):
INSERT INTO wettertabelle
2. ... dann die Spaltennamen ...
(`datetime`,`temp`,`hum`,`pressure`)
3. ... und die eigentlichen Werte. (in gleicher Reihenfolge wie die Spaltennamen):
VALUES
('2013-11-25 00:05:00','11.9','87','999.4')
Hier der sql-Befehl nochmals komplett:
INSERT INTO wettertabelle
(`datetime`,`temp`,`hum`,`pressure`)
VALUES
('2013-11-25 00:05:00','11.9','87','999.4')
4. Jetzt auf "Ok" klicken, und der Datensatz sollte unter "Anzeigen" zu sehen sein.
Jetzt mit PHP
1. Eine neue php Datei mit folgendem Inhalt erstellen. (z.B. eintragen.php).
2. Zuerst mit der Datenbank verbinden:
$link = mysqli_connect("Hostname", "Username", "Password", "DBname");
(Mit Ihren Zugangsdaten ersetzen)
3. Der $query weisen wir die sql-Befehle von vorhin zu:
$query = "
INSERT INTO wettertabelle
(`datetime`,`temp`,`hum`,`pressure`)
VALUES
('2013-11-25 00:10:00','11.9','87','999.4')
";
4. $query noch ausführen:
mysqli_query($link,$query);
Nochmals die komplette php Datei:
<?php
//db verbindung
$link = mysqli_connect("Hostname", "Username", "Password", "DBname");
$query = "
INSERT INTO wettertabelle
(`datetime`,`temp`,`hum`,`pressure`)
VALUES
('2013-11-25 00:10:00','11.9','87','999.4')
";
mysqli_query($link,$query);
?>
5. Nun die erstellte php Datei auf den Server übertragen und im Browser öffnen. (Achtung: Die Datei erzeugt keinerlei Ausgabe)
6. Zur Kontrolle in phpMyAdmin unter "Anzeigen" nachschauen ob der Eintrag geglückt ist.
Weiter mit Teil 3.1 - Archiv importieren (wswin)
Weiter mit Teil 3.1 - Archiv importieren (wswin)
Tutorial - Wetterdaten und Datenbanken - Teil 3.1 - Tabelle mit Archiv füllen
Teil 3.1 - Tabelle mit Archivdaten füllen
Wetterdaten einzeln von Hand einzupflegen, mag teilweise nötig sein, ist aber nicht sehr aufregend. Mit ein wenig php, kann man aber ganze Archive, ohne großen Aufwand in eine Datenbank übertragen.
Datenquelle: Exportdateien von WsWin
Hier ein Beispiel einer (Monats)Exportdatei von WsWin:
Die php Datei:
Beachte: Es gibt einige Methoden für diese Aufgabe. Der hier aufgezeigte Weg ist vermutlich nicht der optimalste und schnellste, aber m.M. nach einfach nachzuvollziehen und anzupassen. Für einen einmaligen Import großer Datenmengen ist Performance auch nicht unbedingt so wichtig.
1. Die Import Datei
Zuerst die WsWin Export Datei auf den Server laden. (z.B. EXP201311A.CSV)
2. Die php Datei
Eine php Datei mit folgendem Inhalt erstellen, und auf den Server laden:
(Die Variablen $dateiname und $startzeile an Ihre Exportdatei anpassen).
<?php
//Dateiname der Importdatei
$dateiname = "EXP201311A.CSV";
//Anzahl Anfang Zeilen überspringen
$startzeile = 4;
//Die Import Datei öffnen
if (($handle = fopen("$dateiname", "r")) !== FALSE)
{
//zeilenzähler auf 0
$counter = 0;
//Jede Zeile abarbeiten
while (($data = fgetcsv($handle, 1000, ",")) !== FALSE)
{
//counter rauf
$counter++;
//die ersten zeilen überspringen
if($counter >= $startzeile)
{
//das echo (ausgabe)
echo $data[0].", ".$data[1].", ".$data[3].", ".$data[10]. ", ".$data[11]."<br>\n";
}
}
//Import Datei schliessen
fclose($handle);
}
?>
Wird diese php Datei im Browser geöffnet, sollten Inhalte der Import Datei etwa so angezeigt werden:
 |
| Beachte: Datum/Zeit Format und evtl. falsche Spalten |
Vermutlich werden aber noch nicht alle benötigten Felder richtig ausgegeben und das Datumformat stimmt auch nicht.
3. Die richtigen Felder ausgeben
Die Spaltennummern sind aber vermutlich nicht bei allen Benutzern gleich wie bei mir.
Im echo Teil des Scripts wird das array "$data" ausgegeben. Die Zahlen in den [] Klammern dahinter, entsprechen der Reihenfolge der Spalten in der Importdatei.
echo $data[0].", ". $data[1].", ".$data[3].", ".$data[10]. ", ".$data[11]."<br>\n";
(Das Datum ist bei mir in Spalte [0], Zeit in Spalte [1], Temperatur in Spalte [3] etc.)
4. Das Datum formatieren:
Für die Datenbank benötigen wir das Datum im Format "2013-11-25 00:00"
Wir zerlegen das Datum und die Zeit der Import Datei und bauen diese in den Variablen $d1 wieder zusammen.
$splitDate = explode(".", $data[0]); //Das Datum zerlegen
$splitTime = explode(":", $data[1]); //Die Zeit zerlegen
//Das Datum für Spalte datetime (2013-11-25 00:00)
$d1 = $splitDate[2]."-".$splitDate[1]."-".$splitDate[0]." ".$splitTime[0].":".$splitTime[1];
Das echo entsprechend anpassen. Zuerst das Datum $d1, dann wieder die Werte der Spalten:
echo $d1.", ".$data[3].", ".$data[10]. ", ".$data[11]. "<br>\n";
Unsere php Datei sollte nun folgenden Inhalt haben:
<?php
//Dateiname der Importdatei
$dateiname = "EXP201311A.CSV";
//Anzahl Anfang Zeilen überspringen
$startzeile = 4;
//Die Import Datei öffnen
if (($handle = fopen("$dateiname", "r")) !== FALSE)
{
//zeilenzähler auf 0
$counter = 0;
//Jede Zeile abarbeiten
while (($data = fgetcsv($handle, 1000, ",")) !== FALSE)
{
//zeilenzähler rauf
$counter++;
//erst ab dieser Zeile ausgeben
if($counter >= $startzeile)
{
// datum und Zeit zerlegen und neu zusammenbauen
$splitDate = explode(".", $data[0]);
$splitTime = explode(":", $data[1]);
$d1 = $splitDate[2]."-".$splitDate[1]."-".$splitDate[0]." ".$splitTime[0].":".$splitTime[1] ;
//das echo (ausgabe)
echo $d1.", ".$data[3].", ".$data[10]. ", ".$data[11]."<br>\n";
}
}
//Import Datei schliessen
fclose($handle);
}
?>
5. Die Ausgabe kontrollieren:
6. Vom echo zum SQL-Insert
//db verbindung
$link = mysqli_connect("Hostname", "Username", "Password", "DBname");
(Mit Ihren Zugangsdaten ersetzen)
Wir erinnern uns an den SQL-Insert Befehl in Teil 3:
$query = "
INSERT INTO wettertabelle
(`datetime`,`temp`,`hum`,`pressure`)
VALUES
('2013-11-25 00:05:00','11.9','87','999.4')
";
Die Wetterdaten nach "VALUES" mit unseren Variablen (aus dem echo) ersetzen:
$query = "
INSERT INTO wettertabelle
(`datetime`,`temp`,`hum`,`pressure`)
VALUES
('$d1','$data[3]','$data[10]','$data[11]')
";
mysqli_query($link,$query);
7. Zusammenfassung:
Hier nochmals das ganze Script:
<?php //Dateiname der Importdatei $dateiname = "EXP201311A.CSV"; //Anzahl Anfang Zeilen überspringen $startzeile = 4; //db verbindung $link = mysqli_connect("Hostname", "Username", "Password", "DBname"); //Die Import Datei öffnen if (($handle = fopen("$dateiname", "r")) !== FALSE) { //zeilenzähler auf 0 $counter = 0; //Jede Zeile abarbeiten while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) { //counter rauf $counter++; //erst ab dieser Zeile ausgeben if($counter >= $startzeile) { // datum und Zeit zerlegen und neu zusammenbauen $splitDate = explode(".", $data[0]); $splitTime = explode(":", $data[1]); $d1 = $splitDate[2]."-".$splitDate[1]."-".$splitDate[0]." ".$splitTime[0].":".$splitTime[1] ; //das echo (ausgabe) echo $d1.", ".$data[3].", ".$data[10]. ", ".$data[11]."<br>\n"; //die db query $query = " INSERT INTO wettertabelle (`datetime`,`temp`,`hum`,`pressure`) VALUES ('$d1','$data[3]','$data[10]','$data[11]') "; //db query noch ausführen mysqli_query($link,$query); } } //Import Datei schließen fclose($handle); } ?>
Wird diese Datei nun im Browser geöffnet, wird jede Zeile einzeln in die Datenbank importiert. Sie können die neuen Einträge in phpMyAdmin unter "Anzeigen" kontrollieren.
(Die echo Ausgabe können Sie auch entfernen, Sie wird für den Import nicht benötigt.)
(Optional) Mehrere Dateien Importieren
Je nach Umfang der Archive kann es komfortabel sein, mehrere WsWin Monatsdateien auf einmal zu importieren. Sie können dazu das php Script leicht ändern, um ein ganzes Verzeichnis abzuarbeiten.
Vorsicht: Dieses, für große Datenmengen nicht optimale Script, verursacht für einige Sekunden eine hohe Server Auslastung. (Da es jede Zeile einzeln importiert!) Ich würde daher, nicht mehr als ein Jahr auf einmal importieren.
Vorsicht: Dieses, für große Datenmengen nicht optimale Script, verursacht für einige Sekunden eine hohe Server Auslastung. (Da es jede Zeile einzeln importiert!) Ich würde daher, nicht mehr als ein Jahr auf einmal importieren.
1. Wir ändern zuerst die Variable $dateiname in $dateiordner:
Folgender Bereich ...
//Dateiname der Importdatei
$dateiname = "EXP201311A.CSV";
... ersetzen mit: (Verzeichnisname anpassen):
//Ordner mit Importdateien
$dateiordner = "importdateien";
2. Mit scandir wird neu das Verzeichnis ausgelesen und die Dateinamen im array "$allFiles" abgelegt. Und dann mittels einer foreach-Schleife jede Datei einzeln abgearbeitet:
Folgender Bereich ...
//Die Import Datei öffnen
if (($handle = fopen("$dateiname", "r")) !== FALSE)
{
.... ersetzen mit:
//verzeichnis scannen und dateinamen in array speichern
$allFiles = scandir($dateiordner);
//die foreach schleife
foreach ($allFiles as $dateiname) {
//jetzt wie bisher die Datei öffnen
if (($handle = fopen("$dateiordner/$dateiname", "r")) !== FALSE)
{
3. Dann noch am Ende des Scripts, die foreach Schleife mit } schließen:
Folgender Bereich ...
//Import Datei schliessen
fclose($handle);
}
... ersetzen mit:
//Import Datei schliessen
fclose($handle);
}
}
Weiter mit Teil 3.2 - Livedaten importieren (wswin)
Tutorial - Wetterdaten und Datenbanken - Teil 3.2 - Tabelle mit Livedaten füllen
Teil 3.2 - Tabelle mit Livedaten füllen
Diese Methode unterscheidet sich nur geringfügig vom Beispiel in Teil 3.1. Dieses sollte daher vor dieser Anleitung durchgespielt werden.
Möchte man die Tabelle mit unseren Wetterdaten aktuell halten, gibt es diverse Methoden. Hier sei nur eine erklärt.
Es ist anzumerken das die folgende Methode eine Software benötigt welche Dateien Zeitgesteuert über z.B. FTP übertragen kann. Zudem werden cronjobs benötigt.
Um ein möglichst kleines Transfervolumen erreichen zu können, sollte die Software zudem in der Lage sein, bei erfolgreicher Übertragung die Datei zu löschen.
Leider kann ich diesbezüglich keine Empfehlung abgegeben. Ich für meine Zwecke, habe ein kleines Tool programmiert, welches die oben genannten Aufgaben übernimmt. Evtl. kann ich diese Software später freigeben, falls sich hier keine alternative findet. (Kommentare dazu ?)
1. Voraussetzungen
1. Zeitgesteuerte Übertragung von Dateien
2. Cronjobs
2. Datenquelle
 |
| ws_newdata.csv von WsWin |
(Es können aber auch benutzerdefinierte Dateien von WsWin verwendet werden.)
3. Datei übertragen
Die Datei, hier ws_newdata.csv, wird auf den Server übertragen. Die Intervalle können Sie prinzipiell frei wählen, ich gehe hier von 5 Minuten aus. Da diese Datei immer grösser wird, empfiehlt es sich, diese nach einer erfolgreichen Übertragung zu löschen. Somit enthält die Datei immer nur die noch nicht übertragenen Zeilen.
Fällt die Übertragung einmal aus, Puffert WsWin die Zeilen in der ws_newdata.csv bis wieder eine erfolgreiche Übertragung zustande kommt.
Fällt die Übertragung einmal aus, Puffert WsWin die Zeilen in der ws_newdata.csv bis wieder eine erfolgreiche Übertragung zustande kommt.
4. Die Datei importieren
Wir verwenden das selbe Script wie in Teil 3.1. Speichern wir es in einer neuen php Datei erneut ab
In dieser neuen php Datei, müssen wir jedoch noch den Dateinamen (der zu importierenden Datei), die Startzeile und evtl. die Spaltennummern in der Query anpassen:
//Dateiname der Importdatei
$dateiname = "ws_newdata.csv";
//Anzahl Anfang Zeilen überspringen
$startzeile = 3;
Auch die Spaltennummern in der query auf die richtigen Werte überprüfen:
$query = "
INSERT INTO wettertabelle
(`dateid`,`datetime`,`temp`,`hum`,`pressure`)
VALUES
('$d1','$data[3]','$data[10]','$data[11]')
";
mysqli_query($link,$query);
5. Die Datei löschen (Optional)
Wir haben sichergestellt das die Tabelle keine doppelten Einträge aufnimmt. Dennoch sollten wir verhindern, dass importierte Dateien nicht noch einmal aufgerufen werden. Wir löschen also nach einem erfolgreichem Import die ws_newdata.csv
//Import Datei schließen
fclose($handle);
unlink('ws_newdata.csv');
?>
6. cronjob/crontab
Unsere neue php Importdatei, muss nun in Intervallen aufgerufen/geöffnet werden.
Wir erstellen daher einen Cronjob, welcher die vorhin erstellte .php Datei, in Intervallen aufruft. Dabei muss sichergestellt sein, das jede Datei importiert wird, bevor jeweils eine neue eintrifft. Wir überprüfen ja die Übertragung, aber nicht das eigentliche Eintragen. Ich führe daher meine Datei jede Minute aus.
Beachte: Die Erstellung von Cronjobs ist nicht bei jedem Host Provider gleich. Kontaktieren Sie bei Unklarheiten Ihren Provider.
Hier ein Beispiel eines cronjobs:
Der Befehl im Detail:
/usr/bin/php5 /home/www/webxx1/html/wetterseite/import/import-live.php >& /dev/null
(Dateiname und Verzeichnis anpassen)
keine Cronjobs möglich ?
Es gibt diverse Software und auch Webdienste, welche das Aufrufen der Datei in Intervallen übernehmen können. Ich möchte dazu aber keine Empfehlung abgeben.
Tutorial - Wetterdaten und Datenbanken - Teil 4 - Datenbank Abfragen
Teil 4 - Datenbank Abfragen
In diesem Teil werde ich einige Datenbank Abfragen aufzeigen.
In Teil 3 haben wir den sql-Befehl "INSERT INTO" verwendet, um Daten in die Tabelle einzufügen. Um Daten aus der Datenbank "herauszuholen", verwenden wir nun den Befehl "SELECT".
Grundlagen:
In Teil 3 haben wir den sql-Befehl "INSERT INTO" verwendet, um Daten in die Tabelle einzufügen. Um Daten aus der Datenbank "herauszuholen", verwenden wir nun den Befehl "SELECT".
Hier ein Beispiel eines einfachen SELECT-Befehl:
SELECT temp FROM wettertabelle
(Diese Abfrage würde sämtliche Zeilen der Spalte "temp" aus der Tabelle "wettertabelle" ausgeben.)
Ein erster Versuch mit phpMyAdmin:
Wir verwenden für unseren ersten Versuch die SQL Eingabe von phpMyAdmin, und geben die Beispiel Abfrage ein:
1. Testen Sie folgende Abfrage:
1. Testen Sie folgende Abfrage:
SELECT temp FROM wettertabelle
 |
| sql-Befehl in phpMyAdmin |
Sie sehen nach der Ausführung, dass MySQL die Spalte "temp" ausgegeben hat:
2. Oft werden mehrere Spalten einer Tabelle benötigt. Versuchen Sie mit diesem SQL-Befehl zusätzlich die Spalte "datetime" auszugeben.
SELECT datetime, temp FROM wettertabelle
3. Sie können auch einfach alle Spalten ausgeben lassen:
SELECT * FROM wettertabelle
Tutorial - Wetterdaten und Datenbanken - Teil 4.1 - Abfragen mit SQL
Teil 4.1 - Abfragen mit SQL
Hier einige oft benutzte Abfragen kurz erklärt.
1. Spalten umbennenen
Manchmal kann es auch Hilfreich sein, Spalten mit "AS" umzubenennen:
SELECT datetime AS Datum, temp AS Temperatur FROM wettertabelle
2. Das Datum zerlegen
Ein wichtiger Teil dürfte die Eingrenzung der Ausgabe nach Datumskriterien sein. Versuchen wir Datum und Zeit zu trennen und in separaten Spalten auszugeben:
SELECT DATE(datetime), TIME(datetime), temp FROM wettertabelle
Die Ausgabe:
Ein weiteres Beispiel:
SELECT YEAR(datetime), HOUR(datetime), temp FROM wettertabelle
3. Ausgabe mit WHERE eingrenzen
Mit WHERE lässt sich die Ausgabe nach beliebigen Kriterien Filtern:
SELECT DATE(datetime), TIME(datetime), temp FROM wettertabelle
WHERE temp < 0
... hier zusammen mit einer Datumsfunktion
SELECT DATE(datetime), TIME(datetime), temp FROM wettertabelle WHERE YEAR(datetime) = '2013'
... oder beides zusammen:
SELECT DATE(datetime), TIME(datetime), temp FROM wettertabelle WHERE YEAR(datetime) = '2013' AND temp < 0
4. Sortierung
Versuchen wir mit ORDER BY, die niedrigste Temperatur zu finden:
SELECT temp FROM wettertabelle
ORDER BY temp ASC
und jetzt die höchste:
SELECT temp FROM wettertabelle
ORDER BY temp DESC
5. Die Anzahl Zeilen limitieren
Mit LIMIT lässt sich die Ausgabe auf eine bestimmte Anzahl begrenzen.Möchte man die Ausgabe auf z.B 10 Zeilen begrenzen:
SELECT temp FROM wettertabelle
LIMIT 10
(hier werden die Zeilen 1-10 ausgegeben)
Man kann bei LIMIT, auch die "Anfangszeile" mitgeben:
SELECT temp FROM wettertabelle
LIMIT 11,10
(hier werden die Zeilen 11-20 ausgegeben)
6. (Gruppen)Funktionen
Versuchen wir die Durchschnittstemperatur zu ermitteln:
SELECT AVG(temp) FROM wettertabelle
Maximale Temperatur:
SELECT MAX(temp) FROM wettertabelle
Minimale Temperatur:
SELECT MIN(temp) FROM wettertabelle
Anzahl Zeilen:
SELECT COUNT(*) FROM wettertabelle
7. Gruppen
Mit GROUP BY lassen sich leicht Zusammenfassungen erstellen.
SELECT AVG(temp) FROM wettertabelle
GROUP BY YEAR(datetime)
Hier wäre noch die Ausgabe des jeweiligen Jahres sinnvoll:
SELECT YEAR(datetime), AVG(temp) FROM wettertabelle
GROUP BY YEAR(datetime)
Hier werden Monatsdurchschnitte für alle Jahre ausgeben:
SELECT AVG(temp) FROM wettertabelle
GROUP BY MONTH(datetime)
Hier werden Monatsdurchschnitte für jedes Jahr getrennt ausgeben:
SELECT AVG(temp) FROM wettertabelle
GROUP BY YEAR(datetime), MONTH(datetime)
Hier werden Min/Max/Avg für jeden Tag ausgegeben:
SELECT MIN(temp), MAX(temp), AVG(temp) FROM wettertabelle
GROUP BY DATE(datetime)
Achtung 1: Diese Spalte "temp" macht so keinen Sinn.
SELECT temp FROM wettertabelle
GROUP BY YEAR(datetime)
8. Reihenfolge
Für die Aufgezeigten gilt:
SELECT
FROM
WHERE
GROUP BY
HAVING
ORDER BY
LIMIT
Weiter mit Teil 4.2 - Abfragen mit PHP
Tutorial - Wetterdaten und Datenbanken - Teil 4.2 - Abfragen mit PHP
Teil 4.2 - Abfragen mit PHP
Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:
http://www.pscl.chUm die Werte der Tabelle auf einer Webseite anzuzeigen, können wir html und php verwenden.
1. Zuerst mit der Datenbank verbinden (mysqli):
<?php
//db verbindung
$link = mysqli_connect("Hostname", "Username", "Password", "DBname");
(Mit Ihren Zugangsdaten ersetzen)
2. Die sql-Query:
Dann die sql-Abfrage in $query:
$query = " SELECT datetime, temp FROM wettertabelle ORDER BY temp DESC LIMIT 10 ";
3. Die Ausgabe
$result = mysqli_query($link,$query);
Mit dieser while-Schlaufe werden dann alle Zeilen mit echo ausgegeben:
while($row = mysqli_fetch_array($result))
{
echo $row['temp'];
}
4. Resourcen freigeben
mysqli_free_result($result);
?>
4. Zusammenfassung:
<?php
//db verbindung
$link = mysqli_connect("Hostname", "Username", "Password", "DBname");
//db sql abfrage
$query = "
SELECT datetime, temp
FROM wettertabelle
ORDER BY temp DESC
LIMIT 10
";
//resultat verfügbar machen
$result = mysqli_query($link,$query);
//Zeilen ausgeben
while($row = mysqli_fetch_array($result))
{
echo $row['temp'];
}
// ressourcen freigeben
mysqli_free_result($result);
?>
5. Ausgabe anpassen:
5.1 Variablen Verbinden:
echo "Datum/Zeit: ".$row['datetime']." Temperatur: ".$row['temp']."<br>\n";
5.2 Beispiel mit Ausgabe mit einer html Tabelle:
//Tabelle öffnen
echo "<table border=\"1\"> \n";
//Überschriftenzeile ausgeben
echo "<td>Datum und Zeit</td><td>Temperatur</td>\n";
//Zeilen ausgeben
while($row = mysqli_fetch_array($result))
{
echo "<tr>\n";
echo "<td>".$row['datetime']."</td>"."<td>".$row['temp']."</td>\n";
echo "</tr>\n";
}
//Tabelle schließen
echo "</table>\n";
Beachten Sie in Zeile 2 wie die Anführungszeichen mit \ maskiert werden müssen. Diese werden ansonsten nicht ausgegeben und brechen die Ausgabe vorzeitig ab. "1" zu \"1\"
5.3 Einzelne Werte Darstellen:
Oft möchte man in einer bestehenden Webseite die aktuellen Werte darstellen. Zuerst passen wir die sql-Abfrage so an, dass jeweils nur der aktuellste ausgegeben wird :
$query = " SELECT temp, hum, pressure FROM wettertabelle ORDER BY datetime DESC LIMIT 1 ";
Wir möchten die Werte evtl. auch mehrmals auf der Seite einsetzen. Die Abfrage dabei jedesmal neu ausführen zu lassen, wäre nicht optimal. Wir werden also die Werte nicht sofort mit echo ausgeben, sonden in eine neue Variable überführen. Diese Variable können wir dann bequem überall auf der Seite ausgeben:
while($row = mysql_fetch_array($result))
{
$temperatur_aktuell = $row['temp'];
$luftfeuchte_aktuell = $row['hum'];
$luftdruck_aktuell = $row['pressure'];
}
Ausgegeben werden die Werte dann z.B. so:
Die aktuelle Temperatur: <?php echo $temperatur_aktuell; ?>
Unser php script erzeugt nun keine Ausgabe mehr. Es kann also in den Header der bestehenden Website eingefügt werden. Die Abfrage wird dann zu Beginn ausgeführt und die Daten stehen in den Variablen bereit.
Hier ein Besipiel mit html:
<html> <head> <?php //db verbindung $link = mysqli_connect("Hostname", "Username", "Password", "DBname"); //db sql abfrage $query = " SELECT temp, hum, pressure FROM wettertabelle ORDER BY temp DESC LIMIT 10 "; //resultat verfügbar machen $result = mysqli_query($link,$query); //werte in variablen speichern while($row = mysqli_fetch_array($result)) { $temperatur_aktuell = $row['temp']; $luftfeuchte_aktuell = $row['hum']; $luftdruck_aktuell = $row['pressure']; } // ressourcen freigeben mysqli_free_result($result); ?> <title>Unsere Wetterseite </title> </head> <body> <h1>Willkommen auf unserer Wetterseite:</h1> Die aktuelle Temperatur beträgt: <?php echo $temperatur_aktuell; ?> <br> blabla...<br><br> blablabla...<br><br><br><br> Hier alle aktuellen Werte:<br> <?php echo $temperatur_aktuell; ?><br> <?php echo $luftfeuchte_aktuell; ?><br> <?php echo $luftdruck_aktuell; ?><br> </body> </html>
Eine weitere Möglichkeit ist die Ausgabe der Daten mit einem Diagramm.
Siehe Tutorial: Diagramme mit amcharts
Tutorial - Wetterdaten Diagramme mit amcharts - Teil 1 - Grundlagen
Tutorial - Wetterdaten mit amcharts
Einleitung:
Für dieses Beispiel verwende ich die stockcharts. Diese bieten einige Vorteile in Bezug auf die Darstellung grosser Datenmengen und erlauben auch mehrere "panels" in einem Diagramm.
Hier ein Bild von einem Diagramm mit 2 Panels und 3 Graphen mit der Beschreibung wichtiger Elemente:
 |
| Panel 1 mit Temperatur und Taupunkt. Panel 2 mit Luftfeuchtigkeit. |
Installation und Test
Installation von amstockchart:
Für dieses Beispiel wird Version 3.2 verwendet.
Für dieses Beispiel wird Version 3.2 verwendet.
1. Download von "JavaScript Stock Chart" (http://www.amcharts.com/download/)
2. Entpacken und in ein Verzeichnis auf den Webserver laden.
Test:
1. Ein Beispiel im Ordner "samples" öffnen.
(Evtl. müssen in den Beispieldateien die Pfade zu den .js Dateien angepasst werden.)
(Evtl. müssen in den Beispieldateien die Pfade zu den .js Dateien angepasst werden.)
Ein erster einfacher Chart
Dieses erste Diagramm enthält nur ein "Panel" mit einem "Graph". Es stellt nur den Wert Temperatur dar. Später kommen weitere dazu (hum, pressure).
Die Wetterdaten kommen meist aus einer Datenbank (MySQL etc.) In diesem Beispiel werden die Daten aber noch innerhalb des amchart Script ausgelesen. (Datenbankanbindung wir später in Teil 3 beschrieben.)
Die Wetterdaten kommen meist aus einer Datenbank (MySQL etc.) In diesem Beispiel werden die Daten aber noch innerhalb des amchart Script ausgelesen. (Datenbankanbindung wir später in Teil 3 beschrieben.)
1. Diagramm Script
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="amcharts/style.css" type="text/css">
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script src="amcharts/amstock.js" type="text/javascript"></script>
<script type="text/javascript">
// Start amcharts
// Chart Daten
var chartData = [ Hier kommen die Daten rein ];
// Start StockChart
AmCharts.makeChart("chartdiv",
{
//Chart Einstellungen
type: "stock",
pathToImages: "../amcharts/images/",
//Datesets definieren
dataSets:
[
{
fieldMappings:
[
{
fromField: "t",
toField: "t"
}
],
dataProvider: chartData,
categoryField: "date",
}
],
//Zeitachse (minPeriod: "mm" für minuten "DD" für Tage)
categoryAxesSettings:
{
minPeriod: "mm",
maxSeries: 1000
},
//Chart Panels
panels:
[
{
title: "Panel 1",
percentHeight: 100,
//Panel graphs (Datenlinie)
stockGraphs:
[
{
id: "g1",
title: "Temperature",
valueField: "t",
lineColor: "#cc0000",
negativeLineColor: "#0099CC",
useDataSetColors: false,
fillColors: ["#cc0000","#ffffff"],
negativeFillColors: ['#0099CC', '#ffffff'],
fillAlphas: 0.5
}
],
//Panel Legende
stockLegend:
{
valueTextRegular: "[[value]]",
markerType: "square"
}
}
],
//chart scrollbar
chartScrollbarSettings:
{
enabled: false
},
//Chart Cursor
chartCursorSettings:
{
valueBalloonsEnabled: true,
graphBulletSize: 1
},
//chart period selector
periodSelector:
{
inputFieldsEnabled: false,
periods:
[
{
period: "MAX",
label: "MAX"
}
]
},
// Einstellungen für alle Panels
panelsSettings:
{
usePrefixes: false
}
}
);
</script>
</head>
<body>
<div id="chartdiv" style="width:100%; height:600px;"></div>
</body>
</html>
(Evtl. noch die Pfade zum amcharts Ordner anpassen)
2. Daten
var chartData = [ Hier kommen die Daten rein ];Eine Datenzeile (hier deren zwei) sieht in diesem Beispiel so aus:
{date: new Date(2013,10,25,0,0),t:3.7,h:90.0,p:1022.9}, {date: new Date(2013,10,25,0,5),t:3.7,h:90.0,p:1022.9}
Zuerst das Datum (25. Nov. 2013) und die Zeit 00:00 und 00:05. Dann die Werte für Temperatur (t), humity (h) und pressure (p) Die einzelnen Datenzeilen werden mit einem abschließenden Komma getrennt.
Zudem sollte folgendes berücksichtigt werden :
- Im javascript Datum ist der Monat Januar nicht 1 sondern 0. (daher Nov und nicht Okt.)
- Kein Trennkomma nach dem letzten Datensatz
Hier einige Datenzeilen an entsprechender Stelle im Diagrammscript:
var chartData = [
{date: new Date(2013,10,25,0,0),t:3.7,h:90.0,p:1022.9},
{date: new Date(2013,10,25,0,5),t:3.6,h:90.0,p:1022.9},
{date: new Date(2013,10,25,0,10),t:3.6,h:90.0,p:1022.9},
{date: new Date(2013,10,25,0,15),t:3.6,h:90.0,p:1022.9},
{date: new Date(2013,10,25,0,20),t:3.6,h:90.0,p:1022.9},
{date: new Date(2013,10,25,0,25),t:3.5,h:90.0,p:1022.9},
{date: new Date(2013,10,25,0,30),t:3.5,h:89.0,p:1023.1},
{date: new Date(2013,10,25,0,35),t:3.2,h:87.0,p:1023.1},
{date: new Date(2013,10,25,0,40),t:3.2,h:86.0,p:1023.1},
{date: new Date(2013,10,25,0,45),t:3.1,h:85.0,p:1023.1},
{date: new Date(2013,10,25,0,50),t:2.9,h:85.0,p:1023.3},
{date: new Date(2013,10,25,0,55),t:2.8,h:84.0,p:1023.3},
{date: new Date(2013,10,25,1,0),t:2.6,h:84.0,p:1023.3}
];Nun sollte das Diagramm getestet werden.
 |
| Das fertige Diagramm |
Gegebenenfalls noch anpassen:
minPeriod:
Die kleinste angezeigte Periode ohne zu Gruppieren. Also "mm" für Minuten und "DD" für Tage.
maxSeries:
maximale Anzahl angezeigte Datenpunkte, ohne zu Gruppieren.
//Chart categorie Axis Settings
categoryAxesSettings:
{
minPeriod: "mm",
maxSeries: 10000
},
Weiter mit Teil 2 - Datenquelle: Textdatei
Weiter mit Teil 3 - Datenquelle: MySQL Datenbank
Tutorial - Wetterdaten Diagramme mit amcharts - Teil 1.1 - Diagramm mit mehreren Panels
Teil 1.1 - Diagramm mit mehreren Panels
Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:
http://www.pscl.ch1. Das Diagramm aus Teil 1
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="amcharts/style.css" type="text/css"> <script src="amcharts/amcharts.js" type="text/javascript"></script> <script src="amcharts/serial.js" type="text/javascript"></script> <script src="amcharts/amstock.js" type="text/javascript"></script> <script type="text/javascript"> // Start amcharts // Chart Daten var chartData = [ Hier kommen die Daten rein ]; // Start StockChart AmCharts.makeChart("chartdiv", { //Chart Einstellungen type: "stock", pathToImages: "../amcharts/images/", //Datesets definieren dataSets: [ { fieldMappings: [ { fromField: "t", toField: "t" } ], dataProvider: chartData, categoryField: "date", } ], //Zeitachse (minPeriod: "mm" für minuten "DD" für Tage) categoryAxesSettings: { minPeriod: "mm", maxSeries: 1000 }, //Chart Panels panels: [ { title: "Panel 1", percentHeight: 100, //Panel graphs (Datenlinie) stockGraphs: [ { id: "g1", title: "Temperature", valueField: "t", lineColor: "#cc0000", negativeLineColor: "#0099CC", useDataSetColors: false, fillColors: ["#cc0000","#ffffff"], negativeFillColors: ['#0099CC', '#ffffff'], fillAlphas: 0.5 } ], //Panel Legende stockLegend: { valueTextRegular: "[[value]]", markerType: "square" } } ], //chart scrollbar chartScrollbarSettings: { enabled: false }, //Chart Cursor chartCursorSettings: { valueBalloonsEnabled: true, graphBulletSize: 1 }, //chart period selector periodSelector: { inputFieldsEnabled: false, periods: [ { period: "MAX", label: "MAX" } ] }, // Einstellungen für alle Panels panelsSettings: { usePrefixes: false } } ); </script> </head> <body> <div id="chartdiv" style="width:100%; height:600px;"></div> </body> </html>
2. fieldMappings
fieldMappings:
[
{
fromField: "t",
toField: "t"
}
],
Wir fügen den Wert "h" aus dem Datenbereich hinzu.(Luftfeuchtigkeit)
fieldMappings:
[
{
fromField: "t",
toField: "t"
},
{
fromField: "h",
toField: "h"
}
],
3. Panels
//Chart Panels
panels:
[
{
title: "Panel 1",
percentHeight: 100,
//Panel graphs (dataline)
stockGraphs:
[
{
id: "g1",
title: "Temperature",
valueField: "t",
lineColor: "#cc0000",
negativeLineColor: "#0099CC",
useDataSetColors: false,
fillColors: ["#cc0000","#ffffff"],
negativeFillColors: ['#0099CC', '#ffffff'],
fillAlphas: 0.5
}
],
// panel Legend
stockLegend:
{
valueTextRegular: " ",
markerType: "square"
}
}
],
Fügen wir ein zweites Panel dazu:
//Chart Panels panels: [ { title: "Panel 1", percentHeight: 100, //Panel graphs (dataline) stockGraphs: [ { id: "g1", title: "Temperature", valueField: "t", lineColor: "#cc0000", negativeLineColor: "#0099CC", useDataSetColors: false, fillColors: ["#cc0000","#ffffff"], negativeFillColors: ['#0099CC', '#ffffff'], fillAlphas: 0.5 } ], // panel Legend stockLegend: { valueTextRegular: "[[value]]", markerType: "square" } }, { title: "Panel 2", percentHeight: 100, //Panel graphs (dataline) stockGraphs: [ { id: "g2", title: "Humity", valueField: "h", lineColor: "#0099cc", useDataSetColors: false, fillColors: ["#0099cc","#ffffff"], fillAlphas: 0.5 } ], // panel Legend stockLegend: { valueTextRegular: "[[value]]", markerType: "square" } } ],
4. Fertig.
Tutorial - Wetterdaten Diagramme mit amcharts - Teil 1.2 - Panel mit mehreren Graphen
Teil 1.2 - Panel mit mehreren Graphen
Für diesen Teil verwende ich zusätzlich Taupunkt Werte (hier: "dp"). Diese müssen im Datenbereich vorhanden sein.1. Das Diagramm aus Teil 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="amcharts/style.css" type="text/css">
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script src="amcharts/amstock.js" type="text/javascript"></script>
<script type="text/javascript">
// Start amcharts
// Chart Daten
var chartData = [ Hier kommen die Daten rein ];
// Start StockChart
AmCharts.makeChart("chartdiv",
{
//Chart Einstellungen
type: "stock",
pathToImages: "../amcharts/images/",
//Datesets definieren
dataSets:
[
{
fieldMappings:
[
{
fromField: "t",
toField: "t"
}
],
dataProvider: chartData,
categoryField: "date",
}
],
//Zeitachse (minPeriod: "mm" für minuten "DD" für Tage)
categoryAxesSettings:
{
minPeriod: "mm",
maxSeries: 1000
},
//Chart Panels
panels:
[
{
title: "Panel 1",
percentHeight: 100,
//Panel graphs (Datenlinie)
stockGraphs:
[
{
id: "g1",
title: "Temperature",
valueField: "t",
lineColor: "#cc0000",
negativeLineColor: "#0099CC",
useDataSetColors: false,
fillColors: ["#cc0000","#ffffff"],
negativeFillColors: ['#0099CC', '#ffffff'],
fillAlphas: 0.5
}
],
//Panel Legende
stockLegend:
{
valueTextRegular: "[[value]]",
markerType: "square"
}
}
],
//chart scrollbar
chartScrollbarSettings:
{
enabled: false
},
//Chart Cursor
chartCursorSettings:
{
valueBalloonsEnabled: true,
graphBulletSize: 1
},
//chart period selector
periodSelector:
{
inputFieldsEnabled: false,
periods:
[
{
period: "MAX",
label: "MAX"
}
]
},
// Einstellungen für alle Panels
panelsSettings:
{
usePrefixes: false
}
}
);
</script>
</head>
<body>
<div id="chartdiv" style="width:100%; height:600px;"></div>
</body>
</html>
2. fieldMappings
fieldMappings:
[
{
fromField: "t",
toField: "t"
}
],
Wir fügen Wert "dp" aus dem Datenbereich hinzu. (Taupunkt muss im Datenbereich vorhanden sein).
fieldMappings:
[
{
fromField: "t",
toField: "t"
},
{
fromField: "dp",
toField: "dp"
}
],
3. Graphs
stockGraphs:
[
{
id: "g1",
title: "Temperature",
valueField: "t",
lineColor: "#cc0000",
negativeLineColor: "#0099CC",
useDataSetColors: false,
fillColors: ["#cc0000","#ffffff"],
negativeFillColors: ['#0099CC', '#ffffff'],
fillAlphas: 0.5
}
]
Fügen wir einen zweiten dazu:
stockGraphs:
[
{
id: "g1",
title: "Temperature",
valueField: "t",
lineColor: "#cc0000",
negativeLineColor: "#0099CC",
useDataSetColors: false,
fillColors: ["#cc0000","#ffffff"],
negativeFillColors: ['#0099CC', '#ffffff'],
fillAlphas: 0.5
},
{
id: "g2",
title: "Dewpoint",
valueField: "dp",
lineColor: "#cc0000",
negativeLineColor: "#0099CC",
useDataSetColors: false,
fillColors: ["#cc0000","#ffffff"],
negativeFillColors: ['#0099CC', '#ffffff'],
fillAlphas: 0.5
}
]
Fertig:
Beachten: Beide Graphen benutzen derzeit dieselbe Achse. Unterschiedliche Einheiten machen hier keinen Sinn (zB. Luftdruck). Daher habe ich eine 2. Temperatur (Taupunkt) verwendet. Mehrere Achsen sind aber auch möglich.
4. Mehrere Achsen (ValueAxes)
Das betreffende Panel wird mit "valueAxes:" erweitert. Darin werden zwei Achsen definiert. (p2va1 auf der linken und p2va2 auf der rechten Seite des Diagramms)
{
title: "Panel 2",
percentHeight: 50,
valueAxes:
[
{
id: "p2va1",
position: "left"
},
{
id: "p2va2",
color:"#1CB30B",
position: "right"
}
],
...
Nun können wir die Achsen den Graphen zuweisen: (Hier)
stockGraphs:
[
{
id: "g3",
title: "Hum",
valueField: "h",
valueAxis: "p2va1",
lineColor: "#cc0000",
negativeLineColor: "#0099CC",
useDataSetColors: false,
fillColors: ["#cc0000","#ffffff"],
negativeFillColors: ['#0099CC', '#ffffff'],
fillAlphas: 0.5
},
{
id: "g4",
title: "Pressure",
valueField: "p",
valueAxis:"p2va2",
lineColor: "#1CB30B",
useDataSetColors: false,
fillColors: ["#1CB30B","#ffffff"],
fillAlphas: 0
}
],
Fertig :
Tutorial - Wetterdaten Diagramme mit amcharts - Teil 1.3 - Diagramm Eigenschaften
Teil 1.3 - Diagramm Eigenschaften
Hier einige Diagramm Elemente und Eigenschaften erklärt:
- categoryAxesSettings (X-Achse, Zeitachse)
categoryAxesSettings:
{
//kleinste angezeigte Periode ("mm" für Minuten "DD" für Tage)
minPeriod: "mm",
//maximal angezeigte Datenpunkte bevor gruppiert wird
maxSeries: 1000,
//oder z.B Schriftgrösse etc.
fontSize: 8
},
Die Zeitachse lässt sich für einzelne Panels auch ausblenden:
title: "Pressure",
showCategoryAxis: false,
percentHeight: 50,
...
- valueAxes
valueAxes:
[
{
//id um diese achse dem betreffenden graph zuweisen zu können
id: "p2va2",
// dann beliebige Elemente
color:"#1CB30B",
position: "right"
}
],
(Im graph zuweisen nicht vergessen:)
valueAxis: "p2va2",
Mit "maximum" und "minimum" kann man den immer sichtbaren Bereich festlegen. Ansonsten würde sich der Bereich an die Werte anpassen. (z.B für Windrichtungen 0-360°)
valueAxes: [ { id: "p3va2", color:"#1CB30B", position: "right" maximum: 360, minimum: 0 } ],
- guides
valueAxes: [ { id: "p4va1", color:"#1CB30B", position: "right", guides: [ { value: 10, label: "Grenzwert" } } } ],
- stockLegend
Mit "stockLegend" lässt sich für jedes Panel einzeln die Legende ändern:
stockLegend:
{
// Ausgabe (z.B: 12 km/h)
valueTextRegular: "[[VALUE]]km/h",
//Das Symbol
markerType: "circle"
}
- panelSettings
panelSettings gelten für alle Panels:
panelsSettings:
{
// Prefixes würden Werte über 1000 mit 1K abkürzen.
usePrefixes: false,
// Zahlenformat ändern auf 1.000,0
numberFormatter: {precision:-1, decimalSeparator:',', thousandsSeparator:'.'}
// Zahlenformat ändern auf 1'000.0
numberFormatter: {precision:-1, decimalSeparator:'.', thousandsSeparator:'\''}
}
- valueAxesSettings (Y-Achse)
valueAxesSettings gelten für alle Panels und Graphen:
valueAxesSettings:{
// Schriftgrösse
fontSize: 9,
//Schriftfarbe
color:"#cccccc"
},
Abonnieren
Posts (Atom)