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