Witam użytkowników forum.
Opiekuję się stacją meteo w harcerskim ośrodku Perkoz k/Olsztynka (
http://www.pogoda.perkoz.zhp.pl).
Mamy stację Davis Vantage Pro i korzystamy z firmowego oprogramowania.
Jako, że wykresy generowane przez WeatherLink są mało atrakcyjne postanowiłem znaleźć alternatywę. I tak trafiłem na
http://www.highcharts.com/. Po długich i zaciętych bojach (jako laik w sprawach programowania) zmusiłem Highcharts do rysowania wykresów ze standardowych danych generowanych przez WeatherLink w postaci pliku txt (downld02 i downld08). Efekt można zobaczyć na naszej stronie oraz tu:
http://www.pogoda.perkoz.zhp.pl/testowe/wykresy.phpJako, że przy pracy korzystałem z wszelakich porad i przykładów z Internetu (np.
http://pocasi.hovnet.cz/wxwug.php?lang=en postanowiłem udostępnić źródło dla społeczeństwa.
Do działania wykresów na stronie potrzebne są następujące elementy:
1. Załączone biblioteki javascript w sekcji head
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
2. Skonfigurowanie wykresu odpowiednim kodem javascript np.:
<script type="text/javascript">
$(document).ready(function() {
//Wykres wilgotności ============
Humchart = new Highcharts.Chart({
chart: {
renderTo: 'divHum',
zoomType: 'x'
},
title: {
text: 'Wilgotność - zmiany od 00:10 wczoraj do <?php echo "$end"; ?> dziś'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
maxZoom: 2 * 3600000, // 2 godziny
title: {
text: null
}
},
yAxis: {
title: {
text: null //'Wilgotność [%]'
},
max: 100,
min: 0
},
tooltip: {
valueSuffix: ' %'
},
series: [{
name: 'Wilgotność',
type: 'areaspline',
lineWidth: 1,
fillOpacity: 0.5,
pointInterval: 600 * 1000,
pointStart: <?php echo "$UData"; ?>,
data: [<?php echo "$Hum"; ?>]
}]
});
});
</script>
UWAGA - to tylko skrót i nie zadziała bez reszty kodu - reszta w załączniku. Istotne są przykładowe wpisy kodu PHP który zwraca wartości danych odczytane z pliku downld02.txt
3. Kod PHP który odczyta plik z danymi i przekaże je w odpowiedniej formie do wykresu:
<?php
//Pobieram dane z pliku downld02.txt
$dane =file("http://meteo24.nazwa.pl/olsztynek_perkoz/downld02.txt"); //ścieżka pełna jeśli dane są na innym serwerze
$dane = preg_replace('/(\s{2,})/', '|', $dane); //Wielokrotne spcje między parametrami zamieniam na "|"
for ($i=3;$i<count($dane);$i++) //zliczam wiersze od 4-go (pierwszy to $i=0)
{
$param =explode("|",$dane[$i]); //rozbijam na parametry/kolumny po znaczniku "|"
//ustawiam serie kolejnych parametrów, przecinek rozdziela wartości
$data .= $param[0] .","; // data (yy-mm-dd)
$godz .= $param[1] .","; // godzina (hh:ii)
$Temp .= $param[2] .","; // temperatura
$Hum .= $param[5] .","; // wilgotność
$DewPt .= $param[6] .","; // punkt rosy
$WSpeed .= $param[7] .","; // prędkość wiatru uśredniona
$HiWSpeed .= $param[10] .","; // prędkość wiatru w porywach
$Bar .= $param[16] .","; // ciśnienie
$Rain .= $param[17] .","; // deszcz (opady)
$RainRate .= $param[18] .","; // intensywność opadu
$Solar .= $param[19] .","; // promieniowanie słoneczne
$UVindex .= $param[22] .","; // index promieniowania UV
}
/*** Usuwam przcinek po ostatniej wartości
- w większości przypadków Highcharts zignoruje brak liczby po ostatnim przecinku
ale dla pewności lepiej to zrobić ***/
$Temp = substr ($Temp, 0, -1);
$Hum = substr ($Hum, 0, -1);
$DewPt = substr ($DewPt, 0, -1);
$WSpeed = substr ($WSpeed, 0, -1);
$HiWSpeed = substr ($HiWSpeed, 0, -1);
$Bar = substr ($Bar, 0, -1);
$Rain = substr ($Rain, 0, -1);
$RainRate = substr ($RainRate, 0, -1);
$Solar = substr ($Solar, 0, -1);
$UVindex = substr ($UVindex, 0, -1);
//Ustawiam datę początkową
$start = substr ($data, 0, 8); //8 znaków z początku
$UData = strtotime ("$start 01:10:00")*1000; //czas w formacie uniksowym w milisekundach przesunięty o godzinę
/*** DO sprawdzenia - dlaczego Highcharts odczytuje z godzinnym przesunięciem? Może chodzi o czas stefowy? ***/
// odczytuję godzinę ostatniego pomiaru
$end = substr ($godz, -6, -1); //5 znaków z końca
$end = preg_replace('/,/', '0', $end); //jeśli godzina 1-cyfrowa to załapuje się przecinek przed cyfrą, więc zamieniam go na "0"
?>
4. W sekcji body pusty element do którego zostanie wczytany wykres:
<div id="divHum" style="width: 550px; height: 250px; margin: 0 auto"></div>
Wykres będzie miał rozmiary zdefiniowane w elemencie div.
Zachęcam do testowania i liczę na twórcze rozwinięcie tematu.
Nacek