0

Al momento de insertar mis 2 graficas con el ID me muestra los 2 pero no al mismo tiempo, solo se ve 1 pero si recargo la pagina se ve el otro, ya intente de todo y no me muestra errores en la consola, ayudaaaa :(

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Este es el código con el que mando a traer los gráficos, al inicio marco que las 2 graficas se ejecuten pero solo lo hace una!!

    CargarDatosGraficosBar();
    CargarDatosGraficosBarHorizontal();
    let myChart;
    function CargarDatosGraficosBar(){
        $.ajax({
            url:'controlador_grafico.php',
            type:'POST'
        }).done(function(resp){
            if(resp.length>0){
                var titulo = [];
                var cantidad = [];
                var colores = [];
                var data = JSON.parse(resp);
                for(var i=0;i<data.length;i++){
                    titulo.push(data[i][1]);
                    cantidad.push(data[i][2]);
                    colores.push(colorRGB());
                }
                CrearGrafico(titulo,cantidad,colores,'bar','GRAFICOS EN BARRAS DE PRODUCTO','graficoBar');

            }
        })
    };
    function CargarDatosGraficosBarHorizontal(){
        $.ajax({
            url:'controlador_grafico.php',
            type:'POST'
        }).done(function(resp){
            if(resp.length>0){
                var titulo = [];
                var cantidad = [];
                var colores = [];
                var data = JSON.parse(resp);
                for(var i=0;i<data.length;i++){
                    titulo.push(data[i][1]);
                    cantidad.push(data[i][2]);
                    colores.push(colorRGB());
                }
                CrearGrafico(titulo, cantidad,colores,'line','GRAFICOS EN LINEA DE PRODUCTO','graficoLine');

            }
        })
    };
    function  CrearGrafico(titulo, cantidad,colores,tipo,emcabezado,id){
        const ctx = document.getElementById(id);
                if (myChart!=null) {
                    myChart.destroy();
                }
                myChart = new Chart(ctx,  {
                type: tipo,
                data: {
                    labels: titulo,
                    datasets: [{
                        label: emcabezado,
                        data: cantidad,
                        backgroundColor:colores,
                        borderColor:colores,
                        borderWidth: 1
                    }]
                },
                options: {
                    legend: { display: false },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
    }

Aquí mando a llamar a las graficas en las cards que tengo asignadas y es donde me sale el error :(

       <div class="card-body">
         <canvas id="graficoBar" width="100%" height="70"></canvas>
      </div>
3
  • 1
    No hay forma de ayudar a ciegas: muestra un ejemplo mínimo verificable de lo que estás utilizando para mostrar los gráficos. No olvides que el código va como texto, con formato. Pulsa en editar para mejorar tu pregunta. Lee Cómo preguntar y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 23 jun. 2022 a las 13:45
  • Listro bro, ya hice mas detallado mi problema :) Commented el 23 jun. 2022 a las 14:09
  • Según veo quieres generar dos gráficas, pero solo estas especificando un contenedor, o te genera una o la otra, has intentado generar funciones independientes crearGrafico1 , crearGrafico2 en diferentes contenedores? Commented el 23 jun. 2022 a las 17:30

1 respuesta 1

0

Hola Rodrigo me hace un poco de ruido esto

if (myChart!=null) {
   myChart.destroy();
}
myChart =

Estas seteando una variable que entiendo que en chart.js es publica, el primer grafico la genera y el segundo al hacer el destroy te mata el grafico que te estaba mostrando previamente. Intenta usar una variable que muera dentro de la funcion y sacar el destroy

       var grafico = new Chart(ctx,  {
            type: tipo,
            data: {
                labels: titulo,
                datasets: [{
                    label: emcabezado,
                    data: cantidad,
                    backgroundColor:colores,
                    borderColor:colores,
                    borderWidth: 1
                }]
            },
            options: {
                legend: { display: false },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
1
  • Si era eso, la verdad nunca se me paso por la cabeza eso, MUCHAS GRACIAS! Commented el 24 jun. 2022 a las 18:04

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.