I'm facing problems with Google Chart
+ Foundation
. Gráfico
does not stay in width:100%
, and seems to lose formatting. And this happens when I use it in Tab
of Foundation
. Strange that if you use Grafico
on the first tab, it works normal. See the image:
Theproblemseemstobesimilarto this , but I do not know how to adapt that solution which was presented.
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();
Editing:
Follow jsFiddle for easy understanding.