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>

No, because the chart doesn't show up. But if I change the php variable in the script to Integer, the Google chart works perfectly. @chris85 — Chi Yang, Nov 24 '16 at 02:20
Not the chart, the source code. Is the page blank? I'd also put spaces between the `echo` and variable but that should break it. — chris85, Nov 24 '16 at 02:21
Only the div for the Chart is blank, other element in the page is all fine. @chris85 — Chi Yang, Nov 24 '16 at 02:25

score 2 · Answer 1 · answered Nov 24 '16 at 05:04

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.

Punit Gajjar · Accepted Answer · 2016-11-24T06:29:11.767

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>

score 0 · Answer 3 · answered Aug 29 '20 at 19:43

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

score -2 · Answer 4 · edited Jan 08 '18 at 13:29

-2

You can use scripts in PHP.

But, You can't use PHP in scripts.

It won't work.

edited Jan 08 '18 at 13:29

Punit Gajjar

4,937
7
35
70

answered Nov 24 '16 at 05:28

Maulik Barad

1
2

Use php variable in google pie chart

4 Answers4