graph_report.php - aiegoo/sensor GitHub Wiki

<!-- jquery from remote url -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- plot.ly -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<style>
body, html { padding:0; margin:0; }

/* layout */
#contentBase {
	font-size: 13px;
	width: 100%;
	height: 100%;
}

#loadingScreen {
	position: absolute;
	z-index: 32767;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}

#loadingScreen span {
	text-align: center;
	font-size: 14px; 
	position: absolute; 
	left: 50%;
	top: 50%; 
	width: 390px;
	margin-left: -200px;
	margin-top: -30px;
	padding: 10px;
	background-color: #fff;
	border-radius: 5px;
}

/* table 2: search header */
.searchTable {
	border: 1px solid #ccc; 
	margin: 10px; 
	overflow: auto;
	background-color: #eee;
}

.searchTable th {
	background-color: #eaeaea;
	padding: 5px;
}

.searchTable td {
	padding: 5px;
	background-color: #fff;
}

.searchTable input, .searchTable select {
	padding: 3px;
}

.searchTable button {
	min-width: 50px;
	padding: 3px 4px;
}

/* graph */
.graphBody {
	/* width:1880px;
	height:280px; */
	border:1px solid #ccc;
	margin:10px;
	background-color:#fff;
}
</style>
<script> // RAW DATA URL var rawDataURL = 'http://usn.lightup.co.kr/olorasys/cultasset/datatable_csv.php?type=&startDate=&endDate=&deviceIndex='; var xField = 'registDate'; // var yField = 'data1'; 2)"; $graphMode = "scatter"; } ?> function prepData(deviceIndex, rawData) { var x = []; var y = []; var y2 = []; var type = ""; rawData.forEach(function(datum, i) { x.push(new Date(datum[xField])); y.push(datum['data1']); // ๊ตฌ๊ธฐ์šธ๊ธฐ, ์˜จ์Šต๋„ if("=$type?>" == "INCLINOMETER" || "=$type?>" == "TEMPHUMI") { y2.push(datum['data2']); } // ์‹ ๊ธฐ์šธ๊ธฐ else if("=$type?>" == "ANGLE") { y2.push(datum['data2']); } i++; }); return [{ mode: 'lines', x: x, y: y, name: '', type: type } , { mode: 'lines', x: x, y: y2, name: '', type: type } ]; // END return } // END prepData() function drawData(name, deviceIndex) { Plotly.d3.csv(rawDataURL + deviceIndex, function(err, rawData) { if(err) { throw err; } var data = prepData(deviceIndex, rawData); var layout = { title: name + ', ~ ', xaxis: { tickformat: "%Y-%m-%d %H:%M", }, yaxis: { autotick: true, fixedrange: true, title: '' }, yaxis2: { autotick: false, overlaying: 'n', side: 'right', title: '' }, type: '', showlegend: true, margin: { l: 45, r: 35, b: 35, t: 65, pad: 15 } }; Plotly.plot('graph_' + deviceIndex, data, layout, {scrollZoom: false}); }); } // END drawData() </script>
๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ž ์‹œ๋งŒ ๊ธฐ๋‹ค๋ ค ์ฃผ์„ธ์š”...

โ–ถ Device # ๋ณด๊ณ ์„œ์šฉ ๊ทธ๋ž˜ํ”„ ์ถœ๋ ฅ (๋ณธ๊ฒฉ์ž๋™๊ทธ๋ž˜ํ”„-3000)

<!-- search form -->
<form name="frmSearchForm" method="GET" action="graph_report.php">
	<table class="searchTable">
	<tr>
	<th>์„ผ์„œ๋…ธ๋“œ ๋ฒˆํ˜ธ (deviceIndex)</th>
	<td>
		<input type="number" id="deviceIndex" name="deviceIndex" value="<?php echo $deviceIndex?>" />
	</td>
	<th>์กฐํšŒ๊ธฐ๊ฐ„ (yyyy-MM-dd ํ˜•ํƒœ ์ž…๋ ฅ)</th>
	<td>
		<input type="text" id="startDate" name="startDate" value="<?php echo $startDate?>" /> ~ <input type="text" id="endDate" name="endDate" value="<?php echo $endDate?>" />
	</td>
	<th>์„ผ์„œ ์ข…๋ฅ˜ ์„ ํƒ</th>
	<td>
		<select name="type">
		<option value="ANGLE" <?=($type == "ANGLE" ? "selected" : "")?>>์‹ ๊ธฐ์šธ๊ธฐ</option>
		<option value="INCLINOMETER" <?=($type == "INCLINOMETER" ? "selected" : "")?>>๊ตฌ๊ธฐ์šธ๊ธฐ</option>
		<option value="DISTANCE" <?=($type == "DISTANCE" ? "selected" : "")?>>์‹ ์ด๊ฒฉ</option>
		<option value="CRACK" <?=($type == "CRACK" ? "selected" : "")?>>๊ตฌ์ด๊ฒฉ</option>
		<option value="TEMPHUMI" <?=($type == "TEMPHUMI" ? "selected" : "")?>>์˜จ์Šต๋„</option>
		<option value="OSCILLATION" <?=($type == "OSCILLATION" ? "selected" : "")?>>์‹ ์ง„๋™</option>
		</select>
	</td>
	<th>
		<button type="submit">์กฐํšŒ</button>
		* ์ฃผ์˜: ์—ฌ๋Ÿฌ ๋ฒˆ ๋ˆ„๋ฅด์ง€ ๋งˆ์‹ญ์‹œ์˜ค. (ํญ๋ฐœํ•ฉ๋‹ˆ๋‹ค!)
	</th>
	</tr>
	</table>
</form>

<!-- graph -->
<div id="graph_<?=$deviceIndex?>" class="graphBody"></div>

<script>
$(document).ready(function() {
	drawData("Device #<?=$deviceIndex?>", <?=$deviceIndex?>);
});
</script>
โš ๏ธ **GitHub.com Fallback** โš ๏ธ