CODEWITHSUNDEEP
phpmysqlgoogle-visualization
user3605847
user3605847

Reputation: 65

Google charts doesn't seem to be working

I'm making an application which requires the use of google charts. I have this code. Everything works fine if only the variables a and b are used. As soon as I add another variable named c, it displays the output as follows.

enter image description here

Why is it displaying in such way ? The values for a,b,c are 8,10,50 respectively.

Here's the code :-

<?php
include 'dbconnector.php';
include 'class/class.user.php';
$user = new user();
try
{
  $s = $conn->query("SELECT * from messagequeue where indexid=1");
  $s->setFetchMode(PDO::FETCH_OBJ);
  $row = $s->fetch();
  $s->closeCursor();
  $total = $user->getMaxEmailsFromGridId($row->gridid);
}
catch(PDOException $e)
{
  echo $e->getMessage();
}
?>

<html>
  <head>

  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
    <input type="hidden" name="read" id="read" value="<?php echo $row->read; ?>">
    <input type="hidden" name="unsubscribed" id="unsubscribed" value="<?php echo $row->unsubscribed; ?>">
    <input type="hidden" name="total" id="total" value="<?php echo $total; ?>">
  </body>
</html>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    var a=document.getElementById('read').value;
    var b=document.getElementById('unsubscribed').value;
    var c=document.getElementById('total').value;
    alert(a);
    alert(b);
    alert(c);
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['A',     a],
          ['B',      b],
          ['C',  c]
        ]);

        var options = {
          title: 'Mail Activity',
          pieHole: 0.4,
        };

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

Any suggestion is welcome.

Upvotes: 0

Views: 52

Answers (1)

asgallant
asgallant

Reputation: 26340

You need to parse a, b, and c as numbers:

var a = parseFloat(document.getElementById('read').value);
var b = parseFloat(document.getElementById('unsubscribed').value);
var c = parseFloat(document.getElementById('total').value);

You can also use parseInt instead of parseFloat if your values are known to be integers.

Upvotes: 1

Related Questions