javascript — ошибка при загрузке нескольких диаграмм Google одновременно

Что мне нужно??

Мне нужно иметь две диаграммы Google. Один на каждой вкладке в Интернете, как показано на скриншоте ниже
Вкладки

Что происходит??
Второй график не загружается должным образом и показывает смешанную информацию. Вы можете проверить на скриншоте ниже:
Вторая вкладка

¿¿Что я уже сделал ??

Прежде чем спросить здесь, я попробовал некоторые другие ответы:

Несколько диаграмм Google не отображаются должным образом на одной странице

а также

Отображение нескольких диаграмм Google на одной странице

Но не работает должным образом.

Вот мой код:

<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>

И вот div для каждого графика:

<div id="dual_1_div" style="width: 300px; height: 450px;"></div>
<div id="dual_2_div" style="width: 300px; height: 450px;"></div>

Есть идеи, что не так?

Кроме того, я использую загрузчик, чтобы сделать вкладки:

<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>

2

Решение

нужно подождать, пока не появится вкладка,
перед тем как нарисовать график в первый раз …

нарисуйте график, который показан по умолчанию,
тогда когда показанная вкладка срабатывает …

  // 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;
}
});

смотрите следующий полный фрагмент …

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

}
2

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]