0

tengo el siguiente problema. Al cargar la página me aparece esta gráifca full funcionando introducir la descripción de la imagen aquí

pero cuando quiero cambiar el año, que lo ando realizando por un select me sale de esta manera y no me reinicia la página

introducir la descripción de la imagen aquí

lo que quiero realizar es que me cargue normal la grafica si escojo 2022. Empiezo a compartir código

<script>
    var base_url = "<?= base_url() ?>";
   // Aqui traigo el año y envio a la funcion del ajax a consultar

    $('#year').on('change',function(e) {
        var year = $(this).val();
        datagrafico2(base_url, year);
        // $('#chart2').load();
    });
    $('#year').trigger('change');

// aqui envio el ajax para consultar en lado servidor y traer un json
    function datagrafico2(base_url, year) {
        namesMonth = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Set", "Oct", "Nov", "Dic"];
        $.ajax({
            url: base_url + "Reportes/getData?id=<?= $inversion->id ?>",
            type: "POST",
            data: {
                year: year
            },
            dataType: "json",
            success: function(data) {
                var dias = new Array();
                var ganancia = new Array();
                $.each(data, function(key, value) {
                    dias.push(namesMonth[value.mes - 1]);
                    valor = Number(value.ganancia).toFixed(4) * 100;
                    ganancia.push(valor);
                });
                grafica(dias, ganancia).reset();
            }
        });
    }

 // Aqui ya empieza a graficar con apexchart
    function grafica(dias, ganancia) {

        var options = {
            chart: {
                type: 'bar',

            },
            series: [{
                name: 'ganancia %',
                data: ganancia 
            }],

            stroke: {
                show: true,
                width: 3
            },

            plotOptions: {
                bar: {
                    columnWidth: '90%',
                    distributed: true,
                }
            },
            xaxis: {
                labels: {
                    rotate: -45
                },
                categories: dias,
                tickPlacement: 'on'
            },
            yaxis: {
                title: {
                    text: 'Mes',
                },
            },
        }

        var chart = new ApexCharts(document.querySelector("#chart2"), options);

        chart.render();
    }
</script>

No creo necesario incluir el lado del servidor, ya que si me está trayendo los datos. Solo necesito que me reinicie la gráfica reemplazandola con la ya creada

1 respuesta 1

2

Primero podrías eliminar el anterior chart y posteriormente volver a crearla, así:

var chart = new ApexCharts(document.querySelector("#chart2"), options);
try {
  chart.destroy();
}
catch { }
var chart = new ApexCharts(document.querySelector("#chart2"), options);
chart.render();
1
  • me funciona solo si hay un minimo cambio en la relación de pantalla. Abro el menú de inspeccionar y me carga. Vuelvo a cambiar la fecha y reduzco un punto en la relación de aspecto y me muestra los datos que son. La idea es que me recarga al instante Commented el 3 feb. 2023 a las 22:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.