3

Al crear un timeline con google charts me corta la primera columna y no se ve entera, por las pruebas que he hecho, solo pasa si el 'div' del chart está dentro de otro 'div', en cambio, si está directamente en la pagina sale bien.

Haciendo pruebas he logrado reproducir el efecto, resulta que es por el contenedor donde tengo el chart.

El chart esta dentro de unas pestañas de Jquery y si el chart lo pongo en la primera pestaña no hay problema en cambio si el mismo chart lo pongo en la segundo, tercera etc. se puede ver como lo pinta mal.

http://jsfiddle.net/CnEUh/3563/

4
  • Con la info que aportas es complicado poder ayudarte. Si puedes pegar algo de código o preparar un jsfiddle nos sería más fácil ayudarte.
    – eledgaar
    Commented el 2 ago. 2016 a las 10:35
  • Si eliminas el primer elemento <li> verás que se te ve perfecto. Por lo que no creo que tenga que ver con Google sino más bien en el comportamiento de las pestañas. Commented el 2 ago. 2016 a las 11:42
  • Efectivamente, ese es el problema, cuando el chart esta en la primera pestaña funciona, pero en cuanto lo pones en cualquier otra lo corta, voy a ver que se puede hacer... pero si... claramente es del comportamiento de las pestañas...gracias por tu ayuda. ;)
    – Orange
    Commented el 2 ago. 2016 a las 13:44
  • Posiblemente relacionado (del sitio en inglés): stackoverflow.com/questions/20290314/…
    – Rubén
    Commented el 4 ago. 2016 a las 12:40

1 respuesta 1

0

Llama drawChart() al activar las pestañas. Quedaría de la siguiente forma:

$("#tabs").tabs({
    activate: function (event, ui) {
        var active = $('#tabs').tabs('option', 'active');
        drawChart();
        $("#tabid").html('the tab id is ' + $("#tabs ul>li a").eq(active).attr("href"));

    }
}

);

A continuación el código completo usando stacksnippet en lugar de jsfiddle.

$("#tabs").tabs(
  {activate: 
    function (event, ui) {
      var active = $('#tabs').tabs('option', 'active');
      drawChart();
      $("#tabid").html('the tab id is ' + $("#tabs ul>li a").eq(active).attr("href"));
    }
  }
);


 google.charts.load('current', {
     'packages': ['timeline']
   });
   google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
     var data = new google.visualization.DataTable({

       cols: [{
         id: 'Responsable',
         label: 'Responsable',
         type: 'string'
       }, {
         id: 'Inicio',
         label: 'Inicio',
         type: 'date'
       }, {
         id: 'Fin',
         label: 'Fin',
         type: 'date'
       }],

       rows: [{
           c: [{
             v: 'Alberto Salas Muñoz'
           }, {
             v: 'Date(2016, 8, 6)'
           }, {
             v: 'Date(2016, 8, 7)'
           }]
         }, {
           c: [{
             v: 'Cristian Esteban Palermo'
           }, {
             v: 'Date(2016, 8, 7)'
           }, {
             v: 'Date(2016, 8, 8)'
           }]
         }, {
           c: [{
             v: 'Ignacion Herranz Garcia'
           }, {
             v: 'Date(2016, 8, 8)'
           }, {
             v: 'Date(2016, 8, 9)'
           }]
         }

       ]
     });

     var options = {
       height: 450,
       width: 600,
       timeline: {
         groupByRowLabel: true
       }

     };

     var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

     chart.draw(data, options);
   }
body {
    background-color: #eef;
}
#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
/* Note that jQuery UI CSS is loaded from Google's CDN in the "Add Resources" pane to the left.  Normally this would be done in your <head> */
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>
        </li>
        <li><a href="#tabs-2">Tab 2</a>
        </li>
        <li><a href="#tabs-3">Tab 3</a>
        </li>
    </ul>
    <div id="tabs-1">
       
    </div>
    <div id="tabs-2">
         <div id="chart_div"></div>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
</div>
<div id="tabid"></div>

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.