How to display chart based on input


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();
		url: "index.php?r=dashboard/groups&district1="+district,
		method: "GET",
			dataType: "json",
		success: function(data) {

			var district3 = [];
			var groups3 = [];

			for(var i in data) {
				district3.push(" " +data[i].District);

			var chartdata = {
				labels: district3,
				datasets : [
						label: 'Groups',
						backgroundColor: 'skyblue',
						data: groups3

			var ctx = document.getElementById("district_wise_group_1");

			var barGraph = new Chart(ctx, {
				type: 'bar',
				data: chartdata,
				options: {
        scales: {
            yAxes: [{
                ticks: {
				    stepSize: 1

				xAxes: [{
            barPercentage: 0.1
        title: {
            display: true,
            text: 'District wise Groups',

			error: function(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 )

Hi There,

In your dashboard controller action groups return all district’s data when there is no filter request!. i.e district1 is not set then select all the district data in your query or API whatever it so . …

now you can call only one ajax for both reset, filter search click events the graph will adjust accordingly!