title: Morris graph not displaying
body: <p>I need to do a graph for each of the bootstrap tabs created, I have four tabs from four columns in my database and each tab should show the graph for that particular column. Here is the code to retrieve and echo the tabs required </p>
  
  <pre><code> &lt;?php 
  
      require_once("../include/membersite_config.php");
      $username = $_SESSION['username_of_user'];
  
      $config = parse_ini_file('../private/config.ini');     
      $connect = mysqli_connect($config['servername'],$config['username'],$config['password'],$config['dbname']);
  
      $tab_query = "SELECT * FROM ".$config['tablenamenode']." WHERE username = '".$username."' ORDER BY id ASC";
      $tab_result = mysqli_query($connect, $tab_query);
      $tab_menu = '';
      $tab_content = '';
      $i = 0;
      while($row = mysqli_fetch_array($tab_result))
      {
          if($i == 0)
          {
              $tab_menu .= '
              &lt;li class="active"&gt;&lt;a href="#'.$row["gatewayno"].'" data-toggle="tab"&gt;'.$row["description"].'&lt;/a&gt;&lt;/li&gt;
              ';
  
              $tab_content .= '
              &lt;div id="'.$row["gatewayno"].'" class="tab-pane fade in active"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;div id="'.$row['gatewayno'].'" style="height:200px"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              ';
  
              $gatewayno[] = $row["gatewayno"];
  
          }
          else
          {
              $tab_menu .= '
              &lt;li&gt;&lt;a href="#'.$row['gatewayno'].'" data-toggle="tab"&gt;'.$row["description"].'&lt;/a&gt;&lt;/li&gt;
              ';
  
              /*$tab_content .= '
              &lt;div id="'.$row["gatewayno"].'" class="tab-pane fade"&gt;
              &lt;div id="morris-area-chart" style="position: relative; height: 300px; padding: 30px;" &gt;
              &lt;/div&gt;
              &lt;/div&gt;
              ';*/
  
  
              $tab_content .= '&lt;div class="tab-pane fade" id="'.$row['gatewayno'].'"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;div id="'.$row['gatewayno'].'" style="height:200px"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              ';
  
              /*$tab_content .= '
              &lt;div id="'.$row["gatewayno"].'" class="tab-pane fade"&gt;
              ';*/
  
              $gatewayno[] = $row["gatewayno"];
  
          }
  
          //$tab_content .= '&lt;/div&gt;';
          $i++;
      }
  
  ?&gt;
  </code></pre>
  
  <p>HTML Code to display the tabs and contents</p>
  
  <pre><code>    &lt;!-- Main content --&gt;
      &lt;section class="content"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
            &lt;!-- AREA CHART --&gt;
  
            &lt;div class="nav-tabs-custom"&gt;
              &lt;!-- Tabs within a box --&gt;
              &lt;ul id="tabs" class="nav nav-tabs pull-right"&gt;
                &lt;!--&lt;li class="active"&gt;&lt;a href="#morris-area-chart" data-toggle="tab"&gt;Donut&lt;/a&gt;&lt;/li&gt;--&gt;
                &lt;li class="pull-left header"&gt;&lt;i class="fa fa-inbox"&gt;&lt;/i&gt; Temperature and Humidity&lt;/li&gt;
  
                &lt;?php
                  echo $tab_menu;
                ?&gt;
  
              &lt;/ul&gt;
  
              &lt;div class="tab-content no-padding"&gt;
                &lt;!-- Morris chart - Sales --&gt; 
                &lt;!--&lt;div class="chart tab-pane active" id="morris-area-chart" style="position: relative; height: 300px; padding: 30px;" &gt;&lt;/div&gt; --&gt;
  
                &lt;?php
                  echo $tab_content;
                 ?&gt;
  
              &lt;/div&gt;
  
            &lt;/div&gt;
  
              &lt;!-- /.box-body --&gt;
          &lt;/div&gt;
            &lt;!-- /.box --&gt;  
          &lt;/div&gt;
  
          &lt;!-- /.col (RIGHT) --&gt;
        &lt;/div&gt;
        &lt;!-- /.row --&gt;
  
      &lt;/section&gt;
      &lt;!-- /.content --&gt;
    &lt;/div&gt;
    &lt;!-- /.content-wrapper --&gt;
  
  &lt;/div&gt;
  &lt;!-- ./wrapper --&gt;
  </code></pre>
  
  <p>PHP CODE and javascript to initialise the graph</p>
  
  <pre><code>&lt;?php
  
  $n = 0;
  
  foreach($gatewayno as $key =&gt; $value)
  {
      ?&gt;
  &lt;script&gt;
  
  var &lt;?php echo $value ?&gt; = Morris.Area({
      // ID of the element in which to draw the chart.
  element: '&lt;?php echo $value ?&gt;',
  
  behaveLikeLine: true,
  
      // Chart data records -- each entry in this array corresponds to a point
      // on the chart.
  
      // The name of the data record attribute that contains x-values.
  xkey: 'timestamp',
  
      // A list of names of data record attributes that contain y-values.
  ykeys: ['humidity','temperature'],
  
      // Labels for the ykeys -- will be displayed when you hover over the
      // chart.
  labels: ['Humidity', 'Temperature'],
  
      //lineColors: ['#3da1231'],
  xLabels: 'hour',
  
      // Disables line smoothing
  smooth: true,
  resize: true
  });
  
  &lt;/script&gt;
  
  &lt;?php
  
      $n++;
  }
  ?&gt;
  
  &lt;?php
  
  foreach($gatewayno as $key =&gt; $value)
  {
  
  ?&gt;
  &lt;script&gt;
  
  function update&lt;?php echo $value ?&gt;(){
  
  
   $.ajax({
        type: "POST",
        dataType: 'json',
        url: "charts-ajax-testing.php", // This is the URL to the API
        data: {id: &lt;?php echo $value ?&gt;},
  
        success: function(html)                    
        {   
          &lt;?php echo $value ?&gt;.setData(html);
          alert("TEST"."&lt;?php echo $value?&gt;");
        }
  
      });
   }
  
  setInterval(update&lt;?php echo $value ?&gt;,5000);
  
  &lt;/script&gt;
  
  &lt;?php 
  
  }
  
  ?&gt;
  </code></pre>
  
  <p>However, none of the graphs are showing up in the tab. Upon inspection, I found this error </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'length' of undefined
      at d.&lt;anonymous&gt; (morris.min.js:6)
      at d.b.Grid.d._calc (morris.min.js:6)
      at d.b.Grid.d.redraw (morris.min.js:6)
      at d.b.Grid.d.resizeHandler (morris.min.js:6)
      at morris.min.js:6
  </code></pre>
  
  <p>when resizing the browser</p>
  
  <p>Here is the code upon inspection</p>
  
  <p><a href="https://i.stack.imgur.com/XpcRB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XpcRB.png" alt="Inspection of code"></a></p>