Untitled

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<html>

<script language="javascript" type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/jquery.flot.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/jquery.flot.time.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/excanvas.min.js"></script>

 <script type="text/javascript">
    var dataset={};
    $(function initGraphs(number){
		$.get("/grf_db.php",{num:number}, function (data) {            //vytažení 700 poslednich dat php z mysql do json
			var data2 = eval( data );                                 //vyhodnocení....data????
			var spodek = [];                                         //spodek
			var vrch = [];                                         //vrch

        //function dataset2(added) {

        for (i = 0; i < data2.length; i++) {                        //cyklus, zkontroluje 100 načtených hodnot DB
         {
				 spodek.push([data2[i].Datetime, data2[i].temp20]);              //data z teplot, doplnit čas !!!!!  Datetime
				 vrch.push([data2[i].Datetime, data2[i].temp21]);

			   }
         }

         dataset = {"spodek":spodek, "vrch":vrch};
         ToggleSeries();
         });


                    var options = {                              // nastavení grafu
                                 series: {
                                 lines: {                         // vzhled: linky
                                 show: true,

                                 },

                                },
                          grid: {                             // mřížka
                                 //hoverable: true,
                                 //clickable: true,
                                 tickColor: "#eaebec",
                                 borderWidth: 1
                                },
                         colors: ["#b086c3", "#ea701b"],
                                //tooltip: true,                    // popis hodnot na grafu při najetí kurzorem
                                //tooltipOpts: {
                                //defaultTheme: false
                                //},
                         legend: {                             // popis linek
                                  position: 'nw',
                                  labelBoxBorderColor: "#000000",
                                  container: $("#area-chart #legendPlaceholderArea"),
                                  noColumns: 0
                                  },

                          xaxis: {mode: "time",                                                                                      // časová osa
                                  monthNames: ["led", "únr", "bře", "dub", "kvě", "čvn", "čvc", "srp", "zář", "říj", "lis", "pro"]  // měsíce překlad

                                  }

                       };

                function ToggleSeries() {                     // vyběr zdrojů dat
                    var d = [];
                    $("#area-chart input").each(function () {
                        if ($(this).is(":checked")) {
                            var seqence = $(this).attr("id");
                            d.push({
                                label: seqence,
                                data: dataset[seqence]
                            });
                        }
                    });
                    $.plot($("#area-chart #area-chartContainer"), d, options);     // tvorba grafu, nazev, d = vybrané data , plus nastavení vzhledu grafu
                }
                $("#area-chart input").change(function () {
                    ToggleSeries();

                    	$(initGraphs(100));
	            	$("#reloadButton").click(window.onresize = function(){initGraphs($("select[name=\"pocet\"]").val())});
                });

    //});
    });
    </script>

			<div class="row-fluid">
				<div class="span12">
					<div class="content-widgets">
						<div>
							<div class="widget-header-block">

							</div>
							<div>
								<div id="area-chart">
									<div class="clearfix">
										<form class="form-horizontal chart-control">
											<div class="control-group pull-left">
                     <input type=button onclick="history.back()" value="Zpět">
												<label class="control-label">Výběr teplot:</label>
												<div class="controls">
													<label class="checkbox inline">
													<input type="checkbox" id="vrch" checked>
													vrch</label>
													<label class="checkbox inline">
													<input type="checkbox" id="spodek" checked>
													spodek</label>


												</div>
											</div>
										</form>

                    <select name="pocet">
                  <option value="100" selected="selected">Den</option>
                  <option value="700">Týden</option>
                  </select>
    <input type="submit" id="reloadButton" value="Refresh">
										<div id="legendPlaceholderArea" class="pull-right">
										</div>
									</div>
									<div id="area-chartContainer" style="width: 100%;height:300px;" class="clearfix">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

    </body>
    </html>