//load the table package
    google.load('visualization', '1', {packages:['table']});
    //load the chart package
    google.load('visualization', '1', {packages:['corechart']});
    //load the gauges package
    google.load('visualization', '1', {packages:['gauge']});
    //load the image chart for the wind vane
    google.load("visualization", "1.0", {packages:["imagechart"]});

    $(document).ready(function() {

        var datatbl = new google.visualization.DataTable();
        //format the date values
        var formatter1 = new google.visualization.DateFormat({pattern: "d MMM yyyy '  'hh:mm aa"});
        var formatter2 = new google.visualization.DateFormat({pattern: "hh:mm aa"});
        //get the data from the file and load it into the google datatable
        $.getJSON('meteo/live_json.txt', function(data) {


            var noElements = data.length;
            datatbl.addColumn('datetime', 'Data');
            datatbl.addColumn('string', 'Czas');
            datatbl.addColumn('number', 'Temperatura (°C)');
            datatbl.addColumn('number', 'Punkt Rosy (°C)');
            datatbl.addColumn('number', 'Wilgotność (%)');
            datatbl.addColumn('string', 'Wind Direction');
            datatbl.addColumn('number', 'Wiatr średnia (km/h)');
            datatbl.addColumn('number', 'Wiatr podmuch (km/h)');
            datatbl.addColumn('number', 'Deszcz (mm)');
            datatbl.addColumn('number', 'Ciśnienie (hPa)');
            datatbl.addRows(noElements);
            $.each(data, function(i,v) {
                 // set the values for both the name and the population
                 datatbl.setValue(i, 0, new Date(v.Date));
                 datatbl.setValue(i, 1, v.Time);
                 datatbl.setValue(i, 2, v.TempOut);
                 datatbl.setValue(i, 3, v.FeelsLike);
                 datatbl.setValue(i, 4, v.HumidityOut);
                 datatbl.setValue(i, 5, v.WindDirection);
                 datatbl.setValue(i, 6, v.WindAvg);
                 datatbl.setValue(i, 7, v.WindGust);
                 datatbl.setValue(i, 8, v.Rain);
                 datatbl.setValue(i, 9, v.AbsPressure);
            });

            //format the dates
            formatter1.format(datatbl,0);

            //declare the chart (which is a table) and draw it
            var viewTable = new google.visualization.DataView(datatbl);
            viewTable.setColumns([0,2,3,4,8,9]);
//            var table = new google.visualization.Table(document.getElementById('table_div'));
//            table.draw(viewTable);


            //draw the gauge - work in progress
            var viewGauge = new google.visualization.DataView(datatbl);
            viewGauge.setColumns([1,2,3]);
            viewGauge.setRows([noElements-1]);
            var optionsGauge = {
              width: 640,
              height: 240,
              redFrom: 25,
              redTo: 40,
              yellowFrom:20,
              yellowTo: 25,
              min: -20,
              max: 40,
              minorTicks: 5
              };
//            var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
//            gauge.draw(viewGauge, optionsGauge);
        });

        $.getJSON('meteo/24hrs_json.txt', function(data1) {
            var datatbl1 = new google.visualization.DataTable();

            var noElements = data1.length;
            datatbl.addRows(noElements);
            $.each(data1, function(i,v) {
                 // set the values for both the name and the population
                 datatbl.setValue(i+7, 0, new Date(v.Date));
                 datatbl.setValue(i+7, 1, v.Time);
                 datatbl.setValue(i+7, 2, v.TempOut);
                 datatbl.setValue(i+7, 3, v.FeelsLike);
                 datatbl.setValue(i+7, 4, v.HumidityOut);
                 datatbl.setValue(i+7, 5, v.WindDirection);
                 datatbl.setValue(i+7, 6, v.WindAvg);
                 datatbl.setValue(i+7, 7, v.WindGust);
                 datatbl.setValue(i+7, 8, v.Rain);
                 datatbl.setValue(i+7, 9, v.AbsPressure);
            });

            datatbl.sort([{column: 0}]);

            //draw the chart - TEMPERATURA 24h
            var view1 = new google.visualization.DataView(datatbl);
            view1.setColumns([1,2,3]);

              var optionsCht1 = {
              width: 900, height: 240,
              //title: 'Temperatura °C',
              //pointSize: 0,
              legend: {position: 'top'},
              vAxis: {title: 'Stacjapogody.waw.pl',  titleTextStyle: {color: '#808080'}, gridlines: {count: 8}},
              lineWidth: 4
            };

            var chart1 = new google.visualization.LineChart(document.getElementById('google_wykres_temperatura24h'));
            chart1.draw(view1, optionsCht1);

           //draw the chart - CISNIENIE 24h
            var view2 = new google.visualization.DataView(datatbl);
            view2.setColumns([1,9]);

            var optionsCht2 = {
              width: 900, height: 240,
              //title: 'Ciśnienie hPa',
              pointSize: 0,
              legend: {position: 'top'},
              vAxis: {title: 'Stacjapogody.waw.pl',  titleTextStyle: {color: '#808080'}, gridlines: {count: 8}},
              series: {0:{color: 'green', visibleInLegend: true}},
              lineWidth: 2
            };

            var chart2 = new google.visualization.AreaChart(document.getElementById('google_wykres_cisnienie24h'));
            chart2.draw(view2, optionsCht2);

           //draw the chart - Wilgotnosc 24h
            var view3 = new google.visualization.DataView(datatbl);
            view3.setColumns([1,4]);

            var optionsCht3 = {
              width: 900, height: 240,
              //title: 'Wilgotność %',
              pointSize: 0,
              legend: {position: 'top'},
              vAxis: {title: 'Stacjapogody.waw.pl',  titleTextStyle: {color: '#808080'}, gridlines: {count: 8}},
              series: {0:{color: 'green', visibleInLegend: true}},
              lineWidth: 4
            };

            var chart3 = new google.visualization.LineChart(document.getElementById('google_wykres_wilgotnosc24h'));
            chart3.draw(view3, optionsCht3);



           //draw the chart - Wiatr 24h
            var view4 = new google.visualization.DataView(datatbl);
            view4.setColumns([1,6,7]);

            var optionsCht4 = {
              width: 900, height: 240,
              //title: 'Wiatr km/h',
              pointSize: 0,
              legend: {position: 'top'},
              vAxis: {title: 'Stacjapogody.waw.pl',  titleTextStyle: {color: '#808080'}, gridlines: {count: 8}},
              series: {0:{color: 'green', visibleInLegend: true}},
              lineWidth: 1
            };

            var chart4 = new google.visualization.LineChart(document.getElementById('google_wykres_wiatr24h'));
            chart4.draw(view4, optionsCht4);


           //draw the chart - deszcz 24h
            var view5 = new google.visualization.DataView(datatbl);
            view5.setColumns([1,8]);

            var optionsCht5 = {
              width: 900, height: 240,
              //title: 'Deszcz mm',
              pointSize: 0,
              legend: {position: 'top'},
              vAxis: {title: 'Stacjapogody.waw.pl', minValue: 0, titleTextStyle: {color: '#808080'}},
              series: {0:{color: 'blue', visibleInLegend: true}},
              min: 0,
              lineWidth: 2
            };

            var chart5 = new google.visualization.LineChart(document.getElementById('google_wykres_deszcz24h'));
            chart5.draw(view5, optionsCht5);





        });

        //------------------------------------------------------------------------
        //the wind vane chart
        //
        var windArray = new Array(16);
        for (var i = 0; i < 16; i++) windArray[i] = 0;
        //
        var windArrayItems = new Array(16);
        for (var j = 0; j < 16; j++) windArrayItems[j] = 0;

        $.getJSON('meteo/24hrs_json.txt', function(dataWnd) {
            var dataTableWind = new google.visualization.DataTable();
            var maxWind = 0;
            dataTableWind.addColumn('number');

            dataTableWind.addRows(17); //this is 16 directions plus 1 to "close" the plot
            $.each(dataWnd, function(i,v) {
                //set the maximum wind value
                if (v.WindAvg > maxWind) {
                        maxWind = v.WindAvg;
                }
                windArrayItems[v.WindDirection] = windArrayItems[v.WindDirection] + 1;
                windArray[v.WindDirection] = windArray[v.WindDirection] + v.WindAvg;
                 // set the values for both the name and the population
                 //datatbl.setValue(i, 0, v.WindAvg);

            });
            for (var i = 0; i < 16; i++) {
                if (windArrayItems[i] > 0) {
                        windArray[i] = windArray[i]/windArrayItems[i];
                }
                dataTableWind.setValue(i, 0, windArray[i]);
            }
            //now the final one
            dataTableWind.setValue(16, 0, windArray[0]);

            var optionsWindVane = {
                  chxl: '0:|North|NNE|NE|ENE|East|ESE|SE|SSE|South|SSW|SW|WSW|West|WNW|NW|NNW',
                  chxp: '',
                  chxs: '',
                  chxtc: '',
                  chxt: 'x,y',
                  chs: '300x300',
                  cht: 'r',
                  chco: 'FF0000',
                  chls: '2,4,0',
                  chm: 'B,FF000080,0,0,0',
                  chtt: 'Wind Speed for the last 6 hrs (kph)',
                  chof: 'png'
            };
            optionsWindVane.chxr = '0,0,20|1,0,' + maxWind*1.1;
            optionsWindVane.chds = '0,' + maxWind*1.1;

//            var windvane = new google.visualization.ImageChart(document.getElementById('wind_div'));
//            windvane.draw(dataTableWind, optionsWindVane);

        });
        //end of wind vane
        //------------------------------------------------------------------------


    });