-
Notifications
You must be signed in to change notification settings - Fork 1
/
linechart.php
117 lines (112 loc) · 2.96 KB
/
linechart.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE HTML>
<html>
<head>
<title>Blood Pressure Line Chart - Last 20 Readings</title>
<script>
window.onload = function () {
var options = {
animationEnabled: true,
theme: "light2",
title:{
text: "Systolic and Diastolic Blood Pressure (Last 20 Readings)"
},
axisX:{
valueFormatString: "DD MMM"
},
axisY: {
title: "Pressure Reading",
suffix: "",
minimum: 50
},
toolTip:{
shared:true
},
legend:{
cursor:"pointer",
verticalAlign: "bottom",
horizontalAlign: "left",
dockInsidePlotArea: true,
itemclick: toogleDataSeries
},
data: [{
type: "line",
showInLegend: true,
name: "Systolic Pressure",
markerType: "square",
xValueFormatString: "DD MMM, YYYY",
color: "#F08080",
yValueFormatString: "#,##0",
dataPoints: [
<?php
require ("dbinfo.php");
// Create connection
$conn = new mysqli($Host, $User, $Password, $DBName);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "(SELECT date, systolic FROM bpdata ORDER BY date DESC LIMIT 20) ORDER BY date ASC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$mydate = $row["date"];
$thisdate = strtotime("-1 month", strtotime($mydate));
$newdate = date("Y, n, j", $thisdate);
$systolic = $row["systolic"];
echo "{ x: new Date($newdate), y: $systolic },";
}
}
$conn->close();
?>
]
},
{
type: "line",
showInLegend: true,
name: "Diastolic Pressure",
yValueFormatString: "#,##0",
dataPoints: [
<?php
require ("dbinfo.php");
// Create connection
$conn = new mysqli($Host, $User, $Password, $DBName);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "(SELECT date, diastolic FROM bpdata ORDER BY date DESC LIMIT 20) ORDER BY date ASC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$mydate = $row["date"];
$thisdate = strtotime("-1 month", strtotime($mydate));
$newdate = date("Y, n, j", $thisdate);
$diastolic = $row["diastolic"];
echo "{ x: new Date($newdate), y: $diastolic },";
}
}
$conn->close();
?>
]
}]
};
$("#chartContainer").CanvasJSChart(options);
function toogleDataSeries(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else{
e.dataSeries.visible = true;
}
e.chart.render();
}
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</body>
</html>