Данные My Chart вызываются через ajax из базы данных MySQL, когда данные в базе данных обновляются, диаграмма не обновляется.
Диаграмма отображается правильно, просто не обновляется.
Я новичок в PHP и chartjs. Любая помощь была бы замечательной
Независимо от того, что я пробовал, я не могу заставить работать .update или .destroy.
Моя последняя попытка включить кнопку для обновления данных при нажатии также не удалась.
Мой код: HTML:
<div id="chart-container">
<canvas id="mycanvas"></canvas>
<div class="toolbar">
<button onclick="data">Refresh</button>
</div>
</div>
<!-- javascript -->
<script type="text/javascript"
src="modules/dashboards/js/jquery.min.js">
</script>
<script type="text/javascript"
src="modules/dashboards/js/Chart.min.js">
</script>
<script type="text/javascript" src="modules/dashboards/js/app.js">
</script>
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);
}
});
});
Ожидаемые результаты: при обновлении данных в БД диаграмма обновляется автоматически или при обновлении / открытии страницы
