Scribd
Upload
6 views6 pages

Real-Time Temperature and Humidity Dashboard

The document is a PHP web application that displays real-time temperature and humidity data from a database. It includes a Bootstrap-based HTML layout with charts for visual representation and a table for data display. The JavaScript code uses Google Charts to create gauge charts and periodically refreshes the data using AJAX calls to update the displayed values.

Uploaded by

Melsougly Bryce
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views6 pages

Real-Time Temperature and Humidity Dashboard

The document is a PHP web application that displays real-time temperature and humidity data from a database. It includes a Bootstrap-based HTML layout with charts for visual representation and a table for data display. The JavaScript code uses Google Charts to create gauge charts and periodically refreshes the data using AJAX calls to update the displayed values.

Uploaded by

Melsougly Bryce
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<?

php
//---------------------------------------------------------------------------------
----------
require '[Link]';

$db;
$sql = "SELECT * FROM tbl_temperature ORDER BY id DESC LIMIT 30";
$result = $db->query($sql);
if (!$result) {
{ echo "Error: " . $sql . "<br>" . $db->error; }
}

//$rows = $result->fetch_assoc();
//$rows = $result -> fetch_all(MYSQLI_ASSOC);

//$row = get_temperature();
//print_r($row);

//header('Content-Type: application/json');
//echo json_encode($rows);
//---------------------------------------------------------------------------------
----------
?>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="[Link]
<script src="[Link]
<script
src="[Link]
script>
<script
src="[Link]
</script>

<style>
.chart {
width: 100%;
min-height: 450px;
}
.row {
margin:0 !important;
}
</style>

</head>
<body>

<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>Real Time Weather Station</h1>
<p>Created By: <a href="#">AhmadLogs</a></p>
</div>
<div class="clearfix"></div>

<div class="col-md-6">
<div id="chart_temperature" class="chart"></div>
</div>

<div class="col-md-6">
<div id="chart_humidity" class="chart"></div>
</div>

</div>

<div class="row">
<div class="col-md-12">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Temperature</th>
<th scope="col">Humidity</th>
<th scope="col">date time</th>
</tr>
</thead>
<tbody>
<?PHP $i = 1; while ($row = mysqli_fetch_assoc($result)) {?>
<tr>
<th scope="row"><?php echo $i++;?></th>
<td><?PHP echo $row['temperature'];?></td>
<td><?PHP echo $row['humidity'];?></td>
<td><?PHP echo date("Y-m-d h:i: A",
strtotime($row['created_date']));?></td>
</tr>
<?PHP } ?>
</tbody>
</table>
</div>
</div>
</div>
<!--
-----------------------------------------------------------------------------------
----- -->

<script type="text/javascript"
src="[Link]
<script>
//$(document).ready(function(){
//---------------------------------------------------------------------------------
----------------
[Link]('current', {'packages':['gauge']});
[Link](drawTemperatureChart);
//---------------------------------------------------------------------------------
----------------
function drawTemperatureChart() {
//guage starting values
var data = [Link]([
['Label', 'Value'],
['Temperature', 0],
]);

//NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
NNNNNNNNNNNNN
var options = {
width: 1600,
height: 480,
redFrom: 70,
redTo: 100,
yellowFrom: 40,
yellowTo: 70,
greenFrom: 00,
greenTo: 40,
minorTicks: 5
};

//NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
NNNNNNNNNNNNN
var chart = new
[Link]([Link]('chart_temperature'));
[Link](data, options);

//NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
NNNNNNNNNNNNN

//NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
NNNNNNNNNNNNN
function refreshData () {
$.ajax({
url: '[Link]',
// use value from select element
data: 'q=' + $("#users").val(),
dataType: 'json',
success: function (responseText) {

//______________________________________________________________
//[Link](responseText);
var var_temperature =
parseFloat([Link]).toFixed(2)
//[Link](var_temperature);
// use response from php for data table

//______________________________________________________________
//guage starting values
var data = [Link]([
['Label', 'Value'],
['Temperature', eval(var_temperature)],
]);

//______________________________________________________________
//var chart = new
[Link]([Link]('chart_temperature'));
[Link](data, options);
},
error: function(jqXHR, textStatus, errorThrown) {
[Link](errorThrown + ': ' + textStatus);
}
});
}

//NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
NNNNNNNNNNNNN
//refreshData();

setInterval(refreshData, 1000);
}
//---------------------------------------------------------------------------------
----------------

//---------------------------------------------------------------------------------
----------------
[Link]('current', {'packages':['gauge']});
[Link](drawHumidityChart);
//---------------------------------------------------------------------------------
----------------
function drawHumidityChart() {
//guage starting values
var data = [Link]([
['Label', 'Value'],
['Humidity', 0],
]);

//NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
NNNNNNNNNNNNN
var options = {
width: 1600,
height: 480,
redFrom: 70,
redTo: 100,
yellowFrom: 40,
yellowTo: 70,
greenFrom: 00,
greenTo: 40,
minorTicks: 5
};

//NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
NNNNNNNNNNNNN
var chart = new
[Link]([Link]('chart_humidity'));
[Link](data, options);

//NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
NNNNNNNNNNNNN
//NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
NNNNNNNNNNNNN
function refreshData () {
$.ajax({
url: '[Link]',
// use value from select element
data: 'q=' + $("#users").val(),
dataType: 'json',
success: function (responseText) {

//______________________________________________________________
//[Link](responseText);
var var_humidity =
parseFloat([Link]).toFixed(2)
//[Link](var_temperature);
// use response from php for data table

//______________________________________________________________
//guage starting values
var data = [Link]([
['Label', 'Value'],
['Humidity', eval(var_humidity)],
]);

//______________________________________________________________
//var chart = new
[Link]([Link]('chart_temperature'));
[Link](data, options);
},
error: function(jqXHR, textStatus, errorThrown) {
[Link](errorThrown + ': ' + textStatus);
}
});
}

//NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
NNNNNNNNNNNNN
//refreshData();

setInterval(refreshData, 1000);
}
//---------------------------------------------------------------------------------
----------------

//});

$(window).resize(function(){
drawTemperatureChart();
drawHumidityChart();
});
</script>
<!-- --------------------------------------------------------------------- -->
</body>
</html>

You might also like