Serwis wykorzystuje pliki cookies. Korzystajc z forum wyraasz zgod na uywanie cookies. Wicej informacji w regulaminie.
StacjePogody.waw.pl

Autor Wątek: WeatherLink i Highcharts, dynamiczne wykresy ze standardowych danych  (Przeczytany 3543 razy)

Offline Nacek

  • Cirrus
  • *
  • Wiadomości: 3
  • Otrzymał podziękowań: 0
  • Typ stacji: Davis Vantage Pro
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.php
Jako,  ż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 ($Temp0, -1);
   
$Hum =  substr ($Hum0, -1);
   
$DewPt =  substr ($DewPt0, -1);
   
$WSpeed =  substr ($WSpeed0, -1);
   
$HiWSpeed =  substr ($HiWSpeed0, -1);
   
$Bar =  substr ($Bar0, -1);
   
$Rain =  substr ($Rain0, -1);
   
$RainRate =  substr ($RainRate0, -1);
   
$Solar =  substr ($Solar0, -1);
   
$UVindex =  substr ($UVindex0, -1);
   

//Ustawiam datę początkową
$start substr ($data08); //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

Forum Użytkowników Stacji Pogodowych