openmeteo.com

Messwerten und Graphen in Ihre Webseite einbinden

Alle von openmeteo.com erfassten Messwerte können über unsere API abgerufen werden. Die API können sie entweder mit selbst geschriebenen Programmen ansprechen oder sie nutzen unsere Javascript-Library. In diesem Fall sind keine Programmierkenntnisse zum Einbinden der Daten auf Ihrer Webseite nötig.

Die Javascript-Library kann sowohl auf privaten als auch kommerziellen Webseiten kostenfrei eingebunden werden. Jedoch erwarten wir, dass sie a) einen Link auf unsere Startseite openmeteo.com sowie b) auf die entsprechend Unterseite mit den einzelnen Messwerten der Station setzen.

Javascript

Im <head>-Bereich Ihrer Webseite müssen folgende Javascript-Dateien geladen werden.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://static.openmeteo.com/js/jquery.flot.min.js"></script> 
<!--[if lte IE 8]><script type="text/javascript" src="http://static.openmeteo.com/js/excanvas.min.js"></script><![endif]--> 
<script type="text/javascript" src="http://static.openmeteo.com/js/jquery.flot.fillbetween.min.js"></script>

<script type="text/javascript" src="http://static.openmeteo.com/js/openmeteo-1.0.min.js"></script>
<script type="text/javascript" src="http://static.openmeteo.com/js/jquery.flot.windvane.min.js"></script>
Die Openmeteo Javascript-Library baut auf jQuery auf. Falls Sie bereits jQuery in Version 1.x nutzen, müssen sie Zeile 1 nicht zwingend einbinden.
Zum generieren der Graphen ist das Flot jQuery Plugin erforderlich (Zeile 2,3,4 und 7). Zeile 3 stellt die Kompatibilität zum Internet Explorer 8 oder älter sicher.
Die eigentliche Openmeteo Javascript Bibliothek wird in Zeile 6 geladen.

Zum Starten der Javascript-Funktionen müssen diese im <body>-Tag aufgerufen werden.

<body onLoad="openmeteoget('refresh');">

Einzelne Messwerte

Beipiel 1 - Anemometer


<div id="openmeteoreport:wind:/observations/openmeteo/1001/wind0">
   <h3>Wind</h3>
   <p>
      <span id="datetime"></span><br>
      <span id="speed_avg:kn:colorize"></span>
      <span id="speed_avg:bft"></span><br/>
      <span id="direction:short"></span><br/>
      <span id="direction:windvane" style="width:50px; height:50px; color:#8AD2E6;"></span>
   </p>
</div>

Wind



N

In diesem Beispiel wird der letze verfügbare Messwert des Anemometer wind0 der Wetterstation mit der StationID 1001 angezeigt.
Den genauen Aufbau der API URL /observations/openmeteo/1001/wind0 entnehmen sie bitte der API-Dokumentation.

Als erste Option für die Windgeschwindigkeit muss die anzuzeigende Maßeinheit angegbene werden.

Mapeinheit Windgeschwindigkeit Erläuterung
km/h Kilometer pro Stunde
kn Knoten
ms Meter pro Sekunde
.ms Meter pro Sekunde inkl. einer Nachkommastelle
mph Meilen pro Stunde
bft Beaufort (Windstärke)
Die Windrichtung kann auf 4 Arten angezeigt werden.

Optionen Windrichtung Erläuterung
degree Windrichtung in Grad
short Windrichtung abgekürzt durch Buchstaben (N, NNO, NO, ONO, O, OSO, SO, SSO, S, SSW, SW, WSW, W, WNW, NW, NNW)
long Windrichtung in langer Form (Nord, Nord-Nordost, Nordost ...)
windvane Windrichtung in Form eine Grafik, Form und Farbe kann durch einen passenden Style beeinflusst werden

Beipiel 2 - Kombinierter Thermo-, Hygro- und Barometer


<div id="openmeteoreport:thb:/observations/openmeteo/1002/thb0">
   <h3>Temperatur, Luftfeuchte und Luftdruck</h3>
   <p>
      <span id="datetime"></span><br>
      <span id="temp:C"></span><br>
      <span id="hygro:%"></span><br/>
      <span id="baro:hPa"></span><br/>
   </p>
</div>

Temperatur, Luftfeuchte und Luftdruck





In diesem Beispiel wird der letze verfügbare Messwert eines kombinierten Thermo-, Hygro und Barometers abgefragt thb0. Alle Angaben lassen sich aber auch auf einzelne Thermometer t, einzelne Barometer baro oder kombinierte Thermo- und Hygrometer th übertragen.

Feldname Sensortyp Erläuterung Maßeinheit
datetime t, th, thb, baro, wind, rain Uhrzeit und ggf. Datum an welcher der Messwert erfasst wurde
temp t, th, thb Temperatur C (Grad Celcius) oder F (Grad Fahrenheit)
hygro th, thb Luftfeuchte %
baro baro, thb Luftdruck hPa, mBar, psi oder Torr

Beipiel 3 - Niederschlag


<div id="openmeteoreport:rain:/observations/openmeteo/1001/rain0">
   <h3>Niederschlag</h3>
   <p>
      <span id="datetime"></span><br>
      <span id="rainrate:mm"></span><br>
      <span id="rain_yesterday:mm"></span><br>
      <span id="year2date_precipitation:mm"></span><br/>
   </p>
</div>

Niederschlag





In diesem Beispiel wird der letze verfügbare Messwert eines kombinierten Niederschlagsensors rain0 abgefragt.

Feldname Sensortyp Erläuterung Maßeinheit
datetime t, th, thb, baro, wind, rain Uhrzeit und ggf. Datum an welcher der Messwert erfasst wurde
rainrate rain Aktuelle Niederschlag pro Stunde mm (Millimeter) oder in (Inch)
rain_yesterday rain Kumulierter Niederschlag Vortag
Achtung! Dieser Wert ist nur bei Oregon Scientific Wetterstationen verfügbar.
Bei allen anderen Wetterstationen wird -1 zurückgeliefert.		 mm (Millimeter) oder in (Inch)
year2date_precipitation rain Kumulierter Niederschlag seit Jahresanfang mm (Millimeter) oder in (Inch)

Graphen

Beipiel 1 - Anemometer



<div id="openmeteograph:wind:/observations/openmeteo/1001/wind0/last24h/avg15m">
   <input type="hidden" id="id_unitwind" value="kn"></input>
   <div>
      <h3>Wind
      <small>15min Durchschnitt - <span id="plotrange"></span></small></h3>
   </div>
   <div>
      <div id="plotstatus" style="margin: 6px auto 20px 0px;">
         <div id="graph:speed_avg" style="background-color: #00A5D5;">
             Windgeschwindigkeit
         </div>
         <div id="graph:speed_min_max" style="background-color: #8AD2E6;">
             Minimum/Maximum
         </div>
         <div id="graph:direction" style="background-color: #EEE;">
             Windrichtung
         </div>
      </div>
   </div>
   <div id="plotarea" style="width:800px; height:300px;"></div>
</div>

Wind 15min Durchschnitt -

Windgeschwindigkeit
Minimum/Maximum
Windrichtung

In diesem Beispiel wird ein Graph über die Messwerte der letzen 24 Stunden last24h gezeichnet. Dabei zeigt die dunkelblaue Linie den Mittelwert über 15 Minuten avg15m und die hellblaue Fläche den Bereich in welchem sich die einzelnen Messwerte bewegt haben. Den genauen Aufbau der URL /observations/openmeteo/1001/wind0/last24h/avg15m können Sie der API-Dokumentation entnehmen.

Die Maßeinheit (linke X-Achse) wird über das input-Tag mit der ID id_unitwind definiert. Erlaubte Einheiten sind km/h, kn, ms, .ms, mph und bft. Die rechte X-Achse zeigt immer die Windstärke in Beaufort an.


Beipiel 2 - Thermo-/Hygrometer



<div id="openmeteograph:th:/observations/openmeteo/1001/th1/last24h">
   <input type="hidden" id="id_unittemp" value="C"></input>
   <div>
      <h3>Temperatur 
      <small>Einzelmesswerte <span id="plotrange"></span></small></h3>
   </div>
   <div>
      <div id="plotstatus" style="margin: 6px auto 20px 0px;">
         <div id="graph:temp" style="background-color: #00A5D5;">
             Temperatur
         </div>
      </div>
   </div>
   <div id="plotarea" style="width:800px; height:300px;"></div>
</div>

Temperatur Einzelmesswerte

Temperatur

Dieses Beispiel zeigt nur den Temperaturverlauf des kombinierten Thermo-/Hygrometers th1. Der Graph wird dabei aus den Einzelwerten der letzen 24 Stunden last24h erzeugt. Eine Mittelwertbildung erfolgt nicht. Der Luftfeuchtegraph wurde absichtlich durch das Fehlen des entsprechenden DIV-Tags mit der ID graph:hygro unterdrückt.

Die Maßeinheit der X-Achse wird über das input-Tag mit der ID id_unittemp definiert. Erlaubte Einheiten sind C und F.


Beipiel 3 - Barometer



<div id="openmeteograph:baro:/observations/openmeteo/1003/baro0/201207">
   <input type="hidden" id="id_unitbaro" value="hPa"></input>
   <div>
      <h3>Luftdruck 
      <small>Einzelmesswerte <span id="plotrange"></span></small></h3>
   </div>
   <div>
      <div id="plotstatus" style="margin: 6px auto 20px 0px;">
         <div id="graph:baro" style="background-color: #00A5D5;">
             Luftdruck
         </div>
      </div>
   </div>
   <div id="plotarea" style="width:800px; height:300px;"></div>
</div>

Luftdruck Einzelmesswerte

Luftdruck

Das Beispiel zeigt den Verlauf des Luftdrucks für Juli 2012 201207 (siehe API-Dokumentation).

Die Maßeinheit der X-Achse wird über das input-Tag mit der ID id_unitbaro definiert. Erlaubte Einheiten sind hPa, mBar, psi oder Torr.