-
Notifications
You must be signed in to change notification settings - Fork 0
/
testchart.php
82 lines (74 loc) · 1.8 KB
/
testchart.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<?php
//index.php
$connect = mysqli_connect("localhost", "root", "", "bolog2");
$query = '
SELECT o_price,
UNIX_TIMESTAMP(creat_date) AS datetime
FROM delevery
ORDER BY creat_date DESC, pick_date DESC
';
$result = mysqli_query($connect, $query);
$rows = array();
$table = array();
$table['cols'] = array(
array(
'label' => 'Date Time',
'type' => 'datetime'
),
array(
'label' => 'Temperature (°C)',
'type' => 'number'
)
);
while($row = mysqli_fetch_array($result))
{
$sub_array = array();
$datetime = explode(".", $row["datetime"]);
$sub_array[] = array(
"v" => 'Date(' . $datetime[0] . '000)'
);
$sub_array[] = array(
"v" => $row["o_price"]
);
$rows[] = array(
"c" => $sub_array
);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var options = {
title:'Sensors Data',
legend:{position:'bottom'},
chartArea:{width:'95%', height:'65%'}
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
<style>
.page-wrapper
{
width:1000px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="page-wrapper">
<br />
<h2 align="center">Display Google Line Chart with JSON PHP & Mysql</h2>
<div id="line_chart" style="width: 100%; height: 500px"></div>
</div>
</body>
</html>