I am building a sample application which retrieves data from sensors and plots it on a web page. What i am trying to do plot the data based on the user input but so far i am not able to get it done.
What i would like to achieve as an end result is the following:
The user will be presented with a dropdown menu to choose from all available devices and their respective parameters. Those parameters might be barometric pressure, temperature, humidity and so on. Based on that, a chart should be presented to the user when he or she submits the chosen variables.
What I have done so far is calling the mysql server and retrieve the data via API and plot it just for a single device and a single value without any user interaction functionality.
Here is how i statically retrieve the data:
$(document).ready(function() {
$.ajax({
url : "http://192.168.31.225/lora/api/get_data1.php",
type : "GET",
success : function(data){
console.log(data);
var Time = [];
var temp = [];
for(var i in data) {
Time.push("" + data[i].time);
temp.push(data[i].temp);
}
var chartdata = {
labels: Time,
datasets: [
{
label: "Temperature",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(59, 89, 152, 0.75)",
borderColor: "rgba(59, 89, 152, 1)",
pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
pointHoverBorderColor: "rgba(59, 89, 152, 1)",
data: temp
}
]
};
var ctx = $("#mycanvas");
var LineGraph = new Chart(ctx, {
type: 'line',
data: chartdata
});
},
error : function(data) {
console.log(data);
}
});
});
The get_data1.php gets called which retrieves all of the available data from a single device. Here is the structure of the get_data1.php file
<?php
require_once(dirname(dirname(__FILE__)) . '/settings/mysqlhandler.php');
header('Content-Type: application/json');
$query = sprintf("SELECT * from Temperature");
$result = $con->query($query);
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
$result->close();
$con->close();
print json_encode($data);
?>
Could you provide any pointers on how should I proceed?