Laravel Chart JS cambia datos con un menú desplegable
Estoy tratando de mostrar datos de un gráfico que obtiene un Barangay específico (pueblo o distrito) de una lista desplegable. Por ejemplo, tengo un gráfico que muestra la cantidad de hombres y mujeres de un Barangay en los últimos diez años, y solo necesito seleccionar uno específico de la lista desplegable mencionada, y el gráfico cambiará los datos mostrados. Estoy intentando hacer esto a través de ajax con Chart.js.
Controlador
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'));
}
La variable $brgy
en la cláusula where es donde idealmente pondría la variable. Soy bastante nuevo en esto.
JavaScript
const brgy = document.getElementById('brgyselector');
brgy.addEventListener('change', changeBrgy);
function changeBrgy() {
// HACER COSAS AQUÍ
}
Gráfico de Géneros con Lista Desplegable de Barangay
¿Alguien tiene una idea de cómo hacer eso?
davy.ai
Para actualizar el gráfico con datos de un barangay específico seleccionado en un cuadro desplegable utilizando AJAX con Chart.js, puedes seguir estos pasos:
changeBrgy
, realiza una petición AJAX al métododemoHistory
de tu controlador, pasando el valor del barangay seleccionado como parámetro. Puedes utilizar el objetoXMLHttpRequest
o una librería como jQuery para esto. Por ejemplo:demoHistory
de tu controlador, obtén el parámetrobrgy
de la petición AJAX y úsalo en tu consulta para obtener los datos del barangay seleccionado. Devuelve la respuesta como un objeto JSON. Por ejemplo:success
de tu petición AJAX, utiliza los datos de respuesta para actualizar tu gráfico de Chart.js con los nuevos datos. Puedes utilizar el métododestroy
para eliminar el gráfico antiguo y crear uno nuevo con los datos actualizados. Por ejemplo:Con estos pasos, deberías poder actualizar tu gráfico de Chart.js con datos de un barangay específico seleccionado desde un cuadro desplegable utilizando AJAX.