ต้องการเชื่อมต่อข้อมูลระหว่าง JP graph และ datetimepicker แสดงผ่านหน้าเว็ปเพจ

<br>
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>

<script type="text/javascript">
$(function(){

	var startDateTextBox = $('#dateStart');
	var endDateTextBox = $('#dateEnd');

	startDateTextBox.datepicker({
		dateFormat: 'dd-M-yy',
	  	timeFormat: 'HH:mm ',
		onClose: function(dateText, inst) {
			if (endDateTextBox.val() != '') {
				var testStartDate = startDateTextBox.datetimepicker('getDate');
				var testEndDate = endDateTextBox.datetimepicker('getDate');
				if (testStartDate > testEndDate)
					endDateTextBox.datetimepicker('setDate', testStartDate);
			}
			else {
				endDateTextBox.val(dateText);
			}
		},
		onSelect: function (selectedDateTime){
			endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
		}
	});
	endDateTextBox.datepicker({
	dateFormat: 'dd-M-yy',
		timeFormat: 'HH:mm ',
		onClose: function(dateText, inst) {
			if (startDateTextBox.val() != '') {
				var testStartDate = startDateTextBox.datetimepicker('getDate');
				var testEndDate = endDateTextBox.datetimepicker('getDate');
				if (testStartDate > testEndDate)
					startDateTextBox.datetimepicker('setDate', testEndDate);
			}
			else {
				startDateTextBox.val(dateText);
			}
		},
		onSelect: function (selectedDateTime){
			startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
		}
	});

});


</script>
Start Date : <input type="text" name="dateStart" id="dateStart" value="" />
End Date : <input type="text" name="dateEnd" id="dateEnd" value="" />

<h4 align="right">

<?php  date_default_timezone_set('Asia/Bangkok');
$date_time = getdate();
$day = $date_time["weekday"];
$date = $date_time["mday"];
$month = $date_time["month"];
$year = $date_time["year"];
echo "วันที่ปัจจุบัน : $day $date $month $year<br/>";

$hour = $date_time["hours"];
$minute = $date_time["minutes"];
$second = $date_time["seconds"];
echo "เวลาปัจจุบัน : $hour:$minute:$second";

?>

</h4>

////ตืดต่อกับฐานข้อมูลเพื่อดึงค่าวันที่ลงตาราง//////
<?php

include("lightgraph.php");

	$link=Connection();

	$result=mysql_query("SELECT 'time' FROM `dbsensor` ",$link);


 ?>

<?php
 require_once('/jpgraph-3.5.0b1/src/jpgraph.php');
 require_once('/jpgraph-3.5.0b1/src/jpgraph_line.php');
 require_once ('/jpgraph-3.5.0b1/src/jpgraph_date.php');

 //////MySQL/////////
 $datax1 = array('time');
 $datay1 = array('lightin');
 $datay2 = array('lightout');

 $con=mysqli_connect("localhost","root","xxxxx","sensorroom");
 // Check connect
 if (mysqli_connect_errno()) {
   echo "Failed to connect to MySQL: " . mysqli_connect_error();
 }

 $result = mysqli_query($con,"SELECT * FROM `dbsensor` ORDER BY `id` ");
 while($row = mysqli_fetch_array($result)) {
  $datax1[] =  $row["time"];
 $datay1[] = $row["lightin"];
$datay2 [] = $row["lightout"];
// $y2_axis[$i] = $row["lightout"];

 }

 // Create a data set in range (50,70) and X-positions
 DEFINE('NDATAPOINTS',360);
 DEFINE('SAMPLERATE',240);
 $start = time();
 $end = $start+NDATAPOINTS*SAMPLERATE;
 for( $i=0; $i < NDATAPOINTS; ++$i ) {
     $datx1[$i] = rand(50,70);
    // $datay1[$i] = $start + $i * SAMPLERATE;
 }


//////graph detail////////

 $graph = new Graph(900,600,'auto');
 //$graph->SetScale("linlin");
 $graph->SetScale('datlin');

$theme_class = new OrangeTheme;
$graph->SetTheme($theme_class);

 $graph->SetTheme($theme_class);
 $graph->img->SetAntiAliasing(false);
 $graph->title->Set('Light Graph');
 $graph->SetBox(false);

 $graph->img->SetAntiAliasing();

//สร้างตำแหน่ง

$graph->SetMargin(100,50,50,100);



 $graph->yaxis->HideZeroLabel();
 // Start at 0
 $graph->yaxis->scale->SetAutoMin(0);
 $graph->yaxis->HideLine(false);
 $graph->yaxis->HideTicks(false,false);

 $graph->xgrid->Show();
 $graph->xgrid->SetLineStyle("solid");
 //$graph->xaxis->SetTickLabels(array('0','1','2','3',));
 $graph->xaxis->SetLabelAngle(90);
 $graph->xgrid->SetColor('#E3E3E3');
 //$graph->xaxis->scale->SetDateFormat('H:i');
 $graph->xaxis->scale->SetTimeAlign(HOURADJ_1);

 $p1 = new LinePlot($datay1);
 $graph->Add($p1);
 $p1->SetColor("#008080");
 $p1->SetLegend('lightin');

 $p2 = new LinePlot($datay2);
 $graph->Add($p2);
 $p2->SetColor("#B22222");
 $p2->SetLegend('lightout');

 //$line = new LinePlot($datax1,$xdata);
 //$line->SetLegend('Year 2005');
 //$line->SetFillColor('[email protected]');
 //$graph->Add($line);




$graph->legend->SetFrameWeight(1);

// Display the graph
$graph->Stroke();
?>