ChartJS根据日期更改显示的数据吗? [英] ChartJS changing displayed data based on date?
本文介绍了ChartJS根据日期更改显示的数据吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个简单的部分，其中显示了数据库中的数据 ，在我的数据库中，我有两个共享"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);
现在我想要当用户在某些日期之间选择日期时，在饼图中应显示基于用户选择的日期的数据.
现在不幸的是，当我选择日期数据时仍保持相同的实时演示
我的代码在做什么错了?.
解决方案
由于您要我查看您的问题，因此我在此代码段中重新创建了整个客户端，并且一切正常.该错误必须在php代码中.
我从来没有自己做过php，但是如果发现问题出在哪里，我会更新答案.如果要猜测，我会说您需要在某个地方使用$sql.
// bypass CORS
jQuery.ajaxPrefilter(function(options) {
if (options.crossDomain && jQuery.support.cors) {
options.url = 'https://cors-anywhere.herokuapp.com/' + options.url;
}
});
// updated code
$(document).ready(function() {
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$("#firstdatepicker").datepicker();
$("#lastdatepicker").datepicker();
$('#filter').click(function() {
var from_date = $('#firstdatepicker').val();
var to_date = $('#lastdatepicker').val();
if (from_date != '' && to_date != '') {
console.log(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) {
console.log(data[0])
var session = data[0].sessions;
var num_yes = data[0].num_yes;
var num_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, num_yes, num_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");
}
});
});
canvas {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery.ui.datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/sunny/jquery-ui.min.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"></link>
data from <input type="text" id="firstdatepicker" name="firstdatepicker" value="19-08-13"><br> to <input type="text" id="lastdatepicker" name="lastdatepicker" value="19-08-14">
<input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" />
<canvas id="myPieChart" width="400" height="400"></canvas>
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?.
解决方案
Since you asked me to take a look at your question I recreated the whole client side in this snippet and it's all working as expected. The error must be in the php code.
I never did php myself but I'll updated the answer if I find what's wrong with it. If I were to take a guess I would say that you need to use the $sql somewhere.
// bypass CORS
jQuery.ajaxPrefilter(function(options) {
if (options.crossDomain && jQuery.support.cors) {
options.url = 'https://cors-anywhere.herokuapp.com/' + options.url;
}
});
// updated code
$(document).ready(function() {
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$("#firstdatepicker").datepicker();
$("#lastdatepicker").datepicker();
$('#filter').click(function() {
var from_date = $('#firstdatepicker').val();
var to_date = $('#lastdatepicker').val();
if (from_date != '' && to_date != '') {
console.log(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) {
console.log(data[0])
var session = data[0].sessions;
var num_yes = data[0].num_yes;
var num_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, num_yes, num_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");
}
});
});
canvas {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery.ui.datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/sunny/jquery-ui.min.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"></link>
data from <input type="text" id="firstdatepicker" name="firstdatepicker" value="19-08-13"><br> to <input type="text" id="lastdatepicker" name="lastdatepicker" value="19-08-14">
<input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" />
<canvas id="myPieChart" width="400" height="400"></canvas>
这篇关于ChartJS根据日期更改显示的数据吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
