<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
-->
<?php
// 에러가 발생하면 내용 표시
error_reporting(E_ALL);
ini_set('display_errors', '1');
$mysql_host = "localhost";
$mysql_user = "root";
$mysql_password = "1234";
$mysql_db = "test_db";
$conn = mysqli_connect($mysql_host, $mysql_user, $mysql_password, $mysql_db);
if (!$conn) {
die("Database Connect Error: " . mysqli_connect_error());
}
//echo "Database Connected.<br><br>";
$sql = "SELECT * FROM test_tb";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$data_array[] = $row;
}
$chart = json_encode($data_array);
} else {
echo "No Data";
}
//echo $chart;
mysqli_close($conn);
?>
<script type="text/javascript">
google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.load('current', { packages: ['table'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chart_array = <?php echo $chart; ?>;
//console.log(JSON.stringify(chart_array))
var header = ['Date&Time(MM-DD HH:MM)', 'Temp', 'Humid'];
var row = "";
var rows = new Array();
jQuery.each(chart_array, function(index, item) {
row = [
item.dt.substr(5, 11), // 너무 긴 날짜 및 시간을 짧게 추출
Number(item.temp),
Number(item.humid)
];
rows.push(row);
});
var jsonData = [header].concat(rows);
var data = new google.visualization.arrayToDataTable(jsonData);
var lineChartOptions = {
title: 'Temperaure & Humid',
hAxis: {
title: 'Time',
showTextEvery: 4 // X축 레이블이 너무 많아 보기 힘드므로 4개마다 하나씩 표시
},
series: {
0: { targetAxisIndex: 0 },
1: { targetAxisIndex: 1 }
},
vAxes: {
0: {
title: 'Temperature',
viewWindow: { min: -30, max: 50 }
},
1: {
title: 'Humid',
viewWindow: { min: 30, max: 100 }
}
}
//,
//curveType: 'function',
//legend: { position: 'bottom' }
};
var lineChart = new google.visualization.LineChart(document.getElementById('lineChart_div'));
lineChart.draw(data, lineChartOptions);
// 테이블 차트
var tableChartOptions = {
showRowNumber: true,
width: '40%',
height: '20%'
}
var tableChart = new google.visualization.Table(document.getElementById('tableChart_div'));
tableChart.draw(data, tableChartOptions);
}
</script>
</head>
<body>
<div id="lineChart_div" style="width: 900px; height: 500px"></div>
<div id="tableChart_div"></div>
</body>
</html>
