hi
i am using char js on my laravel project
char js is ok and no problem
i have filter form data that when clicked on filter button your chart data is changed and recieve from ajax response.
when chart is change data is ok but when hover over chart bar show old data of chart.
my code is :
let requestData = {};
function chartData(url, data) {
console.log("data is :", data);
let labels = [];
let values = [];
$.ajax({
url: url,
type: 'POST',
data: data,
dataType: "json",
async: false,
success: function (data) {
$.each(data.data, function (key, value) {
labels.push(key);
values.push(value);
});
}
});
return {
labels,
values
}
}
function updateChart(url, requestData) {
let results = chartData(url, requestData);
let ctx = document.getElementById("orders_chart").getContext('2d');
let orderChart = new Chart(ctx, {
type: 'bar',
data: {},
options: {
title: {
display: true,
text: 'نمودار بر مبنای روز'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
orderChart.clear();
orderChart.data = {
labels: results.labels,
datasets: [
{
label: "سفارش ها",
backgroundColor: '#e74c3c',
data: results.values,
},
]
};
orderChart.update();
}
// first initial
updateChart(url, requestData);
$('#filter_btn').click(function () {
Either destroy the graph you have made with window.myBar.destroy() or change the data values of the graph then update:
if ( typeof window.myBar == “object”){
window.myBar.data = config.data;
window.myBar.update();
}
Hope that helps.