I'm trying to show data from a chart that gets a specific barangay(village or district) from a dropdown box. So, for example, I have a chart showing the male and female count of one barangay from the last ten years, and I only need to select a specific one from the said dropdown box, and the chart changes shown data. I'm trying to do this via ajax with Chart.js.
Controller
public function demoHistory()
{
$gendersbrgy = DB::table('demographics')
->selectRaw('sum(case when Q4=\'Male\' then 1 else 0 end) as one,
sum(case when Q4=\'Female\' then 1 else 0 end) as two,
year(created_at) as year')
->where('currentbrgy', $brgy)
->groupBy('brgy', 'year')
->orderBy('year', 'desc')
->limit(11)
->get();
return response()->json(compact('gendersbrgy');
}
The $brgy variable in the where clause is where I would put the variable ideally. I'm pretty new to this.
JavaScript
const brgy = document.getElementById('brgyselector');
brgy.addEventListener('change', changeBrgy);
function changeBrgy() {
//DO STUFF HERE
}
Chart of Genders with Barangay Dropdown
Does anyone have an idea how to do that?
You need to use update() to update chart data on ajax success.
Maybe you can do this:
(There's example chart code that's used in ajax, too)
var ctx_live = document.getElementById("mycanvas");
var myChart = new Chart(ctx_live, {
type: 'bar',
data: {
labels: [],
datasets: [{
data: [],
borderWidth: 1,
borderColor:'#00c0ef',
label: 'liveCount',
}]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js - Dynamically Update Chart Via Ajax Requests",
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
}
}
});
// logic to get new data
var getData = function() {
var e = document.getElementById("brgyselector");
var strUser = e.value;
$.ajax({
url: 'url_to_controller_action',
success: function(data) {
// process your data to pull out what you plan to use to update the chart
// e.g. new label and a new data point
// you can use loop through response data
// add new label and data point to chart's underlying data structures
myChart.data.labels.push("Label");
myChart.data.datasets[0].data.push('set point');
// re-render the chart
myChart.update();
}
});
};
const brgy = document.getElementById('brgyselector');
brgy.addEventListener('change', getData);
I have no idea how your ajax response data looks like. So you can modify/set as required while updating chartdata in ajax success.