I have a simple section in which I am displaying data from the database
, in my database I have two tables which shares 'sid` (session id); my tables
looks like this.
Events table
id sid targetbuttonid
1 1377Qqng1hn4866h7oh0t3uruu27dm5 Yes
2 9021391Q86nog1028jnoqol8bqcrt182o7 No
3 541Qqta8cs8s6kv60fei8i6jbesg36 Yes
And
Sessions table
id sid datetime
1 1377Qqng1hn4866h7oh0t3uruu27dm5 2019-08-07 07:00:03
2 9021391Q86nog1028jnoqol8bqcrt182o7 2019-08-07 07:00:11
3 541Qqta8cs8s6kv60fei8i6jbesg36 2019-08-13 09:56:51
I am displaying these data using charts js on pie chart like this
HTML
<body>
data from <input type="text" id = "firstdatepicker" name = "firstdatepicker">
to <input type="text" id = "lastdatepicker" name = "lastdatepicker">
<input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" />
<canvas id="myPieChart" width="400" height="400"></canvas>
</body>
UPDATE.
JS
$(document).ready(function(){
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$(function(){
$("#firstdatepicker").datepicker();
$("#lastdatepicker").datepicker();
});
$('#filter').click(function(){
var from_date = $('#firstdatepicker').val();
var to_date = $('#lastdatepicker').val();
if(from_date != '' && to_date != '')
{
$.ajax({
url:"https://meed.audiencevideo.com/admin/chats/stats.php",
type:"GET",
data:{from_date:from_date, to_date:to_date},
success:function(data){
var session= data[0].sessions;
var yes = data[0].num_yes;
var no =data[0].num_no;
var ctx = document.getElementById("myPieChart");
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["sessions","yes", "no"],
datasets: [{
label: 'Genders',
data: [session,yes, no],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 1)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 99, 132, 0.2)',
],
borderWidth: 1
}]
},
});
}
});
}
else
{
alert("Please Select Date");
}
});
});
Here is php.
<?php
//setting header to json
header('Content-Type: application/json');
//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'vvvv');
define('DB_PASSWORD', 'vvvvv');
define('DB_NAME', 'vvvvv');
$firstdate = $_POST['firstdatepicker'];
$lastdate = $_POST['lastdatepicker'];
//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if(!$mysqli){
die("Connection failed: " . $mysqli->error);
}
if (isset($_POST['firstdatepicker'])) {
$firstDate= $_POST['firstdatepicker'];
$lastDate= $_POST['lastdatepicker'];
$sql = sprintf("SELECT count(*) as num_rows, datetime, count(distinct sid) as sessions, sum( targetbuttonname = 'yes' ) as num_yes, sum( targetbuttonname = 'no' ) as num_no from events AND time BETWEEN '$firstdate' AND '$lastdate' ORDER BY datetime DESC");
}
//$query =sprintf("SELECT SUM( sid ) as session , COUNT( targetbuttonname ) as yes FROM events WHERE targetbuttonname LIKE 'Yes'");
$query = sprintf("SELECT count(*) as num_rows, count(distinct sid) as sessions, sum( targetbuttonname = 'yes' ) as num_yes, sum( targetbuttonname = 'no' ) as num_no from events;");
//execute query
$result = $mysqli->query($query);
//loop through the returned data
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
$result->close();
$mysqli->close();
print json_encode($data);
Now I want when user select date between certain dates, in pie chart it should display data based on those dates selected by user.
Unfortunately now when I select the dates data still the same live demo
What am I doing wrong in my codes?.
See Question&Answers more detail:
os 
