Live Temperature Chart in Arduino with DHT11 Sensor

Hello Friends! Hope you will be fine. Today we are going to learn something interesting. Yes offcourse, really interesting. We are going to make a live graph that will show us Temperature of our home or device in a live graph. For this, we will use HighCharts jQuery library that will generate chart on the screen for us. So let’s start our work.

Note: You should continue with our previous tutorials based on Arduino, I am giving links to those tutorials below:

Tutorial 1 : How to save DHT11 Temperature Data into Database with Wemos D1 Mini

Tutorial 2 : How to use the DHT11 Temperature and Humidity Sensor with Arduino!

So now, what we need, we need some PHP and Javascript files. Open your favorite text editor and paste below code into and save it in “temperature” folder that you created in previous tutorials and name it as index.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Temperature Chart</title>
		
		
		<!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="jquery-1.10.1.js"></script>
		<script type="text/javascript" src="highcharts.js"></script>
		
		
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script>
		var chart; // global
		
		/**
		 * Request data from the server, add it to the graph and set a timeout to request again
		 */
		function requestData() {
			$.ajax({
				url: 'live-server-data.php', 
				success: function(point) {
					var series = chart.series[0],
						shift = series.data.length > 20; // shift if the series is longer than 20
		
					// add the point
					chart.series[0].addPoint(eval(point), true, shift);
					
					// call it again after one second
					setTimeout(requestData, 2000);	
				},
				cache: false
			});
		}
			
		$(document).ready(function() {
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'container',
					defaultSeriesType: 'spline',
					events: {
						load: requestData
					}
				},
				title: {
					text: 'Live Home Temperature'
				},
				xAxis: {
					type: 'datetime',
					tickPixelInterval: 150,
					maxZoom: 20 * 1000
				},
				yAxis: {
					minPadding: 0.2,
					maxPadding: 0.2,
					title: {
						
                        text: "Temperature "+String.fromCharCode(176)+"C",
						margin: 80
					}
				},
				series: [{
					name: 'Time & Temperature',
					data: []
				}]
			});		
		});
		</script>
		
	</head>
	<body>
		
		<!-- 3. Add the container -->
		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
		
	
	</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Temperature Chart</title>

var chart; // global

/**

* Request data from the server, add it to the graph and set a timeout to request again

function requestData() {

$.ajax({

url: 'live-server-data.php',

success: function(point) {

var series = chart.series[0],

shift = series.data.length > 20; // shift if the series is longer than 20

// add the point

chart.series[0].addPoint(eval(point), true, shift);

// call it again after one second

setTimeout(requestData, 2000);

cache: false

});

}

$(document).ready(function() {

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

defaultSeriesType: 'spline',

events: {

load: requestData

}

title: {

text: 'Live Home Temperature'

xAxis: {

type: 'datetime',

tickPixelInterval: 150,

maxZoom: 20 * 1000

yAxis: {

minPadding: 0.2,

maxPadding: 0.2,

title: {

text: "Temperature "+String.fromCharCode(176)+"C",

margin: 80

}

series: [{

name: 'Time & Temperature',

data: []

}]

});

</script>

</head>

<body>

</body>

</html>

one thing more, as you can see in this code at line no 22 “live-server-data.php”. This is the file that responsible for fetching data from the database and generate data in json format. Now let’s look at that file:

<?php 
// Set the JSON header
header("Content-type: text/json");
$servername = "localhost";
$username = "root";
$password = "";
$dbName = "temperature";
$port = 3306;
$conn = new mysqli($servername, $username, $password, $dbName, $port);
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM temps ORDER BY id DESC LIMIT 1";
$result = $conn->query($sql);
if ($result->num_rows>0){
while($row=$result->fetch_array()){      
      $x = strtotime($row[4])*1000;
      $y = (int)$row[1];
      
      //$y = rand(0,100);
      // Create a PHP array and echo it as JSON

}
$ret = array($x,$y);
echo json_encode($ret);
}

$conn->close();
?>

<?php

// Set the JSON header

header("Content-type: text/json");

$servername = "localhost";

$username = "root";

$password = "";

$dbName = "temperature";

$port = 3306;

$conn = new mysqli($servername, $username, $password, $dbName, $port);

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

$sql = "SELECT * FROM temps ORDER BY id DESC LIMIT 1";

$result = $conn->query($sql);

if ($result->num_rows>0){

while($row=$result->fetch_array()){

$x = strtotime($row[4])*1000;

$y = (int)$row[1];

//$y = rand(0,100);

// Create a PHP array and echo it as JSON

}

$ret = array($x,$y);

echo json_encode($ret);

}

$conn->close();

You can see in above code that we are fetching data from the database that we created in previous tutorials and then encode it in json format and then get on the chart with the help of HighCharts Jquery Plugin. You cand change line no.4 to 8 that matches your database server. After all open your URL like this [YourHostName]/[FolderName]/ and see it live, but remember that your have to run Arduino software and attach sensor as in previous tutorial.

I am giving you required files along with Javascript files just put it into your server where you placed the folder for this tutorial.