I created a chart by extracting values from database.
However, I need to add a date picker interval, so I can select the time range of extracted data.
I can select the start and end date from Calendar, but after pushing the button, the data is not filtered.
It extracts all the existing values in the table.
My code consists of 2 files:
data.php is used to get the data from database.
graph.php passes the data above to CanvasJS script, which renders the graph.
I really appreciate your help on solving this.
Thank you!
data.php
Code: Select all
<?php
header('Content-Type: application/json');
$conn = mysqli_connect("localhost", "root", "", "graphs");
if (mysqli_connect_errno($conn))
{
echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
$timestamp_at = "";
$timestamp_at_to_date = "";
$queryCondition = "";
if(!empty($_POST["search"]["timestamp_at"])) {
$timestamp_at = $_POST["search"]["timestamp_at"];
list($fiy,$fim,$fid) = explode("-",$timestamp_at);
$timestamp_at_todate = date('Y-m-d');
if(!empty($_POST["search"]["timestamp_at_to_date"])) {
$timestamp_at_to_date = $_POST["search"]["timestamp_at_to_date"];
list($tiy,$tim,$tid) = explode("-",$_POST["search"]["timestamp_at_to_date"]);
$timestamp_at_todate = "$tiy-$tim-$tid";
}
$queryCondition .= "WHERE time BETWEEN '$fiy-$fim-$fid' AND '" . $timestamp_at_todate . "'";
}
$sql = "SELECT time, value1 from chart_data " . $queryCondition . " ORDER BY 1 asc";
$sql = "select timestamp, value1 from data_table";
$data_points = array();
$result = mysqli_query($conn, "$sql");
while($row = mysqli_fetch_array($result))
{
$point = array("label" => $row['timestamp'] , "y" => $row['value1']);
array_push($data_points, $point);
}
echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($conn);
?>
Code: Select all
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("data.php", function (result) {
var chart = new CanvasJS.Chart("chartContainer", {
data: [
{
dataPoints: result
}
]
});
chart.render();
});
});
</script>
</head>
<body>
<div class="graph-display">
<h2>Graph with trend evolution:</h2>
<form name="DatePicker" method="post" action="">
<p class="search_input">
<input type="text" placeholder="From Date" id="timestamp_at" name="search[timestamp_at]" value="<?php echo $timestamp_at; ?>" class="input-control" />
<input type="text" placeholder="To Date" id="timestamp_at_to_date" name="search[timestamp_at_to_date]" style="margin-left:10px" value="<?php echo $timestamp_at_to_date; ?>" class="input-control" />
<input type="submit" name="go" value="Search" >
</p>
<div id="chartContainer" style="width: 800px; height: 380px;"></div>
</form>
</div>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$.datepicker.setDefaults({
showOn: "button",
buttonImage: "datepicker.png",
buttonText: "Date Picker",
buttonImageOnly: true,
dateFormat: 'yy-mm-dd'
});
$(function() {
$("#timestamp_at").datepicker();
$("#timestamp_at_to_date").datepicker();
});
</script>
</body>
</html>
