Hi I am using chart js to display data. I have an input field called District from where the user can select district and click on search button then the number of groups for that selected districts will be shown on the graph. And when I click on reset button all districts groups will be displayed. But the problem is when I hover on the canvas it is showing the previously searched data. How should I resolve this.
I have the below code as:
$(document).ready(function () {
$('#search').on('click', function () {
var district=$('#district').val();
$.ajax({
url: "index.php?r=dashboard/groups&district1="+district,
method: "GET",
dataType: "json",
success: function(data) {
console.log(data);
var district3 = [];
var groups3 = [];
for(var i in data) {
district3.push(" " +data[i].District);
groups3.push(data[i].Groups);
}
var chartdata = {
labels: district3,
datasets : [
{
label: 'Groups',
backgroundColor: 'skyblue',
borderWidth:1,
data: groups3
}
]
};
var ctx = document.getElementById("district_wise_group_1");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize: 1
},
}],
xAxes: [{
barPercentage: 0.1
}]
},
title: {
display: true,
text: 'District wise Groups',
fontSize:15,
fontColor:"black",
fontStyle:"bold"
}
},
});
},
error: function(data) {
console.log(data);
}
});
});
$('#reset').on('click', function () {
$.ajax({
url: "index.php?r=dashboard/grouprecords",
method: "GET",
dataType: "json",
success: function(data) {
console.log(data);
var district3 = [];
var groups3 = [];
for(var i in data) {
district3.push(" " +data[i].District);
groups3.push(data[i].Groups);
}
var chartdata = {
labels: district3,
datasets : [
{
label: 'Groups',
backgroundColor: 'skyblue',
borderWidth:1,
data: groups3
}
]
};
var ctx = document.getElementById("district_wise_group_1");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize: 1
},
}],
xAxes: [{
barPercentage: 0.1
}]
},
title: {
display: true,
text: 'District wise Groups',
fontSize:15,
fontColor:"black",
fontStyle:"bold"
}
},
});
},
error: function(data) {
console.log(data);
}
});
});
});