title: How to dynamically create multiple horizontal bar charts in Google Chart?
body: <p>I'm new in Google Chart API.
  I want to use it to visualize my data about the review on Google Play Store which include multiple issues, sentiments and other conditions.</p>
  
  <p>I want to build a horizontal bar chart which x axis containing different app , and each app's containing 7 issues, y axis is the sum of sentiment of each issue in different app. </p>
  
  <p>I have already done the horizontal chart containing all data in a single div element. However, for the user's convenience, I want to show 5 data at most in a single div element, and dynamically create div element if there is more than 5 data in the current data set. At last, the div elements which paint the chart will horizontally append to the another div element called <strong>issueBar_div</strong>. The user can use the scrollbar to view different chart.</p>
  
  <h2>What I've done:</h2>
  
  <ol>
  <li><p>Partition data:</p>
  
  <pre><code>var title = ['APP'];
  var issueRow = {{ projectissues|safe }}; // 7 different issues got from Django
  var graph_data = [title.concat(issueRow)];
  var cnt = 0;
  var divide_row = [];
  var tableRows = ... // tableRows is the app name mapping to sentiment sum which corresponding to different issue array dictionary.
  // like the form  APP -&gt; [20, 12, -1, 3, 5, 21, 57]
  for (var app in tableRows) {
          cnt ++;                                
          var row = [app];
          for (var i = 0; i &lt; tableRows[app].length; i++) {
              row.push(tableRows[app][i]);
          }
          if(cnt &lt; 6){
              divide_row.push(row);
          }
          else{
              graph_data.push(divide_row);
              divide_row = [];
              cnt = 0;
          }
  }
  </code></pre></li>
  <li><p>Create the div element and draw the chart</p></li>
  </ol>
  
  <p>In order to build a use the scrollbar, I add some restriction to the <strong>issueBar_div</strong>.</p>
  
  <p><code>&lt;div id="issueBar_div" style="height:400px; overflow-x:scroll; overflow-y:hidden";&gt;&lt;/div&gt;</code></p>
  
  <p>Dynamically create the div element  and draw.</p>
  
  <pre><code>    function drawIssueBar() {
          var issueBar = document.getElementById("issueBar_div");
          // titleRow include the APP and other issue
          var titleRow = graph_data[0];
          delete_element();
          for(var i = 1;i&lt;graph_data.length;i++){
              // create div element and set their attribute
              var my_div = document.createElement("div");
              my_div.id = "issuebar_" + i;
              my_div.style.display = "table-cell";
              // append this element to #issueBar_div
              issueBar.appendChild(my_div);
              // get the sliced data and push to total_data
              var row_data = graph_data[i];
              var total_data = [titleRow];
              for(var k=0;k&lt;row_data.length;k++){
                  total_data.push(row_data[k]);
              }
              // the new data container
              var data = new google.visualization.arrayToDataTable(total_data);
              var div_width = $("#home").width();
              var materialOptions = {
                  height: 400,
                  width: div_width,
                  hAxis: {
                      title: 'Sum of sentiment'
                  },
                  vAxis: {
                      title: 'APP'
                  },
                  bars: 'vertical'
              };
              var materialChart = new google.charts.Bar(document.getElementById("issuebar_" + i));
              materialChart.draw(data, materialOptions);
          } 
      }
      // delete the div element
      function delete_element(){
          i = 1;
          while(true){
              element = document.getElementById("issuebar_" + i);
              if(element !== null){
                  element.outerHTML = "";
                  delete element;
                  i++;
              }
              else{
                  break;
              }
          }
      }
  </code></pre>
  
  <h2>Current Problem:</h2>
  
  <p>Basically, the created div elements will create as expect, but the chart will only show one chart as below.</p>
  
  <p><a href="https://i.stack.imgur.com/5r7q5.png" rel="nofollow noreferrer">The successful chart</a></p>
  
  <p><a href="https://i.stack.imgur.com/nrwyI.png" rel="nofollow noreferrer">The fail part when move the scrollbar to right</a></p>
  
  <p>How can I solve this problem?</p>
  
  <p>Any answer will be greatly appreciated. Thanks.</p>