Gráfico está saindo invertido; com o valor mais alto com a coluna mais baixa que a coluna com o valor menor.
Passando o mouse pelas colunas observo que os valores estão corretos. Mas as colunas não ficam desenhadas na altura correta.
Se alguém puder ajudar, agradeço.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Celulas', 'Pessoas', 'Visitantes'],
<?php
if (is_array($total_pessoas_reuniao)) {
Foreach ($total_pessoas_reuniao as $raw) {
$celula = $raw['celula'];
$pessoas = $raw['totalpessoas'];
$visitantes= $raw['totalVisitantes'];
?>
['<?php echo $celula; ?>','<?php echo $pessoas; ?>','<?php echo $visitantes; ?>'],
<?php }
} ?>
]);
var celulasOptions = {
width: 700,
height: 450,
chart: {
title: 'Dados das células',
subtitle: 'Dados comparativos das células'
},
series: {
0: { axis: 'Pessoas' },
1: { axis: 'Visitantes' }
},
axes: {
y: {
Pessoas: {label: 'Quantidade de pessoas'},
visitantes: {side: 'right', label: 'Quantidade de visitantes'},
},
},
bar: { groupWidth: '60%' },
legend: { position: "relative" },
backgroundColor: 'white',
chartArea: {left:20,top:0,width:'100%',height:'75%'},
};
var classicOptions = {
width: 700,
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
title: 'Nearby galaxies - distance on the left, brightness on the right',
vAxes: {
// Adds titles to each axis.
0: {title: 'Quantidade'},
1: {title: 'pessoas'}
}
};
function drawCelulasChart() {
var celulasChart = new google.charts.Bar(chartDiv);
celulasChart.draw(data, google.charts.Bar.convertOptions(celulasOptions));
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Celulas';
button.onclick = drawCelulasChart;
}
drawCelulasChart();
};
</script>
<div id="chart_div" style="padding:10px !important;"></div>
