1
Hallo,
der Chart-Teil funkioniert.
Wenn ich aber das Formular mit dem Datum von bis davor setze, reagiert der Filter nicht.
index.php
data.php
der Chart-Teil funkioniert.
Wenn ich aber das Formular mit dem Datum von bis davor setze, reagiert der Filter nicht.
index.php
<title>Creating Dynamic Data Graph</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<style type="text/css">
BODY {
width: 90%;
}
#chart-container {
width: 100%;
height: auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
</head>
<body>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">PHP - Filter Range Of Date With MySQLi</h3>
<hr style="border-top:1px dotted #000;"/>
<form class="form-inline" method="POST" action="<?php echo htmlentities($_SERVER['SCRIPT_NAME']) ?>">
<label>Date:</label>
<input type="date" class="form-control" placeholder="Start" name="date1" value="<?php echo isset($_POST['date1']) ? $_POST['date1'] : '' ?>" />
<label>To</label>
<input type="date" class="form-control" placeholder="End" name="date2" value="<?php echo isset($_POST['date2']) ? $_POST['date2'] : '' ?>"/>
<button class="btn btn-primary" name="search"><span class="glyphicon glyphicon-search"></span></button> <a href="index.php" type="button" class="btn btn-success"><span class = "glyphicon glyphicon-refresh"><span></a>
</form>
</div>
<div id="chart-container">
<canvas id="graphCanvas"></canvas>
</div>
</div>
<script>
$(document).ready(function () {
showGraph();
});
function showGraph()
{
{
$.post("data.php",
function (data)
{
console.log(data);
var name = [];
var marks = [];
for (var i in data) {
name.push(data[i].xablesedatum);
marks.push(data[i].kwh);
}
var chartdata = {
labels: name,
datasets: [
{
label: 'Solarauswertung',
backgroundColor: '#49e2ff',
borderColor: '#46d5f1',
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
data: marks
}
]
};
var graphTarget = $("#graphCanvas");
var barGraph = new Chart(graphTarget, {
type: 'line',
data: chartdata
});
});
}
}
</script>
</body>
</html>data.php
<?php
header('Content-Type: application/json');
$con = mysqli_connect("localhost","root","test","phpsamples");
if(ISSET($_POST['search'])){
$date1 = date("Y-m-d", strtotime($_POST['date1']));
$date2 = date("Y-m-d", strtotime($_POST['date2']));
$sqlQuery = "SELECT * FROM `member` WHERE date(`date_submit`) BETWEEN '$date1' AND '$date2'") or die(mysqli_error())";
}else{
$sqlQuery = "SELECT * FROM `member`") or die(mysqli_error())";
}
$result = mysqli_query($con,$sqlQuery);
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
mysqli_close($con);
echo json_encode($data);
?>