Hi,
I am using yii2 basic application template. I have two table groupdetails and master table called district. I am using Chart JS for displaying graphical representation of data. I have a query as below:
select district.District, count(*) as Groups
from groupdetails, district
where groupdetails.DistrictId = district.DistrictId
group by groupdetails.DistrictId
This query will result into total no of groups each district belongs. The query is perfect.
Now I want that there should be user input field(for example drop down showing list of districts from district table).When user select “Ahmednagar” as district andd click on Search button then he should only be able to see the total no of groups in Ahmednagar. By default it will show the groups for all districts. And when he clicks on reset button, then also groups for all district should be displayed.
How to achieve this?
Hi there,
You can do it via UI changes and make an ajax call to the server and reload the graph with ajax response.
On reset, selecting the districts do the same with right parameters for where conditions.
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.
Hi There,
If it’s reset click and if you don’t have anything to show by default then just hide the element with id “district_wise_group_1” and display some text like “Please select the district to show the map” … kind of.
or reload the graph with empty data on variables district3, groups3. that will show empty graph ( but not good idea though )
