<html>
	<head>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

		<script src="http://code.highcharts.com/highcharts.js"></script>
		<script src="http://code.highcharts.com/modules/exporting.js"></script>

		<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

	</head>
	<body>


		<div id="search">
			<form>
				<input type="date" name="from">
				<input type="date" name="to">
				<input type="toogle" name="type">
			</form>
		</div>
		<div id="container" style="width: 100%; height: 100%;"></div>
		<div id="tables" class="table table-striped" style="width: 100%;"></div>


<script>

$(function(){

    //var type="day";
    var type="hour";
	$.ajax({
		type:"GET",
		url:"http://homel.vsb.cz/~zao034/via/weather.php",
		dataType:"json",
		data:{
			format:"json",
			type:type,
            from:"30.07.2012",
			to:"31.07.2012"
		},
		success:function(data){
			console.log(data);
			var graph_data=[];
	        var weather=data.weather;
	        var datetimeDone=[];
	      	$.each(weather,function(i){
                var datetime=0;
                //Date.UTC(year,month,day,hours,minutes,seconds,millisec)
                if(type=="day") { //20.07.2012
	      		    var date=weather[i].datetime.split(".");
                    datetime=Date.UTC(date[2],date[1],date[0]);
                } else if(type=="hour") { //20.07.2012 01:00:00
                    var date=weather[i].datetime.split(".");
                    var time=date[2].split(" ");
                    date[2]=time[0];
                    time=time[1].split(":");
                    datetime=Date.UTC(date[2],date[1],date[0],time[0],time[1],time[2]);
                }

				// same datetime second time means it was supposed to be PM so lets add 12 hours
				if(datetimeDone.filter(function(e){ return e==datetime; }).length>0) {
					datetime+=1000*60*60*12; //12 hours
				}
				datetimeDone.push(datetime);

                graph_data.push([
                    datetime,
                    parseFloat(weather[i].value)
                ]);
			});
            console.log( graph_data);

			// lokalizace
			Highcharts.setOptions({
	        	lang: {
	               months: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen','září', 'říjen', 'listopad', 'prosinec'],
	               weekdays: ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'],
	               shortMonths: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen','září', 'říjen', 'listopad', 'prosinec'],
				}
			});

            var tables=$('#tables');

            var table=$('<table></table>').appendTo(tables);
            table.append('<tr><th>Datům/Čas</th><th>Teplota (°C)</th></tr>');
			$.each(graph_data,function(i){
				var d=graph_data[i];
				table.append('<tr><td>'+(new Date(d[0])).toLocaleString()+'</td><td>'+d[1]+'</td></tr>');
			});

			 $('#container').highcharts({
			    title: {
			        text: 'Graf teplot',
			    },
			    yAxis: {
			        title: {
			            text: 'Teplota (°C)'
			        },
			    },
			    xAxis: {
			    	type: "datetime"
			    },
			    tooltip: {
			        valueSuffix: '°C'
			    },
                series: [{
					name:'Teplota',
                    data:graph_data,
                }],
			});


		}
	});


});

</script>

	</body>
<html>