Google charts Axis showing disordered values and columns are suming - google-visualization

Question

The axis is showing disordered values and the columns are summing I don't know why.
The data is in percentage although it could be more then 100% if the achievement is superior to target.
This is my code (before it there is one Foreach):
$vttCloud = number_format((($CountryCloudAchieved)*pow(($CountryTarget*0.25 ), -1))*100, 2, ",", ".");
$vtt = number_format((($CountryAchieved)*pow(($CountryTarget), -1))*100, 2, ",", ".");
if ($vttCloud == 0 && $vtt == 0) {} else {
?>
['<?php echo $Country; ?>', '<?php echo $vtt; ?>', '<?php echo $vttCloud; ?>'],
<?php } } ?>

Answer 1

use numbers instead of strings for columns 1 & 2 (lose the single quotes)...
['<?php echo $Country; ?>', <?php echo $vtt; ?>, <?php echo $vttCloud; ?>],
strange it will let you draw a chart with strings as values,
see following two examples, one with numbers, the other with strings...
google.charts.load('current', {
callback: function () {
drawChartGood();
drawChartBad();
},
packages:['bar']
});
function drawChartGood() {
var dataTable = google.visualization.arrayToDataTable([
['Country', 'vtt', 'vttCloud'],
['Czech Republic', 50, 60],
['Italy', 75, 80],
['Croatia', 28, 40]
]);
var options = {
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('chart_good'));
chart.draw(dataTable, google.charts.Bar.convertOptions(options));
}
function drawChartBad() {
var dataTable = google.visualization.arrayToDataTable([
['Country', 'vtt', 'vttCloud'],
['Czech Republic', '50', '60'],
['Italy', '75', '80'],
['Croatia', '28', '40']
]);
var options = {
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('chart_bad'));
chart.draw(dataTable, google.charts.Bar.convertOptions(options));
}
div {
padding-bottom: 24px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Numbers</div>
<div id="chart_good"></div>
<div>Strings</div>
<div id="chart_bad"></div>