es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Laravel Chart JS cambia datos con un menú desplegable

04 Aug, 2023 Programación

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?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    1. En tu función changeBrgy, realiza una petición AJAX al método demoHistory de tu controlador, pasando el valor del barangay seleccionado como parámetro. Puedes utilizar el objeto XMLHttpRequest o una librería como jQuery para esto. Por ejemplo: 
      function changeBrgy() {
    const selectedBrgy = this.value;

    $.ajax({
        url: '/demo-history', // reemplaza por la URL de tu controlador
        type: 'GET',
        dataType: 'json',
        data: {brgy: selectedBrgy},
        success: function(response) {
            // actualizar el gráfico con los datos de respuesta
        },
        error: function(xhr, status, error) {
            console.error(error);
        }
    });
}
    2. En el método demoHistory de tu controlador, obtén el parámetro brgy 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: 
      public function demoHistory(Request $request)
{
    $brgy = $request->input('brgy');

    $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'));
}
    3. En la función de devolución de llamada 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étodo destroy para eliminar el gráfico antiguo y crear uno nuevo con los datos actualizados. Por ejemplo: 
      function updateChart(data) {
    const ctx = document.getElementById('chart').getContext('2d');

    // destruir el gráfico antiguo
    if (window.chart) {
        window.chart.destroy();
    }

    // crear un nuevo gráfico
    window.chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.gendersbrgy.map(d => d.year),
            datasets: [
                {
                    label: 'Male',
                    data: data.gendersbrgy.map(d => d.one),
                    backgroundColor: 'rgba(66, 165, 245, 0.2)',
                    borderColor: 'rgba(66, 165, 245, 1)',
                    borderWidth: 1,
                    pointRadius: 1,
                },
                {
                    label: 'Female',
                    data: data.gendersbrgy.map(d => d.two),
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1,
                    pointRadius: 1,
                },
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                yAxes: [
                    {
                        ticks: {
                            beginAtZero: true,
                        },
                    },
                ],
            },
        },
    });
}

    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.

Comments are closed.