2👍
✅
U can try to put ur ajax code in a setInterval function
setInterval(function(){
//Here
}, 3000);
Edit: i meant setInterval
2👍
Try this then:
JS
$(document).ready(function () {
$.ajax({
url: "http://localhost/mycharts/api/data.php",
method: "GET",
success: function (data) {
console.log(data);
var subholding = [];
var TotalAccounts = [];
for (var i in data) {
subholding.push("" + data[i].subholding);
TotalAccounts.push(data[i].TotalAccounts);
}
var chartdata = {
labels: subholding,
datasets: [
{
label: 'Total Accounts',
backgroundColor: [
"red",
"green",
"blue",
"purple",
"magenta",
"yellow",
"orange",
"black"
],
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200,
200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: TotalAccounts
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
function barGraph() {
subholding.push("" + data[i].subholding);
TotalAccounts.push(data[i].TotalAccounts);
data.update();
}
},
error: function (data) {
console.log(data);
}
});
});
setInterval(function(){
$(document).ready(function () {
$.ajax({
url: "http://localhost/mycharts/api/data.php",
method: "GET",
success: function (data) {
console.log(data);
var subholding = [];
var TotalAccounts = [];
for (var i in data) {
subholding.push("" + data[i].subholding);
TotalAccounts.push(data[i].TotalAccounts);
}
var chartdata = {
labels: subholding,
datasets: [
{
label: 'Total Accounts',
backgroundColor: [
"red",
"green",
"blue",
"purple",
"magenta",
"yellow",
"orange",
"black"
],
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200,
200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: TotalAccounts
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
function barGraph() {
subholding.push("" + data[i].subholding);
TotalAccounts.push(data[i].TotalAccounts);
data.update();
}
},
error: function (data) {
console.log(data);
}
});
});
}, 30000);
1👍
I have created a similar approach last year. This has been my simplified approach:
- initialize the chart with all options
- Call the Chartrefresh function
- Trigger the AJAX request with SetTimeout
- Recall the Chartrefresh function
I hope it helps.
$(document).ready(function() {
Chartrefresh();
});
var ctx = $("#mycanvas");
var myChartPF = new Chart(ctx, {
type: 'bar',
data: {
datasets: <?php echo json_encode($chartpfscore['data']); ?>,
labels: <?php echo json_encode($chartpfscore['labels']); ?>,
},
options: {
responsive: true,
title: {
display: true,
text: "Score ####",
fontSize: 22,
},
tooltips: {
mode: 'label'
},
legend: {
display: true,
position: 'bottom',
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: '####'
}
}],
yAxes: [
{
stacked: false,
position: "left",
id: "y-axis-0",
scaleLabel: {
display: true,
labelString: 'Average Score'
},
ticks: {
beginAtZero: true,
stepSize: 5
}
}, {
stacked: false,
position: "right",
id: "y-axis-1",
scaleLabel: {
display: true,
labelString: '###########'
},
ticks: {
beginAtZero: true,
stepSize: 1
}
}
]
}
}
});
function Chartrefresh()
{
// Function to autoupdate Chart
setTimeout(function()
{
$.ajax({
url : "<?php echo site_url('ajax/chartrequest')?>",
type: "GET",
dataType: "JSON",
success: function(newDataObject){
myChartPF.data.datasets = newDataObject;
window.myChartPF.update();
Chartrefresh();
}
}, 1000);
}
The data from the PHP Controller looks like this (data & labels):
[{"data":["58.0000","44.0000","50.6000","49.0000","57.2222","45.6667"],"label":"Average Score","yAxisID":"y-axis-0","backgroundColor":["rgba(222, 30, 101, 0.8)","rgba(171, 158, 153, 0.8)","rgba(125, 94, 166, 0.8)","rgba(228, 110, 23, 0.8)","rgba(21, 62, 140, 0.8)","rgba(241, 214, 31, 0.8)"],"borderWidth":3},{"data":["8","1","5","4","9","3"],"label":"No. Of Resource Schedules","yAxisID":"y-axis-1","borderWidth":3}]
["ProjectA","ProjectB","ProjectC","ProjectD","ProjectE","ProjectF"]
Source:stackexchange.com