1

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

1 respuesta 1

1

Coloco el objeto canvas dentro de un contenedor

<div class="card-body" id="contenedor">
     <canvas id="chartGeneralDespacho" height="130"></canvas>
</div>

Y cada vez que refresque la informacion elimino el objeto canvas, para eliminar el objeto chart, y luego agrego de nuevo el canvas.(Reiniciar el grafico)

document.getElementById("chartGeneralDespacho").remove();

var canvas = document.createElement("canvas");
canvas.id = "chartGeneralDespacho"; 
document.getElementById("contenedor").appendChild(canvas);

var despachosGral = document.getElementById("chartGeneralDespacho").getContext("2d");
var chartdespachosGral = new Chart(despachosGral, { type: 'bar', data: chartData, options: chartOptions });

1
  • Gracias estimado, yo estaba realizando algo parecido, encerre en un div el canvas, lo eliminaba y lo volvia a crear, pero con otro metodo y me sobreescribia el anterior, de la forma que describes me sirvio! Muchas gracias estimado.
    – Oriel
    el 24 abr. 2020 a las 1:37

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.