when chartjs change data from receive ajax response , on hover event at bars show old data
See original GitHub issuehi 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 () {
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:6 (2 by maintainers)
Top Results From Across the Web
javascript - Chartjs Bar Chart showing old data when hovering
This problem occurs, when we change the graph data by ajax. it will append the data in the graph. when we hover on...
Read more >Solved : hovering over Chartjs Bar Chart showing old data
I was facing one problem during working with chartjs. When I change my chartjs bar chart event then hover again, It was showing...
Read more >jQuery : Chartjs Bar Chart showing old data when hovering
jQuery : Chartjs Bar Chart showing old data when hovering [ Beautify Your Computer : https://www.hows.tech/p/recommended.html ] jQuery ...
Read more >multiple chart when mouse hover (ajax request) - YouTube
chartjs : - clear chart when mouse hover - chart.js with ajax request.
Read more >Hovering over line chart shows old chart data issue in chart.js ...
Since, you are initializing a new instance of chart each time the user selects an option, hence you need to destroy the previous...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
bump!