Created
May 28, 2019 09:01
-
-
Save huyhoang8398/146a599cfe1f67ec2b5f3585f25946fd to your computer and use it in GitHub Desktop.
graph.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="chartContainer1" style="height: 500px; width: 100%;"></div> | |
<br/><br/><br/><br/> | |
<div id="chartContainer2" style="height: 500px; width: 100%;"></div> | |
<br/><br/><br/><br/> | |
<div id="chartContainer3" style="height: 500px; width: 100%;"></div> | |
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> | |
<script> | |
function chart(chartId = "chartContainer1", _data, nameChart) { | |
console.log(_data) | |
points = []; | |
_data.forEach(function(entry) { | |
new_arr = []; | |
entry['chart'].forEach(function(i) { | |
new_arr.push({ | |
label : i['x'], | |
y : parseInt(i['y']) | |
}); | |
points.push({ | |
type: "spline", | |
name: entry['index'], | |
dataPoints : new_arr | |
}); | |
}); | |
}); | |
console.log(points) | |
var chart = new CanvasJS.Chart(chartId, { | |
theme:"light2", | |
animationEnabled: true, | |
title:{ | |
text: nameChart | |
}, | |
axisY :{ | |
includeZero: false, | |
title: "Number of Viewers", | |
}, | |
legend:{ | |
cursor:"pointer", | |
itemclick : toggleDataSeries | |
}, | |
data:points | |
}); | |
chart.render(); | |
} | |
function toggleDataSeries(e) { | |
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible ){ | |
e.dataSeries.visible = false; | |
} else { | |
e.dataSeries.visible = true; | |
} | |
chart.render(); | |
} | |
</script> | |
<?php | |
//select individual_sensor.Sensor_Index from individual_sensor where individual_sensor.Sensor_ID = 'SEN0169' | |
$sensor_arr = ['SEN0169', 'SEN0114', 'SEN0193']; | |
$response = array(); | |
// include db_connect | |
$filepath = realpath(dirname(__FILE__)); | |
require_once $filepath . "/db_connect.php"; | |
// establish connection to db | |
$db = new DB_CONNECT(); | |
foreach ($sensor_arr as $item) { | |
// SQL query to insert data to table | |
if ($db->connect()) { | |
$query_str = "select individual_sensor.Sensor_Index from individual_sensor where individual_sensor.Sensor_ID = '" . $item . "'"; | |
$result = $db->query($query_str); | |
while ($row = $result->fetch_assoc()) { | |
$query_str = "select distinct data.Time as x, data.Value as y from individual_sensor as i_s, data | |
where i_s.Sensor_ID = '" . $item . "' and data.Sensor_Index = " . $row["Sensor_Index"] . " and i_s.Sensor_Index = data.Sensor_Index | |
order by i_s.Sensor_Index asc"; | |
$result2 = $db->query($query_str); | |
$new_array = []; | |
while ($row2 = $result2->fetch_assoc()) { | |
$n = $row2['y']; | |
$new_array[] = $row2; | |
} | |
$chart[] = ['index' => $row["Sensor_Index"], 'chart' => $new_array]; | |
} | |
if ($item == 'SEN0169') { | |
echo '<script type="text/javascript"> | |
chart("chartContainer1", ' . json_encode($chart) . ', "SEN0169"); | |
</script>'; | |
} else if ($item == 'SEN0114') { | |
echo '<script type="text/javascript"> | |
chart("chartContainer2", ' . json_encode($chart) . ',"SEN0114"); | |
</script>'; | |
} else if ($item == 'SEN0193') { | |
echo '<script type="text/javascript"> | |
chart("chartContainer3", ' . json_encode($chart) . ', "SEN0193"); | |
</script>'; | |
} | |
} | |
} | |
$db->close(); | |
?> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment