How to pass integer variables from PHP to a Javascript Google Chart API?

Question

I have the following code:

<html><head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Polarity', 'Percentage'],
      ['positive',     0],
      ['negative',      0],
      ['neutral',  0]

    ]);

    var options = {
      title: 'Sentiment Chart',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>
</head>

<body>

<?php

$positive = 20;
$negative = 30;
$neutral = 50;

echo "<div id=\"piechart\" style=\"width: 900px; height: 500px;\"></div>";
?>

</body>
</html>

It is a Google Pie Chart. How can I pass the PHP variables $positive, $negative and $neutral to the 'positive', 'negative' and 'neutral' labels in the chart so that it shows their values of 20%, 30% and 50% respectively on the chart?

I have searched SO, but have not found a simple approach.

I think this will answer your question. http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript — Pascal, Nov 18 '14 at 10:48

score 3 · Accepted Answer · answered Nov 18 '14 at 10:50

Put your php top of your document before all other code and then echo variables onto javascript like this:

 var data = google.visualization.arrayToDataTable([
  ['Polarity', 'Percentage'],
  ['positive',     <?php echo $positive ?>],
  ['negative',      <?php echo $negative ?>],
  ['neutral',  <?php echo $neutral ?>]

]);

score 1 · Answer 2 · answered Nov 18 '14 at 10:49

Just output them on place they need to be:

<?php echo $negative; ?>

In your case probably something like this:

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Polarity', 'Percentage'],
      ['positive',     <?php echo $positive; ?>],
      ['negative',      <?php echo $negative; ?>],
      ['neutral',  <?php echo $neutral; ?>]

    ]);

    var options = {
      title: 'Sentiment Chart',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>

Thanks. I tried that though and when I did the chart would not render at all for some reason.. — modarwish, Nov 18 '14 at 10:53

score 0 · Answer 3 · answered Nov 18 '14 at 10:50

By loading the PHP before and open the tags inside the code:

    <?php

    $positive = 20;
    $negative = 30;
    $neutral = 50;

    ?>

<html><head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Polarity', 'Percentage'],
          ['positive',     <?php echo $positive; ?>],
          ['negative',      <?php echo $negative; ?>],
          ['neutral',  <?php echo $neutral; ?>]

        ]);

        var options = {
          title: 'Sentiment Chart',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
    </head>

    <body>

    <div id=\"piechart\" style=\"width: 900px; height: 500px;\"></div>

    </body>
    </html>

How to pass integer variables from PHP to a Javascript Google Chart API?

3 Answers3