pass php variables through javascript pie chart from google

Question

So i have a 3D pie chart from google, and im trying to pass through php variables through for the % which is coming from a database. For some reason all im getting is other 100% its not actually coming up with the correct %. For the variables that are set they are the following numbers:

$players = 80;
$sold = 5;
$forsale = 15;

but these numbers are being calculated from the database and put into the variables.

Heres my code:

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Players', '<?php echo $players; ?>'],
      ['Sold', '<?php echo $sold; ?>'],
      ['Open', '<?php echo $forsale; ?>']
    ]);

    var options = {
      title: 'Share\'s Allocation',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  }
</script>

Anyone have any ideas where im going wrong?

Thanks

Answer 1

The problem is not with your PHP variables (most likely), but with the type of JavaScript Google charts expects: you use strings instead of integers.

Simply remove the quotes around your PHP variables:

See this fiddle

<div id="piechart_3d" style="width:300px;height:300px;">...</div>

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Players', 80],
      ['Sold', 5],
      ['Open', 15]
    ]);

    var options = {
      title: 'Share\'s Allocation',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  }
</script>