Posts Tagged ‘raspberry pi’


Grafik Last 24 Hours

Grafik Last 24 Hours

Big Picture System

Big Picture System

Assalamu’alaikum Wr. Wb.
Oke saya lanjutkan. remind lagi ini adalah seri berantai dari posting berikut ya

  1. https://tarecha.wordpress.com/2015/10/26/project-raspberry-pi/
  2. https://tarecha.wordpress.com/2017/06/05/project-weather-logger-part-1/
  3. https://tarecha.wordpress.com/2017/06/26/project-weather-logger-part-2-tambahan-sensor-tekanan-udara/
  4. https://tarecha.wordpress.com/2017/07/01/project-weather-logger-part-3-komunikasi-udp/
  5. https://tarecha.wordpress.com/2017/07/15/project-weather-logger-part-4-simpan-di-server-mysql/
  6. https://tarecha.wordpress.com/2017/07/24/project-weather-logger-part-5-view-data-dan-export/

oke selanjutnya ke tahap plot grafik, sebuah data dengan X waktu akan mudah dibaca dengan grafik garis. disini tujuannya melihat hubungan suhu, kelembapan, dan tekanan dalam waktu yang sama. dari pengamatan saya Suhu berbanding terbalik dengan kelembapan dan kelembapan berbanding lurus dengan tekanan.

1.  Memilih plugin untuk ploting grafik

disini ada beberapa pertimbangan yaitu render grafik di server lalu dikirim ke browser client dalam bentuk gambar atau kirim data ke client dan di render di client. opsi pertama plugin akan membuat gambar di server dan ini cukup berat jika dilakukan pada server raspberry pi, sehingga saya pilih opsi ke dua. client side plotting. jadi server mengirim data dan di render menggunakan javascrip di browser client. pilihan saya jatuh pada https://canvasjs.com/ karena mudah dan interaktif. bisa multi y axis dimana untuk yang presure karena rangengya beda jauh antara kelembapan dan suhu maka saya gunakan axis y secondari yang sebelah kanan. sedangkan axis y utama digunakan suhu dan kelembapan karena rangenya dekat. selain itu canvasjs bisa plot jadi satu dan bisa muncul data dengan x (waktu) yang sama seperti berikut. selain itu bisa di hidden legend nya. misal pengen lihat suhu saja tinggal klik saja legennya, bisa zoom, pan, dan save sebagai jpg.

tool tip pop up

tool tip pop up

save plot grafik jpg

save plot grafik jpg

ok silahkan download canvasjs tersebut dan jadikan 1 ya. kita mulai programnya

1. Header.php file header ini untuk menampung script sehingga di masing grafik cukup menginclude kan. disini saya memasukkan yang dibutuhan untuk plot grafik dan datetime picker untuk select berdasarkan waktu meski library yang saya gunakan untuk jquery versi 3 tidak kompatibel dengan date time pickernya. jadi gak ada gambar tangannya ketika kasi filter tapi masih fungsi. daripada bila versinya diturunkan plot grafiknya yang jadi gk bisa

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		
		<title>Graphic Weather Logger</title>
		
		<!-- stylesheets -->
		<link href="/assets/bootstrap.min.css" rel="stylesheet">
		<link href="/assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<link href="/assets/style.css" rel="stylesheet">
		
		<link href="/assets/jquery.simple-dtpicker.css" rel="stylesheet" type="text/css" />
		
		<!-- scripts -->
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fassets%2Fjs%2Fjquery-3.1.0.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />	
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fassets%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fassets%2Fjs%2Fcanvasjs.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fassets%2Fjs%2Fjquery.simple-dtpicker.js%22%20type%3D%22text%2Fjavascript%22%20%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		
	
	

	</head>

2. grafik.php
disini saya select all data berdasarkan node defaultnya yaitu N1, misal node nya ada banyak tinggal kasi argumen grafik.php?node=N2 . dari awal saya rancang untuk multi node ya.

<?php 
include "header.php"; 
include "config.php"; 
if(isset($_GET['node']))
{ 
$idnode = $_GET['node']; 
$query = "select unix_timestamp(waktu)*1000 as x,dhttemp,dhthum,bmptemp,bmppress from masterdata where idnode='$idnode' order by waktu asc"; 
} 
else 
{ 
        $idnode = "N1"; 
        //untuk multi data dari beberapa node kita ambil default node nya N1 
        $query = "select unix_timestamp(waktu)*1000 as x,dhttemp,dhthum,bmptemp,bmppress from masterdata where idnode='$idnode' order by waktu asc"; } $data = mysqli_query($conn, $query); $dataPointsdhttemp = array(); $dataPointsdhthum = array(); $dataPointsbmptemp = array(); $dataPointsbmppress = array(); while ($row = mysqli_fetch_array($data, MYSQL_ASSOC)) { array_push($dataPointsdhttemp,array('x'=>$row['x'],'y'=>$row['dhttemp']));
	array_push($dataPointsdhthum, array('x'=>$row['x'],'y'=>$row['dhthum']));
	array_push($dataPointsbmptemp, array('x'=>$row['x'],'y'=>$row['bmptemp']));
	array_push($dataPointsbmppress, array('x'=>$row['x'],'y'=>$row['bmppress']));
}

//ambil tanggal start date dan end date
$firstupdateU = reset($dataPointsdhttemp)['x']/1000;
$lastupdateU =end($dataPointsdhttemp)['x']/1000;
$firstupdate = date("d F Y H:i:s",$firstupdateU);
$lastupdate = date("d F Y H:i:s",$lastupdateU);

//bikin strip garis pembagi per pukul 00:00
$firstupdatetengahmalam = date("d F Y  H:i:s",$firstupdateU);
$begin = (new DateTime( $firstupdatetengahmalam ))->setTime(0,0);
$end = new DateTime( $lastupdate );
$begin = $begin->modify( '+1 day' );
$interval = new DateInterval('P1D');
$daterange = new DatePeriod($begin, $interval ,$end);

?>


<body style="padding-top: 3px;">



<div id="chartContainer"></div>






<div>

</div>





</body>


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%24(function%20()%20%7B%0A%20%20%20%20var%20chart%20%3D%20new%20CanvasJS.Chart(%22chartContainer%22%2C%20%7B%0A%20%20%20%20%20%20%20%20theme%3A%20%22theme%22%2C%0A%20%20%20%20%20%20%20%20zoomEnabled%3A%20true%2C%0A%09%09exportEnabled%3A%20true%2C%0A%20%20%20%20%20%20%20%20animationEnabled%3A%20true%2C%0A%09%09axisY%3A%20%0A%09%09%7B%0A%09%09%09title%3A%20%22Suhu%20C%20dan%20Kelembapan%20%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20titleFontFamily%3A%20%22arial%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20titleFontSize%3A%2012%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20includeZero%3A%20false%2C%0A%09%09%09suffix%3A%20%22%20C%20%2F%20%25%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09%09axisY2%3A%20%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3A%20%22Pressure%20pa%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20titleFontFamily%3A%20%22arial%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20titleFontSize%3A%2012%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20includeZero%3A%20false%2C%0A%09%09%09lineColor%3A%20%22%2386b402%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20suffix%3A%20%22%20pa%22%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20title%3A%20%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20%22Graphic%20Weather%20Logger%20of%20%3C%3Fphp%20echo%20%24idnode%3B%3F%3E%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09subtitles%3A%5B%0A%09%09%7B%0A%09%09%09text%3A%20%22by%20Mochamad%20Agung%20Tarecha%22%0A%09%09%0A%09%09%09%0A%09%09%7D%2C%0A%09%09%7B%0A%09%09%09%0A%09%09%09text%3A%20%22%3C%3Fphp%20echo%20%22Time%20range%20from%20%22.%24firstupdate%20.%22%20to%20%22.%20%24lastupdate%3B%3F%3E%22%0A%09%09%09%0A%09%09%7D%0A%09%09%5D%2C%0A%09%09%0A%09%09axisX%3A%0A%09%09%7B%20%20%20stripLines%3A%20%5B%0A%09%09%3C%3Fphp%20foreach(%24daterange%20as%20%24date)%20%7B%20echo%20%22%7B%22%3B%20echo%20%22value%3A%20%22.(string)%24date-%3Eformat(%22U%22).'000%2C'%3B%09%09%09%0A%09%09%09%09echo%20%22showOnTop%3A%20false%22%3B%20%20%20%20%20%20%20%20%20%20%20%0A%09%09%09%09echo%20%22%7D%2C%22%3B%0A%09%09%09%7D%0A%09%09%3F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%09%09%09valueFormatString%3A%20%22DD%20MMM%20YYYY%20HH%3Amm%22%0A%09%09%7D%2C%0A%09%09toolTip%3A%20%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20shared%3A%20true%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22line%22%2C%0A%09%09%09xValueType%3A%20%22dateTime%22%2C%0A%09%09%09xValueFormatString%3A%22DD%20MMM%20YYYY%20HH%3Amm%3Ass%22%2C%0A%09%09%09showInLegend%3A%20true%2C%09%09%0A%09%09%09name%3A%20%22Suhu%20C%20DHT%22%2C%09%09%09%09%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20dataPoints%3A%20%3C%3Fphp%20echo%20json_encode(%24dataPointsdhttemp%2C%20JSON_NUMERIC_CHECK)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09%09%7B%0A%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22line%22%2C%0A%09%09%09xValueType%3A%20%22dateTime%22%2C%0A%09%09%09xValueFormatString%3A%22DD%20MMM%20YYYY%20HH%3Amm%3Ass%22%2C%0A%09%09%09showInLegend%3A%20true%2C%0A%09%09%09name%3A%20%22Humidity%20%25%20DHT%22%2C%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20dataPoints%3A%20%3C%3Fphp%20echo%20json_encode(%24dataPointsdhthum%2C%20JSON_NUMERIC_CHECK)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22line%22%2C%0A%09%09%09xValueType%3A%20%22dateTime%22%2C%0A%09%09%09xValueFormatString%3A%22DD%20MMM%20YYYY%20HH%3Amm%3Ass%22%2C%09%09%09%0A%09%09%09showInLegend%3A%20true%2C%09%09%09%0A%09%09%09name%3A%20%22Suhu%20C%20BMP%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20dataPoints%3A%20%3C%3Fphp%20echo%20json_encode(%24dataPointsbmptemp%2C%20JSON_NUMERIC_CHECK)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22line%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20axisYType%3A%20%22secondary%22%2C%0A%09%09%09xValueType%3A%20%22dateTime%22%2C%0A%09%09%09xValueFormatString%3A%22DD%20MMM%20YYYY%20HH%3Amm%3Ass%22%2C%09%0A%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22Pressure%20pa%22%2C%0A%09%09%09showInLegend%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20dataPoints%3A%20%3C%3Fphp%20echo%20json_encode(%24dataPointsbmppress%2C%20JSON_NUMERIC_CHECK)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%7D%0A%09%09%0A%20%20%20%20%20%20%20%20%5D%2C%0A%09%09legend%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20%22pointer%22%2C%0A%09%09%09%09horizontalAlign%3A%20%22center%22%2C%0A%09%09%09%09verticalAlign%3A%20%22bottom%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20itemclick%3A%20function%20(e)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(typeof%20(e.dataSeries.visible)%20%3D%3D%3D%20%22undefined%22%20%7C%7C%20e.dataSeries.visible)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20e.dataSeries.visible%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20e.dataSeries.visible%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20chart.render()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20chart.render()%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</html>

hasilnya sebagai berikut

Grafik all time

Grafik all time

 

3. grafikwaktu.php

sama saja bedanya kita bisa milih node yang mana dan range waktu tertentu. script utamanya sama tinggal ada inputan formnya

<?php 
include "header.php"; 
include "config.php"; 
$startdate = ""; 
$enddate = ""; 
$idnode = "N1"; 
//defalut value 
if(isset($_POST['startdate'])&&isset($_POST['enddate'])&&isset($_POST['idnode'])) 
{       $startdate = $_POST['startdate']; 
        $enddate = $_POST['enddate']; 
        $idnode = $_POST['idnode']; 
        if(($startdate!="")&&($enddate!=""))
         { 
        $query = "select unix_timestamp(waktu)*1000 as x,dhttemp,dhthum,bmptemp,bmppress from masterdata where idnode='$idnode' and waktu between '$startdate' and '$enddate' order by waktu asc"; 
       } else {
          $query = "select unix_timestamp(waktu)*1000 as x,dhttemp,dhthum,bmptemp,bmppress from masterdata where idnode='$idnode' order by waktu asc"; }
 } else { $query = "select unix_timestamp(waktu)*1000 as x,dhttemp,dhthum,bmptemp,bmppress from masterdata where idnode='$idnode' order by waktu asc"; }
 $data = mysqli_query($conn, $query); $dataPointsdhttemp = array(); $dataPointsdhthum = array(); $dataPointsbmptemp = array(); $dataPointsbmppress = array();
 while ($row = mysqli_fetch_array($data, MYSQL_ASSOC)) { array_push($dataPointsdhttemp,array('x'=>$row['x'],'y'=>$row['dhttemp']));
	array_push($dataPointsdhthum, array('x'=>$row['x'],'y'=>$row['dhthum']));
	array_push($dataPointsbmptemp, array('x'=>$row['x'],'y'=>$row['bmptemp']));
	array_push($dataPointsbmppress, array('x'=>$row['x'],'y'=>$row['bmppress']));
}

//ambil tanggal start date dan end date
$firstupdateU = reset($dataPointsdhttemp)['x']/1000;
$lastupdateU =end($dataPointsdhttemp)['x']/1000;
$firstupdate = date("d F Y H:i:s",$firstupdateU);
$lastupdate = date("d F Y H:i:s",$lastupdateU);

//bikin strip garis pembagi per pukul 00:00
$firstupdatetengahmalam = date("d F Y  H:i:s",$firstupdateU);
$begin = (new DateTime( $firstupdatetengahmalam ))->setTime(0,0);
$end = new DateTime( $lastupdate );
$begin = $begin->modify( '+1 day' );
$interval = new DateInterval('P1D');
$daterange = new DatePeriod($begin, $interval ,$end);

?>

<body style="padding-top: 3px;">


<form action="grafikwaktu.php" method="post">


<div align="center">
    
	Node ID : 
	<select name="idnode">
<option value="N1" <?php if ($idnode=='N1') echo "selected"?>>N1</option>
<option value="N2" <?php if ($idnode=='N2') echo "selected"?>>N2</option>
<option value="N3" <?php if ($idnode=='N3') echo "selected"?>>N3</option>
<option value="N4" <?php if ($idnode=='N4') echo "selected"?>>N4</option>
<option value="N5" <?php if ($idnode=='N5') echo "selected"?>>N5</option>
<option value="N6" <?php if ($idnode=='N6') echo "selected"?>>N6</option>
<option value="N7" <?php if ($idnode=='N7') echo "selected"?>>N7</option>
	</select>
	
	
	Range time  : 
	<input type="text" name="startdate" id="startdate" value="<?php echo $startdate;?>"> - 
	<input type="text" name="enddate" id="enddate" value="<?php echo $enddate;?>">
	<input type="submit" name="submit" value="Filter">
	<button type="button" onclick="ClearFields();">Clear Filter</button>
	
	
</div>



</form>





<div id="chartContainer"></div>


</body>

	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%09%09%24(function()%7B%0A%09%09%09%24('%23startdate').appendDtpicker(%0A%09%09%09%7B%0A%09%09%09%09%09%22autodateOnStart%22%3A%20false%0A%09%09%09%7D)%3B%0A%09%09%7D)%3B%0A%09%09%24(function()%7B%0A%09%09%09%24('%23enddate').appendDtpicker(%0A%09%09%09%7B%0A%09%09%09%09%22autodateOnStart%22%3A%20false%0A%09%09%09%7D)%3B%0A%09%09%7D)%3B%0A%09%09%0A%09%09function%20ClearFields()%20%0A%09%09%7B%0A%0A%09%09%09document.getElementById(%22startdate%22).value%20%3D%20%22%22%3B%0A%09%09%09document.getElementById(%22enddate%22).value%20%3D%20%22%22%3B%0A%09%09%7D%0A%09%09%0A%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%0A%0A%24(function%20()%20%7B%0A%20%20%20%20var%20chart%20%3D%20new%20CanvasJS.Chart(%22chartContainer%22%2C%20%7B%0A%20%20%20%20%20%20%20%20theme%3A%20%22theme%22%2C%0A%20%20%20%20%20%20%20%20zoomEnabled%3A%20true%2C%0A%09%09exportEnabled%3A%20true%2C%0A%20%20%20%20%20%20%20%20animationEnabled%3A%20true%2C%0A%09%09axisY%3A%20%0A%09%09%7B%0A%09%09%09title%3A%20%22Suhu%20C%20dan%20Kelembapan%20%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20titleFontFamily%3A%20%22arial%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20titleFontSize%3A%2012%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20includeZero%3A%20false%2C%0A%09%09%09suffix%3A%20%22%20C%20%2F%20%25%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09%09axisY2%3A%20%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3A%20%22Pressure%20pa%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20titleFontFamily%3A%20%22arial%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20titleFontSize%3A%2012%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20includeZero%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20suffix%3A%20%22%20pa%22%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20title%3A%20%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20%22Graphic%20Weather%20Logger%20of%20%3C%3Fphp%20echo%20%24idnode%3B%3F%3E%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09subtitles%3A%5B%0A%09%09%7B%0A%09%09%09text%3A%20%22by%20Mochamad%20Agung%20Tarecha%22%0A%09%09%0A%09%09%09%0A%09%09%7D%2C%0A%09%09%7B%0A%09%09%09%0A%09%09%09text%3A%20%22%3C%3Fphp%20echo%20%22Time%20range%20from%20%22.%24firstupdate%20.%22%20to%20%22.%20%24lastupdate%3B%3F%3E%22%0A%09%09%09%0A%09%09%7D%0A%09%09%5D%2C%0A%09%09%0A%09%09axisX%3A%0A%09%09%7B%20%20%20stripLines%3A%20%5B%0A%09%09%3C%3Fphp%20foreach(%24daterange%20as%20%24date)%20%7B%20echo%20%22%7B%22%3B%20echo%20%22value%3A%20%22.(string)%24date-%3Eformat(%22U%22).'000%2C'%3B%09%09%09%0A%09%09%09%09echo%20%22showOnTop%3A%20false%22%3B%20%20%20%20%20%20%20%20%20%20%20%0A%09%09%09%09echo%20%22%7D%2C%22%3B%0A%09%09%09%7D%0A%09%09%3F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%09%09%09valueFormatString%3A%20%22DD%20MMM%20YYYY%20HH%3Amm%22%0A%09%09%7D%2C%0A%09%09toolTip%3A%20%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20shared%3A%20true%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22line%22%2C%0A%09%09%09xValueType%3A%20%22dateTime%22%2C%0A%09%09%09xValueFormatString%3A%22DD%20MMM%20YYYY%20HH%3Amm%3Ass%22%2C%0A%09%09%09showInLegend%3A%20true%2C%09%09%0A%09%09%09name%3A%20%22Suhu%20C%20DHT%22%2C%09%09%09%09%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20dataPoints%3A%20%3C%3Fphp%20echo%20json_encode(%24dataPointsdhttemp%2C%20JSON_NUMERIC_CHECK)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09%09%7B%0A%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22line%22%2C%0A%09%09%09xValueType%3A%20%22dateTime%22%2C%0A%09%09%09xValueFormatString%3A%22DD%20MMM%20YYYY%20HH%3Amm%3Ass%22%2C%0A%09%09%09showInLegend%3A%20true%2C%0A%09%09%09name%3A%20%22Humidity%20%25%20DHT%22%2C%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20dataPoints%3A%20%3C%3Fphp%20echo%20json_encode(%24dataPointsdhthum%2C%20JSON_NUMERIC_CHECK)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22line%22%2C%0A%09%09%09xValueType%3A%20%22dateTime%22%2C%0A%09%09%09xValueFormatString%3A%22DD%20MMM%20YYYY%20HH%3Amm%3Ass%22%2C%09%09%09%0A%09%09%09showInLegend%3A%20true%2C%09%09%09%0A%09%09%09name%3A%20%22Suhu%20C%20BMP%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20dataPoints%3A%20%3C%3Fphp%20echo%20json_encode(%24dataPointsbmptemp%2C%20JSON_NUMERIC_CHECK)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22line%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20axisYType%3A%20%22secondary%22%2C%0A%09%09%09xValueType%3A%20%22dateTime%22%2C%0A%09%09%09xValueFormatString%3A%22DD%20MMM%20YYYY%20HH%3Amm%3Ass%22%2C%09%0A%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22Pressure%20pa%22%2C%0A%09%09%09showInLegend%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20dataPoints%3A%20%3C%3Fphp%20echo%20json_encode(%24dataPointsbmppress%2C%20JSON_NUMERIC_CHECK)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%7D%0A%09%09%0A%20%20%20%20%20%20%20%20%5D%2C%0A%09%09legend%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20%22pointer%22%2C%0A%09%09%09%09horizontalAlign%3A%20%22center%22%2C%0A%09%09%09%09verticalAlign%3A%20%22bottom%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20itemclick%3A%20function%20(e)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(typeof%20(e.dataSeries.visible)%20%3D%3D%3D%20%22undefined%22%20%7C%7C%20e.dataSeries.visible)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20e.dataSeries.visible%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20e.dataSeries.visible%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20chart.render()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20chart.render()%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</html>



hasilnya sebagai berikut
ini yang kata saya krusornya gk muncul gambar tangan, tapi masih bisa digunakan

grafik seleksi waktu

grafik seleksi waktu

 

4. grafiklast24hour.php

sama seperti yang pertama bedanya langsung select 24 jam terakhir mulai pukul 00 tengah malam

<?php include "header.php"; include "config.php"; if(isset($_GET['node'])) { $idnode = $_GET['node']; $query = "select unix_timestamp(waktu)*1000 as x,dhttemp,dhthum,bmptemp,bmppress,waktu from masterdata where idnode='$idnode' and waktu >= curdate() order by waktu asc";
	
}
else
{
	$idnode = "N1";
	//untuk multi data dari beberapa node kita ambil default node nya N1
	$query = "select unix_timestamp(waktu)*1000  as x,dhttemp,dhthum,bmptemp,bmppress,waktu from masterdata where idnode='$idnode' and waktu >= curdate() order by waktu asc";
}


$data = mysqli_query($conn, $query);
$dataPointsdhttemp = array();
$dataPointsdhthum = array();
$dataPointsbmptemp = array();
$dataPointsbmppress = array();



while ($row = mysqli_fetch_array($data, MYSQL_ASSOC)) 
{
	array_push($dataPointsdhttemp,array('x'=>$row['x'],'y'=>$row['dhttemp']));
	array_push($dataPointsdhthum, array('x'=>$row['x'],'y'=>$row['dhthum']));
	array_push($dataPointsbmptemp, array('x'=>$row['x'],'y'=>$row['bmptemp']));
	array_push($dataPointsbmppress, array('x'=>$row['x'],'y'=>$row['bmppress']));
}

//ambil tanggal start date dan end date
$firstupdateU = reset($dataPointsdhttemp)['x']/1000;
$lastupdateU =end($dataPointsdhttemp)['x']/1000;
$firstupdate = date("d F Y H:i:s",$firstupdateU);
$lastupdate = date("d F Y H:i:s",$lastupdateU);

//bikin strip garis pembagi per pukul 00:00
$firstupdatetengahmalam = date("d F Y  H:i:s",$firstupdateU);
$begin = (new DateTime( $firstupdatetengahmalam ))->setTime(0,0);
$end = new DateTime( $lastupdate );
$begin = $begin->modify( '+1 day' );
$interval = new DateInterval('P1D');
$daterange = new DatePeriod($begin, $interval ,$end);

?>

<body style="padding-top: 3px;">


<div id="chartContainer"></div>


<div>

</div>



</body>


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%24(function%20()%20%7B%0A%20%20%20%20var%20chart%20%3D%20new%20CanvasJS.Chart(%22chartContainer%22%2C%20%7B%0A%20%20%20%20%20%20%20%20theme%3A%20%22theme%22%2C%0A%20%20%20%20%20%20%20%20zoomEnabled%3A%20true%2C%0A%09%09exportEnabled%3A%20true%2C%0A%20%20%20%20%20%20%20%20animationEnabled%3A%20true%2C%0A%09%09axisY%3A%20%0A%09%09%7B%0A%09%09%09title%3A%20%22Suhu%20C%20dan%20Kelembapan%20%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20titleFontFamily%3A%20%22arial%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20titleFontSize%3A%2012%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20includeZero%3A%20false%2C%0A%09%09%09suffix%3A%20%22%20C%20%2F%20%25%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09%09axisY2%3A%20%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3A%20%22Pressure%20pa%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20titleFontFamily%3A%20%22arial%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20titleFontSize%3A%2012%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20includeZero%3A%20false%2C%0A%09%09%09lineColor%3A%20%22%2386b402%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20suffix%3A%20%22%20pa%22%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20title%3A%20%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20%22Graphic%20Weather%20Logger%20of%20%3C%3Fphp%20echo%20%24idnode%3B%3F%3E%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09subtitles%3A%5B%0A%09%09%7B%0A%09%09%09text%3A%20%22by%20Mochamad%20Agung%20Tarecha%22%0A%09%09%0A%09%09%09%0A%09%09%7D%2C%0A%09%09%7B%0A%09%09%09%0A%09%09%09text%3A%20%22%3C%3Fphp%20echo%20%22Time%20range%20from%20%22.%24firstupdate%20.%22%20to%20%22.%20%24lastupdate%3B%3F%3E%22%0A%09%09%09%0A%09%09%7D%0A%09%09%5D%2C%0A%09%09%0A%09%09axisX%3A%0A%09%09%7B%20%20%20stripLines%3A%20%5B%0A%09%09%3C%3Fphp%20foreach(%24daterange%20as%20%24date)%20%7B%20echo%20%22%7B%22%3B%20echo%20%22value%3A%20%22.(string)%24date-%3Eformat(%22U%22).'000%2C'%3B%09%09%09%0A%09%09%09%09echo%20%22showOnTop%3A%20false%22%3B%20%20%20%20%20%20%20%20%20%20%20%0A%09%09%09%09echo%20%22%7D%2C%22%3B%0A%09%09%09%7D%0A%09%09%3F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%09%09%09valueFormatString%3A%20%22DD%20MMM%20YYYY%20HH%3Amm%22%0A%09%09%7D%2C%0A%09%09toolTip%3A%20%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20shared%3A%20true%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22line%22%2C%0A%09%09%09xValueType%3A%20%22dateTime%22%2C%0A%09%09%09xValueFormatString%3A%22DD%20MMM%20YYYY%20HH%3Amm%3Ass%22%2C%0A%09%09%09showInLegend%3A%20true%2C%09%09%0A%09%09%09name%3A%20%22Suhu%20C%20DHT%22%2C%09%09%09%09%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20dataPoints%3A%20%3C%3Fphp%20echo%20json_encode(%24dataPointsdhttemp%2C%20JSON_NUMERIC_CHECK)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09%09%7B%0A%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22line%22%2C%0A%09%09%09xValueType%3A%20%22dateTime%22%2C%0A%09%09%09xValueFormatString%3A%22DD%20MMM%20YYYY%20HH%3Amm%3Ass%22%2C%0A%09%09%09showInLegend%3A%20true%2C%0A%09%09%09name%3A%20%22Humidity%20%25%20DHT%22%2C%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20dataPoints%3A%20%3C%3Fphp%20echo%20json_encode(%24dataPointsdhthum%2C%20JSON_NUMERIC_CHECK)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22line%22%2C%0A%09%09%09xValueType%3A%20%22dateTime%22%2C%0A%09%09%09xValueFormatString%3A%22DD%20MMM%20YYYY%20HH%3Amm%3Ass%22%2C%09%09%09%0A%09%09%09showInLegend%3A%20true%2C%09%09%09%0A%09%09%09name%3A%20%22Suhu%20C%20BMP%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20dataPoints%3A%20%3C%3Fphp%20echo%20json_encode(%24dataPointsbmptemp%2C%20JSON_NUMERIC_CHECK)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%7D%2C%0A%09%09%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22line%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20axisYType%3A%20%22secondary%22%2C%0A%09%09%09xValueType%3A%20%22dateTime%22%2C%0A%09%09%09xValueFormatString%3A%22DD%20MMM%20YYYY%20HH%3Amm%3Ass%22%2C%09%0A%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22Pressure%20pa%22%2C%0A%09%09%09showInLegend%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20dataPoints%3A%20%3C%3Fphp%20echo%20json_encode(%24dataPointsbmppress%2C%20JSON_NUMERIC_CHECK)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%7D%0A%09%09%0A%20%20%20%20%20%20%20%20%5D%2C%0A%09%09legend%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20%22pointer%22%2C%0A%09%09%09%09horizontalAlign%3A%20%22center%22%2C%0A%09%09%09%09verticalAlign%3A%20%22bottom%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20itemclick%3A%20function%20(e)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(typeof%20(e.dataSeries.visible)%20%3D%3D%3D%20%22undefined%22%20%7C%7C%20e.dataSeries.visible)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20e.dataSeries.visible%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20e.dataSeries.visible%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20chart.render()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20chart.render()%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</html>

grafik last 24 hour

grafik last 24 hour

 

oke sekiat dahulu chapter berikut.

next chapter

7. Ngrok http tunneling

8. Sync data dengan server slave.

9. saya belum punya ide soal ini

 

terima kasih semoga bermanfaat.

Wassalamu’alaikum Wr. Wb.