Use php variable in google pie chart
Question
I want to use my PHP variable in Google chart,but the chart couldn't read my PHP tag. As you can see the code below I put my PHP variable in the script. (The PHP variable I have defined at top of the code and the result is correct). What's wrong with my code ? Is there any solution for this ? Do ask me for more information if needed. Thank you.
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Order', 'Amount'],
['Completed', '<?php echo$completed ?>'],
['New', '<?php echo$new ?>']
]);
var options = {
title: 'Total Order ' + <?php echo$total; ?>
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
4 answers
solution1
2 2016-11-24 05:04:47
According to docs , for Google visualization pie charts, there must be one datatype string column and one number column.
So you should parse the Amount column to integer or float before rendering the data. You can do it in php itself or in javascript as,
var data = google.visualization.arrayToDataTable([
['Order', 'Amount'],
['Completed', parseInt('<?php echo $completed; ?>')],
['New', parseInt('<?php echo $new; ?>')]
]);
var options = {
title: 'Total Order ' + parseInt('<?php echo $total; ?>')
};
You can also use javascript parseFloat() instead of parseInt() if your amount values containing decimal values.
solution2
2 ACCPTED 2016-11-24 05:13:06
Working Example.
<?php
$completed = 50;
$new = 10;
$total = 30;
?>
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Order', 'Amount'],
['Completed', parseInt('<?php echo $completed; ?>')],
['New', parseInt('<?php echo $new; ?>')]
]);
var options = {
title: 'Total Order ' + <?php echo$total; ?>
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart"></div>
</body>
</html>
solution3
0 2020-08-29 19:43:03
<span id="json-genderby"><?php echo json_encode($arrayGenderGroupBy); ?></span>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
<script type="text/javascript">
$(window).on('load', function() {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var json_gender = $("#json-genderby").text()
var arrayGenderBy = [];
var count = 0;
$.each(JSON.parse(json_gender), function(i, item) {
if (count == 0)
arrayGenderBy[count] = [item[0], item[1]];
else
arrayGenderBy[count] = [ item[0], parseInt(item[1]) ];
count ++
});
var data = google.visualization.arrayToDataTable(arrayGenderBy);
var options = { title: 'Servey Questions Answered by Gender' };
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
});
</script>
solution4
-1 2016-11-24 05:28:56
You can use scripts in PHP.
But, You can't use PHP in scripts.
It won't work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.