【发布时间】：2019-08-13 13:57:16
【问题描述】：
我有一个简单的部分，我在其中显示来自数据库的数据 ，在我的数据库中，我有两个共享“sid”（会话 id）的表；我的桌子 看起来像这样。
Events table
id sid targetbuttonid
1 1377Qqng1hn4866h7oh0t3uruu27dm5 Yes
2 9021391Q86nog1028jnoqol8bqcrt182o7 No
3 541Qqta8cs8s6kv60fei8i6jbesg36 Yes
还有
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
我正在像这样在饼图上使用图表 js 显示这些数据
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>
更新。
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");
}
});
});
这里是 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);
现在我想当用户在某些日期之间选择日期时，在饼图中它应该根据用户选择的日期显示数据。
不幸的是，现在当我选择日期数据仍然相同live demo
我的代码做错了什么？
【问题讨论】：
-
你是如何处理输入变化的？我没有看到你的代码
-
@JoseRojas 抱歉我忘了添加过滤器处理部分，现在检查更新的问题
标签： javascript php jquery html chart.js