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
– Chi Yang, Commented Nov 24, 2016 at 2: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
– chris85, Commented Nov 24, 2016 at 2:21
Only the div for the Chart is blank, other element in the page is all fine. @chris85 — Chi Yang
– Chi Yang, Commented Nov 24, 2016 at 2:25

Punit Gajjar · Accepted Answer · 2016-11-24 06:29:11Z

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>

mpsbhat · Accepted Answer · 2016-11-24 05:04:47Z

2

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.

answered Nov 24, 2016 at 5:04

mpsbhat

2,77312 gold badges52 silver badges107 bronze badges

Comments

Maharjan · Accepted Answer · 2020-08-29 19:43:03Z

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

Punit Gajjar · Accepted Answer · 2018-01-08 13:29:13Z

-2

You can use scripts in PHP.

But, You can't use PHP in scripts.

It won't work.

edited Jan 8, 2018 at 13:29

Punit Gajjar

5,0077 gold badges39 silver badges73 bronze badges

answered Nov 24, 2016 at 5:28

Maulik Barad

12 bronze badges

Collectives™ on Stack Overflow

Use php variable in google pie chart

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related