Tutorial - Wetterdaten und Datenbanken - Teil 4.1 - Abfragen mit SQL

Teil 4.1 - Abfragen mit SQL


Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:

http://www.pscl.ch


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


Die wichtigsten Funktionen sind avg, min, max, sum und count. Sie sind eigentlich nur mit Gruppen sinnvoll. (siehe nächster Abschnitt: Gruppen).

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. 
Sollen Beispielsweise die Jahresdurchschnittstemperaturen ermittelt werden, müssen die Jahre gruppiert werden.

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


Wichtig: Werden die obigen "Klauseln" kombiniert, muss eine bestimmte Reihenfolge eingehalten werden.

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.ch


Um 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


Wir machen das Resultat in $result verfügbar:

$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


Zum Schluss die Ressourcen 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:


Die Ausgabe kann sehr vielfältig erfolgen. Um die Möglichkeiten aufzuzeigen, hier ein einige Beispiele:



5.1 Variablen Verbinden:


Um die Abfrageergebnisse übersichtlicher ausgeben zu können, erweitern wir das echo um Spaltennamen und einen Zeilenumbruch. Textelemente (z.B. "Datum/Zeit: ") und Variablen (z.B. $row['datetime']) werden mit einem Punkt (.) verbunden. Der Zeilenumbruch in html (<br>) sowie für den Quelltext (\n).

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


Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:

http://www.pscl.ch

Einleitung:


Ein Tutorial über die Darstellung von Wetterdaten mit amcharts oder amstockcharts.

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.

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.)


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.)


1. Diagramm Script 


Erstellt eine php Datei mit folgendem Inhalt:

<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

Dieses Diagramm enthält aber noch keine Daten. Der entsprechende Bereich ist noch leer.

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.ch

1. Das Diagramm aus Teil 1


Das ist das Diagrammscript aus Teil 1. An zwei Orten müssen wir Änderungen vornehmen.

<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


Im Bereich "fieldMappings" muss ein neuer Wert erst zugewiesen werden:

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


Im Bereich "panels", werden die Panels definiert:

//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


Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:

http://www.pscl.ch


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


Das ist das Diagrammscript aus Teil 1. An zwei Orten müssen wir Änderungen vornehmen.


<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


Im Bereich "fieldMappings" muss ein neuer Wert erst zugewiesen werden:

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


Im Bereich "stockGraphs", werden die Graphen definiert:

                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


Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:

http://www.pscl.ch


Hier einige Diagramm Elemente und Eigenschaften erklärt:


- categoryAxesSettings (X-Achse, Zeitachse)


categoryAxesSettings gelten für alle Panels.

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 benötigten wir bereits im Teil 1.2, um eine zweite Achse hinzuzufügen. Wir können damit aber auch umfangreich formatieren:

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


Innerhalb von valueAxes (siehe oben) lassen sich mit "guides" auch Linien ausgeben. (z.B für Grenzwerte)


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"

},






Tutorial - Wetterdaten Diagramme mit amcharts - Teil 2 - Datenquellen: Text

Teil 2 - Datenquellen: Text


Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:

http://www.pscl.ch


Als externe Datenquellen eignen sich vor allem Datenbanken wie MySQL. Aber auch Textdateien können eingebunden werden.

Inhalt chartData:

Textdateien können beispielsweise mittels php "include" Befehl, an entsprechender Stelle geladen werden. 

var chartData = [  <?php include ("wetterdaten.txt") ?>   ];


Inhalt Textdatei:

Inhalt der Datei wetterdaten.txt:

{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} 


Textdateien wie die wetterdaten.txt, können mit WsWin direkt erzeugt werden. Siehe Teil 2.1

Weiter mit Teil 3 - Datenquelle: MySQL Datenbank