Estoy tratando de mostrar datos de un gráfico que obtiene un barangay (pueblo o distrito) específico de un cuadro desplegable. Entonces, por ejemplo, tengo un gráfico que muestra el conteo de hombres y mujeres de un barangay de los últimos diez años, y solo necesito seleccionar uno específico de dicho cuadro desplegable, y el gráfico cambia los datos mostrados. Estoy tratando de 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 colocaría la variable idealmente. Soy bastante nuevo en esto.
JavaScript
const brgy = document.getElementById('brgyselector'); brgy.addEventListener('change', changeBrgy); function changeBrgy() { //DO STUFF HERE }Cuadro de géneros con menú desplegable Barangay
¿Alguien tiene una idea de cómo hacer eso?
Debe usar update() para actualizar los datos del gráfico en el éxito de ajax. Tal vez puedas hacer esto: (Hay un código de gráfico de ejemplo que también se usa en ajax)
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 // eg 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);No tengo idea de cómo se ven sus datos de respuesta ajax. Por lo tanto, puede modificar/establecer según sea necesario mientras actualiza chartdata en ajax con éxito.