1

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?

1
  • 1
    ¿Qué es lo que no se entiende de la pregunta? Parece estar bastante clara y el problema (y la solución) se pueden ver en el código compartido. Quizás le falle algo el formato y sería mejor si hubiera un ejemplo mínimo verificable, pero parece entenderse el problema bien.
    – Alvaro Montoro
    el 18 abr. 2017 a las 15:51

1 respuesta 1

-2

Efectivamente tu problema esta en que estas repitiendo el id="grafica" para ambos canvas. Si bien uno esta oculto y el otro no, en el DOM se renderizan ambos por lo tanto javascript solo aplica al primero que aparezca y no a los dos.

       <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="grafica2" width="400" height="100"></canvas>
    </div>


 <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');

    var canvas2 = document.getElementById('grafica2').getContext('2d');
    window.bar = new Chart(canvas2, FOODATA)


    window.bar = new Chart(canvas, {
      type : "bar",
      data : datos,
      options : {
        elements : {
          rectangle : {
            borderWidth : 1,

            borderSkipped : 'bottom'
          }
        },
        responsive : true,
        title : {
          display : true,
          text : "2017"
        }
      }
    });
  });
  </script>

Ahi tendrias el canvas y el canvas2 para poner datos distintos.

15
  • Hola Zeuz, bienvenido. Esto es un comentario, no una respuesta. Deberías esperar a tener 50 de reputacion para poder comentar en cualquier sitio. Mientras tanto, procura responder preguntas que no requieran aclaracion del autor. Un saludo
    – lois6b
    el 18 abr. 2017 a las 14:04
  • Por muy buena que sea tu intencion con esta respuesta, estas respondiendo con un comentario y no con una respuesta. el 18 abr. 2017 a las 14:06
  • La idea era ayudar, se que es un comentario y no una respuesta. Pero nadie le comentaba nada como para poder colaborar. La próxima dejare en blanco la respuesta a la espera que algún "caritativo" con mas puntos le comente para poder ayudarlo. en fin creo que no hace crecer a la comunidad de stackoverflow en español sumar adeptos si por la mínima intención de ayudar se los califica negativamente. Dicho esto procederé a colaborar con nuestro compañero.
    – zeuz1983
    el 18 abr. 2017 a las 14:31
  • @zeuz1983 Si crees que ese parece ser el problema, modifica tu comentario para que parezca una respuesta arreglando el problema que tiene el op, así tendrá más peso :D
    – NaCl
    el 18 abr. 2017 a las 14:41
  • @NaCl es exactamente lo que hice.
    – zeuz1983
    el 18 abr. 2017 a las 14:45

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.