Object function (e,t){return new x.fn.init(e,t,r)} has no method 'plot'

Question

I am successful in showing data graphically using flot charts API. I have built around 30 bar charts and now i am showing them all in one page and displaying the graph based on the value selected in the dropdown list. I am able to get the graphs individually but when all the graphs put together in one page , I am getting the above error i am not able to crack this.Please help me in this regard.

<select id="zones" name="zones" onchange="getgraph()">
<option value="overall">Overall</option>
<option value="sea">SEA</option>
<option value="india">INDIA</option>
<option value="nea">NEA</option>
<option value="pz">PZ</option>
</select>
<a onClick="change()" href="#">Click Here</a>
<div id="one">
<?php include "barchart.php";?>
</div>
<div id="two" style="display:none">
<?php include "barchart1.php";?>
</div>

JavaScript

function change()
{alert("hi");
    document.getElementById('two').style.display='block';
        document.getElementById('one').style.display='none';
}

barchart.php

<?php

    /* Your Database Name */
    $dbname = 'finalCMS';

    /* Your Database User Name and Passowrd */
    $username = 'root';
    $password = 'password1!';

    try {
      /* Establish the database connection */
      $conn = new PDO("mysql:host=localhost;dbname=$dbname", $username, $password);
      $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


      $result = $conn->query("SELECT `EquipmentMainCatagory`,count(`EquipmentMainCatagory`) from asset a join assetinfo ai on a.assetid=ai.assetid and upper(ai.EquipmentStatus) like upper('%Active%') group by `EquipmentMainCatagory`");




      $rows = array();

        foreach($result as $r) {


         $rows[] = array( $r['EquipmentMainCatagory'],(int)$r['count(`EquipmentMainCatagory`)']); 


        }

    // convert data into JSON format
    $jsonTable = json_encode($rows);

        //print_r($jsonTable);
    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }
    //mysql_close($conn);

     $conn=null;

    ?>







<div id="placeholder" style="width:900px;height:450px;"></div>

 <script type="text/javascript">
        //******* 2012 Average Temperature - BAR CHART
        var data =<?php echo $jsonTable;?>;
        //alert(data);





var ticks = [];
for (var i = 0; i < data.length; i++) {
    ticks.push([i,data[i][0]]);
    data[i][0] = i;   
}
//alert(ticks);
        //var data = [[0, 11],[1, 15],[2, 25],[3, 24],[4, 13],[5, 18]];
        var dataset = [{ data: data, color: "#5482FF" }];
        //var ticks = [[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"],[4, "Beijing"], [5, "Sydney"]];

        var options = {
            series: {
                lineWidth: 5,
                bars: {
                    show: true,
                    barWidth: 0.5,
                    align:"center"
                }
            },
             xaxis: {
                axisLabel: "EquipmentMainCatagory",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10,
                ticks: ticks,
                //rotateTicks:90
                labelAngle: 90

            },
            yaxis: {
                axisLabel: "# Assets",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 3,

            },

            grid: {
                hoverable: true,
                borderWidth: 0,
                backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
            }
        };

      //jQuery(document).ready(function() {
      function plot1(){
            $.plot($("#placeholder"), dataset, options);
            $("#placeholder").UseTooltip();
      }


           // });   

      var previousPoint = null, previousLabel = null;

        $.fn.UseTooltip = function () {
            $(this).bind("plothover", function (event, pos, item) {
                if (item) {
                    if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                        previousPoint = item.dataIndex;
                        previousLabel = item.series.label;
                        $("#tooltip").remove();

                        var x = item.datapoint[0];
                        var y = item.datapoint[1];

                        var color = item.series.color;

                        //console.log(item.series.xaxis.ticks[x].label);               

                        showTooltip(item.pageX,
                        item.pageY,
                        color,
                      // "<strong>" + y + "</strong>");
         item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong>");

                    }


                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        };

        function showTooltip(x, y, color, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y ,
                left: x,
                border: '2px solid ' + color,
                padding: '3px',
                'font-size': '9px',
                'border-radius': '5px',
                'background-color': '#fff',
                'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                opacity: 0.9
            }).appendTo("body").fadeIn(200);
        }
    </script>



<Script>plot1()</Script>

my javascript order

<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

        <script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>      
        <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="assets/plugins/bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript" ></script>
        <!--[if lt IE 9]>
        <script src="assets/plugins/excanvas.min.js"></script>
        <script src="assets/plugins/respond.min.js"></script>  
        <![endif]-->   
        <script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
        <script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>  
        <script src="assets/plugins/jquery.cookie.min.js" type="text/javascript"></script>
        <script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>
        <!-- END CORE PLUGINS -->

        <!-- BEGIN PAGE LEVEL PLUGINS tree -->
    <script src="assets/plugins/bootstrap-tree/bootstrap-tree/js/bootstrap-tree.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN PAGE LEVEL SCRIPTS  tree-->
    <script src="assets/scripts/ui-tree.js"></script>     
    <!-- END PAGE LEVEL SCRIPTS -->

    <!-- BEGIN PAGE LEVEL PLUGINS view assets -->
    <script type="text/javascript" src="assets/plugins/select2/select2.min.js"></script>
    <script type="text/javascript" src="assets/plugins/data-tables/jquery.dataTables.js"></script>
    <script type="text/javascript" src="assets/plugins/data-tables/DT_bootstrap.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->

   <!-- page level plugins for edit page-->
    <script type="text/javascript" src="assets/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script> 

    <script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="assets/plugins/moment.min.js"></script>
    <script type="text/javascript" src="assets/plugins/jquery.mockjax.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.min.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-editable/inputs-ext/address/address.js"></script>

     <!-- just -->
        <script type="text/javascript" src="assets/plugins/ckeditor/ckeditor.js"></script>  
    <script type="text/javascript" src="assets/plugins/bootstrap-fileupload/bootstrap-fileupload.js"></script>
    <script type="text/javascript" src="assets/plugins/chosen-bootstrap/chosen/chosen.jquery.min.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-toggle-buttons/static/js/jquery.toggle.buttons.js"></script>
    <script type="text/javascript" src="assets/plugins/clockface/js/clockface.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-daterangepicker/date.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script> 
    <script type="text/javascript" src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>  
    <script type="text/javascript" src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
    <script type="text/javascript" src="assets/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js"></script>   
    <script type="text/javascript" src="assets/plugins/jquery.input-ip-address-control-1.0.min.js"></script>
    <script type="text/javascript" src="assets/plugins/jquery-multi-select/js/jquery.multi-select.js"></script>   
    <script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js" type="text/javascript" ></script>
    <script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js" type="text/javascript" ></script> 
    <script src="assets/plugins/jquery.pwstrength.bootstrap/src/pwstrength.js" type="text/javascript" ></script>
    <script src="assets/plugins/bootstrap-switch/static/js/bootstrap-switch.js" type="text/javascript" ></script>
    <script src="assets/plugins/jquery-tags-input/jquery.tagsinput.min.js" type="text/javascript" ></script>
    <!--page level plugin for edit page ends here-->

        <script src="assets/scripts/app.js"></script>  
        <script src="js/index_js.js"></script> 
        <!-- for notifications -->
         <script src="js/ournotification.js"></script> 
       <!-- <script src="js/filterdashboard.js"></script>-->
        <script src="js/viewpage_js.js"></script> 
         <script src="js/allvalidate.js"></script>
         <script src="js/uprofile.js"></script>
         <script src="js/custom.js"></script>
         <!--<script src="js/rightclick.js"></script>
         <script src="js/f12.js"></script>-->
          <!-- for jqplot graphs -->

          <!--<script src="js/jqplot.js"> </script>
           <script src="assets/plugins/jqplot.pieRenderer.min.js"></script>
            <link rel="stylesheet" type="text/css" href="css/graphs.css">-->
            <!-- end of jqplot graphs js -->
       <!--  <script src="js/filter_assets.js"></script>-->
        <!--<script src="js/filter_view.js"></script>--> 
        <script src="assets/plugins/bootstrap-tag/js/bootstrap-tag.js" type="text/javascript" ></script> 
    <script src="assets/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript" ></script>
    <script src="assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js" type="text/javascript" ></script>
    <!-- BEGIN:File Upload Plugin JS files-->
    <script src="assets/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
    <!-- The Templates plugin is included to render the upload/download listings -->
    <script src="assets/plugins/jquery-file-upload/js/vendor/tmpl.min.js"></script>
    <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
    <script src="assets/plugins/jquery-file-upload/js/vendor/load-image.min.js"></script>
    <!-- The Canvas to Blob plugin is included for image resizing functionality -->
    <script src="assets/plugins/jquery-file-upload/js/vendor/canvas-to-blob.min.js"></script>
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="assets/plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script>
    <!-- The basic File Upload plugin -->
    <script src="assets/plugins/jquery-file-upload/js/jquery.fileupload.js"></script>
    <!-- The File Upload file processing plugin -->
    <script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-fp.js"></script>
    <!-- The File Upload user interface plugin -->
    <script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-ui.js"></script>
    <!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
    <!--[if gte IE 8]><script src="assets/plugins/jquery-file-upload/js/cors/jquery.xdr-transport.js"></script><![endif]-->
    <!-- END:File Upload Plugin JS files-->
    <!-- END PAGE LEVEL PLUGINS -->

        <script src="assets/scripts/inbox.js"></script>  
        <script src="assets/scripts/table-managed.js"></script>
        <script src="assets/scripts/form-components.js"></script>
        <script src="assets/scripts/jquery.colorbox.js"></script> 
        <script src="js/inbox_related.js"></script> 

        <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>    
<script type="text/javascript"  src="assets/plugins/flot/jquery.flot.js"></script>
<script src="assets/plugins/flot/jquery.flot.time.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.tickrotatotor.min.js"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.labelangle.min.js"></script> 

Answer 1

TL;DR

Make sure there is only one version of jQuery on your page

I'll bet any money that you're including more than one version of jQuery on your page. To be more specific, it probably looks (at minimum) like this:

<script src="some.jquery.version.js"></script>
<script src="flotcharts.js"></script>

...
...
...

<script src="some.jquery.version.js"></script>

Now, the flotcharts API has been attached to the prototype (or fn ) of the first jQuery script on the page, but unfortunately, the second jQuery version has it's own prototype (or fn ) and renders flotcharts inaccessible when it overwrites the first jQuery prototype.