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 :- admin1@test.com Number of contacts :- 4

Admin 2:- admin2@test.com 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>

What is the output of your code? Put the final html/css/js that you get in jsfiddle.net so we can review it and see whats wrong there. It seems like the problem is within the drawChart function. This is not js code there... You cannot put a for loop inside array. — Dekel, Jul 02 '15 at 13:51

score 1 · Answer 1 · edited May 23 '17 at 12:07

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.

Google donut chart for unknown number of variables

1 Answers1