title: Google charts API giving "null" error
body: <p>I am trying to draw piechart using google API on bootstrap slider. The first four graphs are perfectly fine. But the next four graphs are giving</p>
  
  <blockquote>
    <p><strong>Error:</strong> "cannot read property length of null". </p>
  </blockquote>
  
  <p>I googled a lot to solve this issue but couldn't succeed. May I know what the issue is?</p>
  
  <p><strong>Code</strong>   </p>
  
  <pre><code> &lt;body onload = onLoading()&gt;
      &lt;div class="container"&gt;
      &lt;div class="col-xs-12"&gt;
  
          &lt;div class="page-header"&gt;
              &lt;h3&gt;Test&lt;/h3&gt;       
          &lt;/div&gt;
  
          &lt;div class="carousel slide" id="myCarousel"&gt;
              &lt;nav&gt;
                  &lt;ul class="control-box pager"&gt;
                      &lt;li&gt;&lt;a data-slide="prev" href="#myCarousel" class=""&gt;&lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a data-slide="next" href="#myCarousel" class=""&gt;&lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
             &lt;!-- /.control-box --&gt;
              &lt;div class="carousel-inner"&gt;
                  &lt;div class="item active"&gt;
  
                              &lt;div class="col-sm-6"&gt;
                                  &lt;div class="fff"&gt;
                                      &lt;div class="thumbnail" id="i1"&gt;
  
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-6"&gt;
                                  &lt;div class="fff"&gt;
                                      &lt;div class="thumbnail" id="i2"&gt;
  
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-6"&gt;
                                  &lt;div class="fff"&gt;
                                      &lt;div class="thumbnail" id="i3"&gt;
  
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-6"&gt;
                                  &lt;div class="fff"&gt;
                                      &lt;div class="thumbnail" id="i4"&gt;
  
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                    &lt;/div&gt;&lt;!-- /Slide1 --&gt; 
                    &lt;!-- Slide2 --&gt;
                    &lt;div class="item"&gt;
  
                              &lt;div class="col-sm-6"&gt;
                                  &lt;div class="fff"&gt;
                                      &lt;div class="thumbnail" id="i5"&gt;
  
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-6"&gt;
                                  &lt;div class="fff"&gt;
                                      &lt;div class="thumbnail" id="i6"&gt;
  
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-6"&gt;
                                  &lt;div class="fff"&gt;
                                      &lt;div class="thumbnail" id="i7"&gt;
  
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-6"&gt;
                                  &lt;div class="fff"&gt;
                                      &lt;div class="thumbnail" id="i8"&gt;
  
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                    &lt;/div&gt;&lt;!-- /Slide2 --&gt; 
  
              &lt;/div&gt;&lt;!-- /Carousel inner --&gt;
  
  
  
  
          &lt;/div&gt;&lt;!-- /#myCarousel --&gt;
  
      &lt;/div&gt;&lt;!-- /.col-xs-12 --&gt;          
  
      &lt;/div&gt;&lt;!-- /.container --&gt;
  
  
      &lt;script type="text/javascript"&gt;
      // Carousel Auto-Cycle
        $(document).ready(function() {
          $('.carousel').carousel({
            interval: 6000
          })
        });
      google.load("visualization", "1", {packages:["corechart"]});
  
      function onLoading()
  
      {          
  
      for(i=0;i&lt;8;i++)
      {
      google.setOnLoadCallback(drawChart(i));
      }
      }
      function drawChart(i) 
      {
  
          var data = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['Work',     11],
                ['Eat',      2],
                ['Commute',  2],
                ['Watch TV', 2],
                ['Sleep',    7]
              ]);
  
              var options = {
                title: 'My Daily Activities',
                is3D: true,
              };
          var tmp = "i";
          var ele_id = tmp.concat(i+1);
          alert(ele_id);
          var chart = new google.visualization.PieChart(document.getElementById(ele_id));
          chart.draw(data, options);
  
      }     
      &lt;/script&gt;
      &lt;/body&gt;
  </code></pre>