Google donut chart for unknown number of variables

Question

So I'm trying to build a google donut graph, in which the number of cordinates are variable. Here's the problem statement, I have to make a graph showing how many contacts per admin was added into the database.

Example data :- Admin 1 :- [email protected] Number of contacts :- 4

Admin 2:- [email protected] Number of contacts :- 5

The number of admins can be increased, as well as the number of contacts pertaining to them, therefore the number of cordinates is not known. I have made this code to make it work, but it doesn't work as to my expectations. Actually it doesn't work at all. What would be the best way to accomplish my task ?

HTML / PHP part (works fine)

<?php
                //get data here
                try
                {
                  $s = $conn->query("SELECT * from users");
                }
                catch(PDOException $e)
                {
                  echo $e->getMessage();
                }
                $i=-1;
                while($admins = $s->fetch(PDO::FETCH_OBJ))
                {
                  $i++;
                  $number = $user->get_numberofcontacts_per_admin($admins->email);
                  echo "<input type='hidden' name='a$i' id='a$i' value=$admins->email>";
                  echo "<input type='hidden' name='c$i' id='c$i' value=$number>";
                }

                ?>
                <input type='hidden' name='ta' id='ta' value='<?php echo $i; ?>' > <!-- total admins -->

Javascript

<script type="text/javascript">

    //get ta
    var ta = parseInt(document.getElementById('ta').value);
    var admins = new Array();
    for(i=0;i<=ta;i++)
    {
      admins[i] = document.getElementById('a' + i).value;
      contacts[i] = parseInt(document.getElementById('c' + i).value);
    }
    //alert(p4);
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Phase', 'Contacts per phase'],

         for(i=0;i<=ta;i++)
         {
            ['admins[i]',     contacts[i]],
         }
        ]);

        var options = {
          title: 'Contacts per phase',
          pieHole: 0.4,
          is3D: true,
        };

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

Answer 1

How can this question recieve 5 upvotes in 3 hours..... All it has is large code snippets, and barelly any useful info.

I would start by saving my php input directly into two global javascript variables (instead of creating hidden HTML elements). After accomplishing that I'd replace

var data = google.visualization.arrayToDataTable([
      ['Phase', 'Contacts per phase'],

     for(i=0;i<=ta;i++)
     {
        ['admins[i]',     contacts[i]],
     }
    ]);

with

var data = google.visualization.DataTable();
     data.addColumn('string','Phase');
     data.addColumn('string','Contacts per Phase');

     for(i=0;i<admins.length;i++){
        data.addRow([admins[i], contacts[i]]);
     };

That would add two columns, Phase and Contacts per Phase, and then populate it with one row per Admin.

Read more about passing php variables into Javascript variables here, very good reading if you're interested.