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 :(
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>