Toto je multigraf, na grafu spojuje více teplotních čidel s možností volby-
Opět potřebuje k funkci předchozí /grafydatabaze.php
<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(){
$.get("/grafydatabaze.php",{num:"700"}, function (data) { //vytažení 700 poslednich dat php z mysql do json
var data2 = eval( data ); //vyhodnocení....data????
var venku = []; //venku
var zatepleni = []; //zatepleni
var solar = []; //solar
var bojler = []; //bojler
var topna = []; // topna voda
var vratna = []; //studena topna
//function dataset2(added) {
for (i = 0; i < data2.length; i++) { //cyklus, zkontroluje 700 načtených hodnot DB
{
venku.push([data2[i].Datetime, data2[i].temp04]); //data z teplot, doplnit čas !!!!! Datetime
zatepleni.push([data2[i].Datetime, data2[i].temp08]);
solar.push([data2[i].Datetime, data2[i].temp06]);
bojler.push([data2[i].Datetime, data2[i].temp09]);
topna.push([data2[i].Datetime, data2[i].temp02]);
vratna.push([data2[i].Datetime, data2[i].temp01]);
}
}
dataset = {"venku":venku, "zatepleni":zatepleni, "solar":solar, "bojler":bojler, "topna":topna, "vratna":vratna};
ToggleSeries();
});
var options = { // nastavení grafu
series: {
lines: { // 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
};
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();
});
//});
});
</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">
<label class="control-label">Výběr teplot:</label>
<div class="controls">
<label class="checkbox inline">
<input type="checkbox" id="venku" checked>
Venku</label>
<label class="checkbox inline">
<input type="checkbox" id="zatepleni" checked>
Zateplení</label>
<label class="checkbox inline">
<input type="checkbox" id="solar" checked>
Solár</label>
<label class="checkbox inline">
<input type="checkbox" id="bojler" checked>
Bojlér </label>
<label class="checkbox inline">
<input type="checkbox" id="topna" checked>
Topná voda</label>
<label class="checkbox inline">
<input type="checkbox" id="vratna" checked>
Vratná voda</label>
</div>
</div>
</form>
<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>
Toto počítá dobu běhu soláru:
Do databáze se ukádá čas soby chodu čerpadla v minutách a ten stále roste. Stejným způsobem dělám grafy pro spotřebu plynu, elektřiny:
solDB.php:
<?php
include "open_db.php";
$result = mysql_query("SELECT x . *
FROM jmeno_DB AS x
JOIN (
SELECT MIN( `index` ) AS pulnoc
FROM jmeno_DB
WHERE `dobasolar`
GROUP BY DATE( `index` )
) AS y ON x.`index` = y.pulnoc
UNION ALL (
SELECT *
FROM jmeno_DB
WHERE `dobasolar`
ORDER BY `index` DESC
LIMIT 1
)
ORDER BY `index` DESC
LIMIT 31" );
if (!$result) {
die('Error: ' . mysql_error());
}
//echo "Zpracování DB<br>\n";
$aktualni = mysql_fetch_assoc($result);
if (!$aktualni) {
die('Error: ' . mysql_error());
}
//echo "Vypočteno:<br>\n";
$solar = $aktualni['dobasolar'];
$datum = $aktualni['index'];
$json = array(); #Definování nového pole pro pozdější převod do JSON
while ($pulnoc = mysql_fetch_assoc($result)) {
//echo $pulnoc['index'] ." , ". (Round(($solar - $pulnoc['dobasolar']),3)) . "<br>\n";
//$json[$pulnoc['index']] = (Round(($solar - $pulnoc['dobasolar']),3)); #Plnění pole
$json[]=Array((strtotime($pulnoc['index']." UTC")*1000), (Round(($solar - $pulnoc['dobasolar'])/60,1))); // delim 6ti, proc? mamm delit 60ti sekundama
$solar = $pulnoc['dobasolar'];
$datum = $pulnoc['index'];
}
$json2['label']='Solar doba chodu';
$json2['data']=$json;
echo json_encode($json2);
//$json = json_encode($json); #Převedení pole do JSON
//var_dump($json); #Výpis JSON pro kontrolu výsledku
?>
Toto vytvoří sloupcový graf hodnot za jeden den :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<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 type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "/solDB.php",
method: 'GET',
dataType: 'json',
success: pokudjeprijato
});
function pokudjeprijato(data) {
var length = data.length;
var data2 = [ data ];
$.plot($("#solar"), data2,{series: {bars: {show: true}, color: "blue"}, bars: { align: "center", barWidth: 24*3600*1000}, xaxis: {mode: "time", monthNames: ["led", "únr", "bře", "dub", "kvě", "čvn", "čvc", "srp", "zář", "říj", "lis", "pro"]} //popis osy češtině
});
}
});
</script>
<div>solár doba chodu:
</div>
<div id="solar" style="width:100%;height:400px;background-color:#FFF;">
</div>
</body>
</html>
