Multiple Google Charts in for each loop

Question

I have used the Facebook Graph API to get the attending and interested count on event pages. I want to put these in charts but I have trouble drawing multiple pie charts with Google Charts.

I have no trouble referring the data to the div, as it shows a piechart with the right data to only one event as seen here: http://charlottebijl.nl/event-charts/

I have put the data from the API in HTML data attributes of the div so I can write this code only once and keep my code clean.

<?php

// count the number of events
$event_count = count($obj['data']);

for($x=0; $x<$event_count; $x++){

  $eid = $obj['data'][$x]['id'];
  $name = $obj['data'][$x]['name'];
  $attending_count = isset($obj['data'][$x]['attending_count']) ? $obj['data'][$x]['attending_count'] : "";
  $interested_count = isset($obj['data'][$x]['interested_count']) ? $obj['data'][$x]['interested_count'] : "";
?>

  <script>

    function drawChart() {

      var piechartID = $('.event .piechart').attr('id');
      var attending_count = $('.event').data("attending");
      var interested_count = $('.event').data("interested");
      var capacity = 400;
      var rest_capacity = capacity - (attending_count + interested_count);


      var data = google.visualization.arrayToDataTable([
        ['Bezoekers', 'Aantal'],
        ['Gaan',     attending_count],
        ['Geinteresseerd',      interested_count],
        ['Overige capaciteit',  rest_capacity]
      ]);


      var options = {'title':'Evenement' + piechartID ,
         'width':400,
         'height':300,
      };

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

      chart.draw(data, options);
    }


  </script>

  <div class='col-xs-6'>
    <div class='event' data-id="<?php echo $eid ?>" data-eventcount="<?php echo $x ?>" data-attending="<?php echo $attending_count ?>" data-interested="<?php echo $interested_count ?>">

      <div class="event-header">
        <div class="image" style="background-image:url('<?php echo $pic_big ?>');"></div>
        <b><a href='https://www.facebook.com/events/<?php echo $eid ?>'><?php echo $name ?></a></b>
      </div>

      <div id="<?php echo $eid ?>" class="piechart"></div>


      <ul class="event-info">
        <li><strong>Attending: </strong><?php echo $attending_count ?></li>
        <li><strong>Interested: </strong><?php echo $interested_count ?></li>
      </ul>

    </div>
</div>

   //end of php for each
   <?php } ?>

at the bottom of the page I have this code which will conduct the drawing function

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

I have researched and found you have to make a var data2 and var options2 so you can draw with chart.draw(data2, options2); to make a second chart. Is there a way to do this in the loop?

Answer 1

Thanks Cas, got the working code here:

google.charts.load('current', {'packages':['corechart']});  

    var charts = {
        init: function() {
            var self = this;
            $('.event').each(function() {
                console.log('event');
                var $this = $(this);
                charts.draw($this.data('attending'), $this.data('interested'), $this.data('eventname'), $this.data('id'));
            })
        },
        draw: function(attending, interested, eventname, id) {

            var piechartID = $('.event .piechart').attr('id');

            var capacity = 400;
            var rest_capacity = capacity - (attending + interested);
            var data = google.visualization.arrayToDataTable([
              ['Bezoekers', 'Aantal'],
              ['Gaan',     attending],
              ['Geinteresseerd',      interested],
              ['Overige capaciteit',  rest_capacity]
            ]);

            var options = {'title': eventname,
               'width':400,
               'height':300,
            };

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

            chart.draw(data, options);
        }
    }  

    google.charts.setOnLoadCallback(charts.init);

Answer 2

You will need to loop over the .event elements like so:

var charts = {
    init: function() {
        var self = this;
        $('.event').each(function() {
            var $this = $(this);
            self.draw($this.data('attending'), $this.data('interested'));
        })
    },
    draw: function(attending, interested) {
        // Your drawChart function
    }
}

// charts.init(); // Draw them if you want to

You can now use charts.init for setOnLoadCallback.