¿¿What i need??
I need to have two google charts. One on each tab of the web as per below screenshot Tabs
¿¿What's happening?? The seccond chart does not load properly and show the information mixed. You can check on below screenshot: Seccond tab
¿¿What i've done yet??
Before ask here, i tryed some others answers:
Multiple Google charts not displaying properly on the same page
and
Displaying multiple Google charts on same page
But does not working properly.
Here is my code:
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("43", { packages: ["corechart", "gauge", "table", "timeline", "bar"] });
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
dataTable = new google.visualization.DataTable();
var newData = <?php include ('tpl\include\test.php')?>
var numRows = newData.length;
var numCols = newData[0].length;
dataTable.addColumn('string', newData[0][0]);
for (var i = 1; i < numCols; i++)
dataTable.addColumn('number', newData[0][i]);
for (var i = 1; i < numRows; i++)
dataTable.addRow(newData[i]);
var options = {
width: 425,
height: 450,
chart: {
title: 'SLAs by Analist',
},
bars: 'horizontal'
}
;
var chart = new google.charts.Bar(document.getElementById('dual_1_div'));
chart.draw(dataTable, options);
//Second chart
dataTable2 = new google.visualization.DataTable();
var newData2 = <?php include ('tpl\include\test2.php')?>
var numRows2 = newData2.length;
var numCols2 = newData2[0].length;
dataTable2.addColumn('string', newData2[0][0]);
for (var ie = 1; ie < numCols2; ie++)
dataTable2.addColumn('number', newData2[0][ie]);
for (var ie = 1; ie < numRows2; ie++)
dataTable2.addRow(newData2[ie]);
var options2 = {
width: 425,
height: 450,
chart: {
title: 'By Analist',
},
bars: 'horizontal'
}
;
var chart2 = new google.charts.Bar(document.getElementById('dual_2_div'));
chart2.draw(dataTable2, options2);
}
</script>
</head>
And here are the divs for each chart:
<div id="dual_1_div" style="width: 300px; height: 450px;"></div>
<div id="dual_2_div" style="width: 300px; height: 450px;"></div>
Any idea what is wrong?
Also, im using bootstrap to make the tabs:
<div role ="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role"presentation" class="active">
<a href="#tab1" aria-controls="tab1" data-toggle="tab" role="tab">In progress</a>
</li>
<li role"presentation">
<a href="#tab2" aria-controls="tab2" data-toggle="tab" role="tab">Completed</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1"> <!--My Queue TAB-->
<div class="container-fluid">
<div class="flow">
<div class="container col-xs-8">
<?php
include ('tpl\include\ocases.column1.tpl.php')
?>
</div>
<div class="container col-xs-4" > <!-- Grafico! -->
<nav class="bs-docs-sidebar affix">
<?php
include ('tpl\include\ocases.column2.tpl.php')
?>
</nav>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab2"> <!-- Completed TAB-->
<div class="container-fluid">
<div class="flow">
<div class="container col-xs-8">
<div class="table-responsive">
<?php
include ('tpl\include\ocases.completed.columna1.tpl.php')
?>
</div>
</div>
<div class="container col-xs-4" > <!-- Grafico! -->
<nav class="bs-docs-sidebar affix">
<?php
include ('tpl\include\ocases.completed.columna2.tpl.php')
?>
</nav>
</div>
</div>
</div>
</div>
</div>
need to wait until the tab is shown,
before drawing the chart for the first time...
draw the chart that is shown by default,
then when tab shown event fires...
// draw default chart
chart.draw(dataTable, options);
// draw chart when tab is shown
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).html()) {
case 'In progress':
chart.draw(dataTable, options);
break;
case 'Completed':
chart2.draw(dataTable2, options2);
break;
}
});
see following full snippet...
google.charts.load("43", { packages: ["corechart", "gauge", "table", "timeline", "bar"] });
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
dataTable = new google.visualization.DataTable();
var newData = <?php include ('tpl\include\test.php')?>
var numRows = newData.length;
var numCols = newData[0].length;
dataTable.addColumn('string', newData[0][0]);
for (var i = 1; i < numCols; i++)
dataTable.addColumn('number', newData[0][i]);
for (var i = 1; i < numRows; i++)
dataTable.addRow(newData[i]);
var options = {
width: 425,
height: 450,
chart: {
title: 'SLAs by Analist',
},
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('dual_1_div'));
//Second chart
dataTable2 = new google.visualization.DataTable();
var newData2 = <?php include ('tpl\include\test2.php')?>
var numRows2 = newData2.length;
var numCols2 = newData2[0].length;
dataTable2.addColumn('string', newData2[0][0]);
for (var ie = 1; ie < numCols2; ie++)
dataTable2.addColumn('number', newData2[0][ie]);
for (var ie = 1; ie < numRows2; ie++)
dataTable2.addRow(newData2[ie]);
var options2 = {
width: 425,
height: 450,
chart: {
title: 'By Analist',
},
bars: 'horizontal'
};
var chart2 = new google.charts.Bar(document.getElementById('dual_2_div'));
// draw default chart
chart.draw(dataTable, options);
// draw chart when tab is shown
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).html()) {
case 'In progress':
chart.draw(dataTable, options);
break;
case 'Completed':
chart2.draw(dataTable2, options2);
break;
}
});
}