Estoy usando las pestañas (tab) de Bootstrap. Tengo dos y en el segundo tab estoy usando DataTable y Chart, pero no funcionan. En el primer tab funciona bien, leí algo sobre que los elementos del segundo tab están escondidos por eso no aplica, pero no estoy seguro, a ver si algún compañero sepa la solución.
Éste es un ejemplo de mi código HTML (reducido):
<div role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab1</a></li>
</ul>
</div>
<div id="tab1">
<canvas id="grafica" width="400" height="100"></canvas>
</div>
<div id="tab2">
<canvas id="grafica" width="400" height="100"></canvas>
</div>
Los tabs funcionan bien y paso de uno a otro sin problema, al final del código estoy agregando ChartJS y DataTable, y eso funciona bien en el primer tab. En el segundo es como si no hubiera agregado nada de Chart y DataTable.
Éste es mi código JS:
<script>
$(document).ready(function(){
var datos = {
labels : ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
datasets : [{
label : "2017",
backgroundColor : "rgb(26,187,156)",
data : [12.500, 11.900, 12.000, 10.100, 12.300, 12.000, 11.200, 10.150, 10.602, 12.000, 12.010, 12.992]
},
]};
var canvas = document.getElementById('grafica').getContext('2d');
window.bar = new Chart(canvas, {
type : "bar",
data : datos,
options : {
elements : {
rectangle : {
borderWidth : 1,
borderSkipped : 'bottom'
}
},
responsive : true,
title : {
display : true,
text : "2017"
}
}
});
});
</script>
Como puse arriba todo funciona bien en el primer tab, la gráfica se muestra y el DataTable funciona. El problema es el segundo tab, que no funciona nada en ese. ¿Por qué puede ser?¿Cómo puedo solucionarlo?