Tengo un problema con un grafico chart.js dinamico que genero mediante una funcion. El grafico, al cargar la pagina, ejecuta una funcion, la cual genera automaticamente una consulta ajax, que me devuelve los datos que uso para generar el grafico. Esta funcion, recibe un parametro "anio", el cual es enviado al backend y realiza la consulta, la cual me trae la cantidad de despachos por mes que se generaron por año. Tambien tiene un pequeño formulario, el cual se puede consultar el año a mostrar, y es aqui donde radica el problema, ya que al realizar una nueva consulta, carga bien los datos y genera el nuevo grafico, pero este queda encima del anterior. Mi codigo Jquery:
date = new Date();
anioActual = date.getFullYear();
$(document).ready(chartDespachoGeneral(anioActual));
// Recibo input de año y realizo nueva consulta
$(document).on("click", "#filtroGraficoDespacho", function (e){
e.preventDefault();
var anioNew = $("#anioGraficoDespacho").val();
chartDespachoGeneral(anioNew);
})
function chartDespachoGeneral(anio) {
var randomColorLabel = new Array();
// Valor maximo de array data para yAxes
function MaxValueArray(array) {
return Math.max.apply(null, array);
}
dataAnioChart = new FormData();
dataAnioChart.append("anioDespGeneral", anio);
$.ajax({
type: "post",
url: "grafico_despacho.php",
data: dataAnioChart,
dataType: "json",
cache: false,
contentType: false,
processData: false,
success: function (response) {
if ( !$.isEmptyObject(response) && response != 'undefined') {
for (let i = 0; i < response.mes_nombre.length; i++) {
randomColorLabel[i] = '#'+ ('000000' + Math.floor(Math.random()*16777215).toString(16)).slice(-6);
}
// Datos de Grafico
var chartData = {
labels: response.mes_nombre,
datasets: [{
label: "Cantidad Despachos x mes",
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
backgroundColor: randomColorLabel,
borderWidth: 1,
data: response.cantidad_despachos,
}]
};
// Opciones de Grafico
var chartOptions = {
responsive: true,
legend: {
position: "none"
},
scales: {
xAxes: [{
ticks: {
fontStyle: "bold",
fontColor: "#222831",
beginAtZero: true
}
}],
yAxes: [{
ticks: {
fontColor: "#588da8",
beginAtZero: true,
stepSize: 0.5,
max: MaxValueArray(response.cantidad_despachos)+1
},
scaleLabel: {
display: true,
labelString: 'Total Despachos',
fontSize: 13,
fontStyle: 'bold'
}
}]
}
}
/* INICIALIZAMOS GRAFICO CON DATOS Y OPCIONES OBTENIDAS */
var despachosGral = document.getElementById("chartGeneralDespacho").getContext("2d");
var chartdespachosGral = new Chart(despachosGral, { type: 'bar', data: chartData, options: chartOptions });
}else {
$(".info-chart").html("No hay datos para mostrar");
}
}
})
}
El tipo de dato que devuelve el ajax es un objeto json de este estilo:
cantidad_despachos: Array [ "5", "8" ]
mes_nombre: Array [ "Enero", "Septiembre" ]
Vi que chart.js tiene una opcion para destruir un grafico y volver a cargar uno nuevo, pero no logro que funcione, si me pueden dar ayuda, se los agradeceria mucho