5

Estou enfrentando problemas com Google Chart + Foundation. O Gráfico não fica em width:100%, e parece que perde a formatação. E isso acontece quando uso ele na Tab do Foundation. Estranho que se usar o Grafico na primeira aba, ele funciona normal. Vejam a imagem:

inserir a descrição da imagem aqui

O problema parece ser similar a este, porém não sei como adaptar essa solução que foi apresentada.

HTML:

<div class="row">
    <div class="medium-12 columns">
        <ul class="tabs" data-tabs id="sac-tabs">
            <li class="tabs-title is-active">
                <a href="#panel1" aria-selected="true">Relatórios</a></li>
            <li class="tabs-title"><a href="#panel2">Gráficos</a></li>            
        </ul>
        <div class="tabs-content" data-tabs-content="sac-tabs">
            <div class="tabs-panel is-active" id="panel1">
                <div class="row">
                    <div class="medium-12 columns">
                        CONTEUDO_TAB1
                    </div>
                </div>
            </div>
            <div class="tabs-panel" id="panel2">
                <div class="row">
                    <div class="medium-12 columns">
                        <div id="chart_div"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript:

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


        function drawVisualization() {
            // Some raw data (not necessarily accurate)
            var data = google.visualization.arrayToDataTable([
                ['Departamento', 'Concluídas', 'Andamento', 'Pendentes'],
                ['Vendas', 5, 6, 2],
                ['Peças', 3, 4, 6],
                ['Serviços', 1, 2, 3],
                ['Administrativo', 7, 5, 3]
            ]);

            var options = {
                title: 'Gráfico',
                hAxis: {title: 'Departamento'},
                seriesType: 'bars',
                colors: ['#21BA45', '#F90', '#DC3912'],
                series: {5: {type: 'line'}}
            };

            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        };
        $(document).foundation();

Edição:

Segue jsFiddle para facilitar o entendimento.

2
  • Consegues reproduzir o problema num jsFiddle?
    – Sergio
    19/12/2016 às 11:52
  • Sergio, fiz a edição com o jsFiddle 19/12/2016 às 11:57

2 Respostas 2

4

Isso acontece porque o gráfico é desenhado depois que a div já foi redenrizada, fazendo com que ele não consiga atingir 100%.

Você pode resolver colocando um setTimeout, assim quando clicar na tab, vai esperar um pouco pra desenhar o gráfico.

setTimeout(function (){
    chart.draw(data, options);
}, 10000);

No lugar do 10000 você escolhe o tempo que vai esperar para desenhar o gráfico. Ficaria assim:

$(document).foundation();

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

function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
        ['Departamento', 'Concluídas', 'Andamento', 'Pendentes'],
        ['Vendas', 5, 6, 2],
        ['Peças', 3, 4, 6],
        ['Serviços', 1, 2, 3],
        ['Administrativo', 7, 5, 3]
    ]);

    var options = {
        title: 'Gráfico',
        hAxis: {title: 'Departamento'},
        seriesType: 'bars',
        colors: ['#21BA45', '#F90', '#DC3912'],
        series: {5: {type: 'line'}}
    };

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

    setTimeout(function (){
        chart.draw(data, options);
    }, 10000);

   // chart.draw(data, options);
};
$(document).foundation();

Veja funcionando no Jsfiddle.

1
  • 1
    Isso mesmo Tais, muito obrigado :) 19/12/2016 às 13:13
0

Segue a solução do problema:

$(document).foundation();

$('#stabs').on('change.zf.tabs', function() {
  switch ($(this).children('.is-active').text().trim()) {
    case 'Tab 1':
      drawVisualization();
      break;

    case 'Tab 2':
      drawVisualization2();
      break;
  }
});

google.charts.load('current', {
    callback: drawVisualization,
    packages: ['corechart']
});

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Departamento', 'Concluídas', 'Andamento', 'Pendentes'],
        ['Vendas', 5, 6, 2],
        ['Peças', 3, 4, 6],
        ['Serviços', 1, 2, 3],
        ['Administrativo', 7, 5, 3]
    ]);

    var options = {
        title: 'Gráfico',
        hAxis: {title: 'Departamento'},
        seriesType: 'bars',
        colors: ['#21BA45', '#F90', '#DC3912'],
        series: {5: {type: 'line'}}
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

function drawVisualization2() {
    var data = google.visualization.arrayToDataTable([
        ['Departamento', 'Concluídas', 'Andamento', 'Pendentes'],
        ['Vendas', 5, 6, 2],
        ['Peças', 3, 4, 6],
        ['Serviços', 1, 2, 3],
        ['Administrativo', 7, 5, 3]
    ]);

    var options = {
        title: 'Gráfico',
        hAxis: {title: 'Departamento'},
        seriesType: 'bars',
        colors: ['#21BA45', '#F90', '#DC3912'],
        series: {5: {type: 'line'}}
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div2'));
    chart.draw(data, options);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css">
<div class="row">
    <div class="medium-12 columns">
        <ul class="tabs" data-tabs id="stabs">
            <li class="tabs-title is-active">
                <a href="#panel1" aria-selected="true">Tab 1</a></li>
            <li class="tabs-title"><a href="#panel2">Tab 2</a></li>            
        </ul>
        <div class="tabs-content" data-tabs-content="stabs">
            <div class="tabs-panel is-active" id="panel1">
                <div class="row">
                    <div class="medium-12 columns">
                    <p>
                    Tab 1
                    </p>
                    <div id="chart_div"></div>
                    </div>
                </div>
            </div>
            <div class="tabs-panel" id="panel2">
                <div class="row">
                    <div class="medium-12 columns">
                    <p>
                    Tab 2
                    </p>
                       <div id="chart_div2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .