Hi,
I have a text input as District where user selects the district. and on click of search button I have displayed the graph which shows total number of groups present in the district.
Below is the js code. When I click on Reset button what should I do?
$(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 () {
});
});
I want that when the page loads, by default all districts containing the groups must be displayed. And on searching for a particular district only those district groups must be displayed. And when I click on Reset button, again all the districts containing groups must be loaded. (Here code is working for displaying chart based on user input but how to display all district wise groups by default and on click of reset button )