tengo el siguiente problema. Al cargar la página me aparece esta gráifca full funcionando
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
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