Jquery functions are not working because of Uncaught Invalid dimensions for plot, width = null, height = null

Question

i am using a bootstrap template that contains,

jquery-1.9.1.min.js

jquery.flot.js

jquery.flot.resize.js

jquery.dataTables.js .

 <?php 

       ob_start();
       $path = '../';
       $title = 'Leave Dates';
       include($path.'header.php');
       include($path.'side.php');
       include("brnch_session.php");

       $sql_br =  mysql_query("SELECT br_name FROM branch_data WHERE ID = '$br_id'");
       $res_br = mysql_fetch_row($sql_br);

    ?>



      <!-- live search -->
      <link href="<?php echo $path ?>/css/live_search.css" rel="stylesheet" media="screen">


     <!--date picker files-->
     <link href="../datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
     <script type="text/javascript" src="../datetimepicker/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
     <script type="text/javascript" src="../datetimepicker/js/bootstrap-datetimepicker.ua.js" charset="UTF-8"></script> 

         <script>
            $(document).ready(function() {
                $("#txt_check").keyup(function(){
                    $("#txt_check").css("background-color", "RED");
                    alert('you cant');
                });
            });
          </script>

html

  <?php include('mini_top.php'); ?>   

   <?php
    $run=mysql_query("SELECT * FROM student_infor where br_code='$br_id'");
    $nor= mysql_num_rows($run);
    ?>

        <h3 style="margin-left:2%;">  Leave Dates </h3>
        <div align="left" style="margin-left:2%;width:100%;height:400px">
        <table class="leav_date">
            <tr>
                <td> DATE 
                    <input type="text" id="txt_check" name="txt_check" />
                </td>
                <td bgcolor="#CCFFFF" align="center">                  
                 <div class="controls">
                    <div  align="left" class="col-sm-10 input-append date leav_date"        
                    data-date="" data-date-format="yyyy-mm-dd" 
                    data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input size="16" type="text" name="leav_date" 
                    value="<?php echo date('Y-m-d') ?>" required readonly 
                    class="form-control" 
                    style="width:180px;height:35px">
                    <span class="add-on" style="height:25px"><i class="icon-th"></i></span>
                    </div>
                </div>   
                </td>
            </tr>
        </table>
        <form method="post">
        <table width=""  border="1" style="margin:2%" cellpadding="5" cellspacing="5" class="head_tb">
          <tr>
            <td>Date</td>
            <td>  
               <?php
               if(isset($_POST['year'])){
                   $year_sel = $_POST['year'];
               }else{
                   $year_sel = date('Y');
               }

               if(isset($_POST['month'])){
                   $cret_d = date('Y').'-'.$_POST['month'].'-'.date('d');
                   $date = date_create($cret_d);
                   $mon_sel = date_format($date,"M");
               }else{
                   $mon_sel = date('M');
               }
               ?>           
               <input type="number" value="<?php echo $year_sel; ?>"  name="year" style="height:30px;width:70px"/>              
            </td> 
            <td  valign="center">
                Class
            </td>  
            <td>
            <select name="bt_id" class="span8"  style="width:150px;">
               <?php
                    $btch = mysql_query("SELECT Batch_no, cls_room_id FROM cls_room_tb
                                        WHERE cls_brnch_id = '$br_id'");
                    while($rec=mysql_fetch_array($btch)){
                        if($_POST['bt_id'] == $rec[1]){ 
                            echo "<option value='".$rec[1]."' selected>".$rec[0]."</option>";
                        }else{
                            echo "<option value='".$rec[1]."'>".$rec[0]."</option>";
                        }
                    }
                ?>

            </select>               
            </td>
            <td>
                <input type="submit" name="load" class="btn btn-success" value="Load" />
            </td>
          </tr>          
        </table>
        </form>
       </div>
    </div> 




         </div>

        <!--/.content-->
      </div>

      <!--/.span9-->
      </div>

      </div>
      <!--/.container-->

      </div>
       <!--/.wrapper-->

       <?php include($path.'footer.php'); ?>       
           <script type="text/javascript">    
             $('.leav_date').datetimepicker({
               language:  'fr',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
                   });  
          </script> 

when i try to run the code it gives a error like

Uncaught Invalid dimensions for plot, width = null, height = null jquery.flot.js:711

Answer 1

When using jquery.flot.js make sure that all scripts comes after their related html elements. Also set width and height for elements that flot is applied on them.