Use Class For Eonasdan Datetimepicker - javascript

How to use class fo Eonasdan datetimepicker instead of using ID to enable the picker. And try to enable all having the same class use Eonasdan datetimepicker.
JSFIDDLE : https://jsfiddle.net/aice09/cdaw62jz/
$(function() {
$('#enablepicker').datetimepicker();
});
<!--JQUERY-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!--Bootstrap 3.3.7-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Font-awesome 4.7.0-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Date Timepicker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date enablepicker' id='datetimepicker1'>
<input type='text' class="form-control" placeholder="Datetimepicker 1"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date enablepicker' id='datetimepicker2'>
<input type='text' class="form-control" placeholder="Datetimepicker 2" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>

Related

Bootstrap's v4.5 checkbox cannot be aligned Horizontally or Vertically when next to an input

just like the title says: Bootstrap's checkbox cannot be aligned Horizontally or Vertically when next to an input.
Problem Rendering:
I have tried the following with no good results that code Snippet.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<div class="container mt-5">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail3">
</div>
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-4">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Ex
</label>
</div>
</div>
</div>
</form>
</div>

If you add the class "align-items-center" to your form-group the checkbox will be aligned vertically.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<div class="container mt-5">
<form>
<div class="form-group row align-items-center">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail3">
</div>
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-4">
<div class="form-check orm-check-inline">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
</form>
</div>

Date time pciker doesn't works

I'm trying to add a date time picker to an input in a modal, but for some reason, I can't, when I make click in the input it doesn't display, I don't have an idea why but I need it for a better UX/UI in the modal, something that I try was change the id to the divs but it didn't work.
I'm leaving my code.
Modal
<!-- Modal newevent-->
<div class="container">
<div class="modal fade " id="newevent">
<div class="modal-dialog modal-lg mw-80 ">
<div class="modal-content border-0 rounded">
<div class="modal-body mr-4 ml-4 pr-2 pl-2">
<form action="./plugins/login/php/completedetails" class="" method="POST">
<div class="form-group ">
<input maxlength="30" class="form-control-plaintext" type="text" name="name" placeholder="Nueva Tarea" id="name" />
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-4 col-form-label"><i class="fas fa-user mr-3 text-primary"></i>Responsable</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-4 col-form-label"><i class="fas fa-stream mr-3 text-primary"></i>Estado</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label"><i class="fas fa-calendar-day mr-3 text-primary"></i>Fecha de entrega</label>
<div class="col-sm-8 input-group">
<input type="text" id="datetimepicker-default" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-4 col-form-label"><i class="fas fa-stopwatch mr-3 text-primary"></i>Tiempo estimado</label>
<div class="input-group mb-3 col-sm-8">
<input type="number" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">h</span>
</div>
</div>
</div>
</div>
<div class="form-group col-md-12">
<label for="inputPassword4">Descripción</label>
<textarea class="form-control" rows="5" id="comment" placeholder="Añade detalles"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
Scripts and stylesheets
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- ELemeentos añadidos para el datepicker -->
<!-- jquery JS -->
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.3.1.min.js"
></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Bootstrap js -->
<script
type="text/javascript"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
></script>
<!-- Propeller textfield js -->
<script type="text/javascript" src="dist/js/propeller.min.js"></script>
<!-- Datepicker moment with locales -->
<script
type="text/javascript"
language="javascript"
src="datetimepicker/js/moment-with-locales.js"
></script>
<!-- Propeller Bootstrap datetimepicker -->
<script
type="text/javascript"
language="javascript"
src="datetimepicker/js/bootstrap-datetimepicker.js"
></script>
<script>
// Default date and time picker
$("#datetimepicker-default").datetimepicker();
</script>

I think datetimepicker init success before html render
check state html create after script
try $(document).ready(function(){$("#datetimepicker-default").datetimepicker();
});

datetimepicker not working with bootstrap 4?

<script>
$(function(){
$('#dob').datetimepicker();
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha256-5YmaxAwMjIpMrVlK84Y/+NjCpKnFYa8bWWBbUHSBGfU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
<div class="col-md-6">
<div class="form-group">
<div class="input-group" id="dob">
<input type="text" class="form-control" placeholder="Date Of Birth">
<div class="input-group-append">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
</div>
</div>

After change datetimepicker CDN it is working as expected.
Hope this will help you.
$(function() {
$('#datetimepicker1').datetimepicker();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
To localize the datetimepicker Need to add locale CDN after moment.min.js Like the below example.
You can find locale CDN URLs from Here -> https://cdnjs.com/libraries/moment.js
$(function() {
$('#datetimepicker1').datetimepicker();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/fa.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>

Try this code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha256-5YmaxAwMjIpMrVlK84Y/+NjCpKnFYa8bWWBbUHSBGfU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
<div class="col-md-6">
<div class="form-group">
<div class="input-group" >
<input type="text" class="form-control" placeholder="Date Of Birth" id="dob">
<div class="input-group-append">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
</div>
</div>
<script>
$(function(){
$('#dob').datetimepicker();
});
</script>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha256-5YmaxAwMjIpMrVlK84Y/+NjCpKnFYa8bWWBbUHSBGfU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="form-group">
<div class="input-group" id="dob">
<input type="text" class="form-control" placeholder="Date Of Birth">
<div class="input-group-addon">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
</div>
</div>
<script>
$(function(){
$('#dob').datetimepicker();
});
</script>
</body>
</html>
You need to downgrade your bootstrap to version 3
and change your icon wrapper class from input-group-append to input-group-addon

Check out this code. Might help you.
$(function(){
$('#dob').datetimepicker({
format: 'DD/MM/YYYY',
icons: {
previous: "fas fa-chevron-left",
next: "fas fa-chevron-right",
},
});
$('.input-group-append').click(function(){
$('.form-control').trigger('focus');
});
});
.input-group-append { cursor: pointer; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Date Of Birth" id="dob">
<div class="input-group-append">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
</div>
</div>
</div>
</div>

BootStrap glyphicon-calender icon separated from input textbox

I am new to bootStrap and Html. I am currently using the Bootstrap 3 Datepicker and I have a problem. The glyphicon-calendar icon is separated away from the input textbox. How do I fix this? Here is the screenshot of my problem and my codes. In addition, if you manage to solve my problem, can you provide an explanation on how you solve it? I would like to learn more.
Screenshot of my problem
$(function () {
$('#datepicker1').datepicker();
});
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>

it is proper code just add this bootstrap js and css see the output
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>

error on page ($.plot is not a function)

I'm working on a webpage based on a template downloaded from the internet. This page contains several includes and I do not know enough to change.
My problem is that I am implementing a Flot chart and the error "Uncaught TypeError: $.plot is not a function" always occour.
I've implemented the same chart on a sample page and it works with four includes: jquery-2.2.3.min.js, /jquery.flot.min.js, jquery.flot.time.js, and utilitarios.js (my authorship )
I'm think that the problem may be in some include that is in the template and is in some type of conflict.
Line of erro:
$.plot("#line-chart", [line_data1, line_data2],
My Html source page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Painel Predial</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/dist/css/AdminLTE.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/dist/css/skins/_all-skins.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/iCheck/flat/blue.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/morris/morris.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/datepicker/datepicker3.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/iCheck/all.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/timepicker/bootstrap-timepicker.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- some informations -->
</header>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<style>
.esconde{
display:none;
}
</style>
<!-- Content Header (Page header) -->
<section class="content-header">
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<section class="content">
<!-- Área do form -->
<form id="formDashboard">
<div class="row esconde" id="boxForm">
<div class="col-md-10">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Informe os critérios para geração do gráfico</h3>
</div>
<div class="box-body">
<!--Seleção de unidades -->
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label>Informe a macrolocalidade</label>
<select id="macroLocalidadeSelect" class="form-control">
<option value=" ">Selecione...</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label>Informe a localidade</label>
<select id="localidadeSelect" class="form-control">
<option value=" ">Selecione...</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label>Informe a unidade</label>
<select id="unidadeSelect" class="form-control">
<option value=" ">Selecione...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label>Informe o período desejado</label>
<select id="periodo" class="form-control">
<option value="0">Registro Diário</option>
<option value="1">Media por Hora</option>
<option value="7">7 dias</option>
<option value="15">15 dias</option>
<option value="30">30 dias</option>
<option value="45">45 dias</option>
<option value="60">60 dias</option>
</select>
</div>
</div>
<div class="col-xs-4" id='boxDataDia'>
<div class="form-group">
<label>Informe a data que deseja consultar</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="diaPesquisa" name="data_hora_inicio">
</div>
</div>
</div>
<!--
<div class="col-xs-5">
<div class="form-group">
<label>Date:</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="datepicker2" name="data_hora_fim">
</div>
</div>
</div> -->
</div>
</div>
<div class="box-footer">
<input type="hidden" value="5a5D0Rl5Vl57U4pesspDGe0lIhzTsXwNflDzidMb" name="_token">
<input type="button" onclick='processar()' class="btn btn-primary active" value="Gerar Relatório" />
<input type="reset" class="btn btn-default" value="Limpar" />
</div>
</div>
</div>
</div>
</form>
<!-- Área do Gráfico -->
<div class="row">
<div class="col-md-8">
<!-- Área de mensagem de erro -->
<div class="box box-danger box-solid esconde" id="boxError">
<div class="box-header with-border">
<h3 class="box-title">Erro</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" id="boxErrorMessage">
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<!--Área de mensagem -->
<div class="box box-primary box-solid esconde" id="boxAguarde">
<div class="box-header">
<h3 class="box-title">Carregando....</h3>
</div>
<div class="box-body">
Aguarde enquanto o gráfico é gerado
</div>
<!-- /.box-body -->
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay">
<i class="fa fa-refresh fa-spin"></i>
</div>
<!-- end loading -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 text-center esconde" id="boxPainelSituacaoAtualHidrico">
<div class="box box-primary esconde" id="boxGraficoAtualHidricoSensor1">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobHidricoSensor1" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualHidricoSensor1"></div>
<div class="box box-primary bg-aqua-active color-palette">
<div id="mediaRegistradaHidricoSensor1"></div>
</div>
</div>
<div class="box box-primary esconde" id="boxGraficoAtualHidricoSensor2">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobHidricoSensor2" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualHidricoaSensor2"></div>
<div class="box box-primary bg-aqua-active color-palette">
<div id="mediaRegistradaHidricoSensor2"></div>
</div>
</div>
</div>
<div class="col-md-8">
<!-- AREA CHART -->
<div class="box box-primary esconde" id="boxGraficoHidrico">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Histórico de Nivel de Reservatórios</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="chart" id="areaChartContainer">
<canvas id="areaChart" style="height:310px"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
<!-- Gráficos de temperatura -->
<div class="row">
<div class="col-md-2 text-center" id="boxPainelSituacaoAtualTemperatura">
<div class="box box-danger esconde" id="boxGraficoAtualTemperaturaSensor1">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobTemperaturaSensor1" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualTemperaturaSensor1"></div>
<div class="box box-danger bg-red color-palette">
<div id="mediaRegistradaTemperaturaSensor1"></div>
</div>
</div>
<div class="box box-danger esconde" id="boxGraficoAtualTemperaturaSensor2">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobTemperaturaSensor2" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualTemperaturaSensor2"></div>
<div class="box box-danger bg-red color-palette">
<div id="mediaRegistradaTemperaturaSensor2"></div>
</div>
</div>
</div>
<div class="col-md-8">
<!-- FLOT CHART -->
<div class="box box-danger esconde" id="boxGraficoTemperatura">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Histórico de Temperatura das Bombas</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="line-chart" style="height: 300px;"></div>
</div>
<!-- /.box-body-->
</div>
</div>
</div>
<div id="saida"></div>
</section>
<!-- jQuery 2.2.3 -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- ChartJS 1.0.1 Hídrico-->
<script src="http://localhost/sistema/public/plugins/chartjs/Chart.min.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Flot graph (Temperatura) -->
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.min.js"></script>
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.time.js"></script>
<!-- Utilitários -->
<script src="http://localhost/sistema/public/js/utilitarios.js"></script>
<script src="http://localhost/sistema/public/js/graph/graficos.js"></script>
<script>
/**
Load da Página
*/
$(function () {
$('#diaPesquisa').datepicker({
dateFormat: "dd/mm/yyyy" ,
language: "pt-BR",
autoclose:true
});
$.get('/sistema/public/dashload', function(dataLoad){
var hasError = showLoadError(dataLoad);
if(!hasError)
showFormOptions(dataLoad);
});
});
</script>
<!-- page script -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Versão</b> 1.0.4
</div>
<strong>Copyright © 2017 <a href="http://www.sensoragroup.com.br" target='_blank'>Sensora Group</a>.</strong> Todos os direitos reservados
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-gears"></i></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-user bg-yellow"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
<p>New phone +1(800)555-1234</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
<p>nora#example.com</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-file-code-o bg-green"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
<p>Execution time 5 seconds</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Update Resume
<span class="label label-success pull-right">95%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" style="width: 95%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Laravel Integration
<span class="label label-warning pull-right">50%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Back End Framework
<span class="label label-primary pull-right">68%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" style="width: 68%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Other sets of options are available
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Allow the user to show his name in blog posts
</p>
</div>
<!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked>
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right">
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Delete chat history
<i class="fa fa-trash-o"></i>
</label>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://localhost/sistema/public/js/dropdown.js"></script>
<!-- jQuery 2.2.3
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.6
<script src="bootstrap/js/bootstrap.min.js"></script> -->
<script src="http://localhost/sistema/public/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<!-- <script src="plugins/morris/morris.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/morris/morris.min.js"></script>
<!-- Sparkline
<script src="plugins/sparkline/jquery.sparkline.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>-->
<script src="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<!-- <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart
<script src="plugins/knob/jquery.knob.js"></script> -->
<script src="http://localhost/sistema/public/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<!-- <script src="plugins/daterangepicker/daterangepicker.js"></script> -->
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker
<script src="plugins/datepicker/bootstrap-datepicker.js"></script> -->
<script src="http://localhost/sistema/public/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- bootstrap datepicker -->
<!-- Bootstrap WYSIHTML5
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick
<script src="plugins/fastclick/fastclick.js"></script> -->
<script src="http://localhost/sistema/public/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App
<script src="dist/js/app.min.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/app.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes)
<script src="dist/js/pages/dashboard.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes
<script src="dist/js/demo.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/demo.js"></script>
<!-- <script src="http://localhost/sistema/public/js/app.js"></script>
-->
<script>
$(function () {
//Initialize Select2 Elements
$(".select2").select2();
//Datemask dd/mm/yyyy
$("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
//Datemask2 mm/dd/yyyy
$("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
//Money Euro
$("[data-mask]").inputmask();
//Date range picker
$('#reservation').daterangepicker();
//Date range picker with time picker
$('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
//Date range as a button
$('#daterange-btn').daterangepicker(
{
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
//Date picker
$('#datepicker').datepicker({
autoclose: true
});
//iCheck for checkbox and radio inputs
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass: 'iradio_minimal-blue'
});
//Red color scheme for iCheck
$('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
checkboxClass: 'icheckbox_minimal-red',
radioClass: 'iradio_minimal-red'
});
//Flat red color scheme for iCheck
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass: 'iradio_flat-green'
});
//Colorpicker
$(".my-colorpicker1").colorpicker();
//color picker with addon
$(".my-colorpicker2").colorpicker();
//Timepicker
$(".timepicker").timepicker({
showInputs: false
});
});
</script>
</body>
</html>

In your HTML output you've got jQuery sourced three times on that page. First time it's sourced right before you source Flot.
<!-- jQuery 2.2.3 -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- ChartJS 1.0.1 Hídrico-->
<script src="http://localhost/sistema/public/plugins/chartjs/Chart.min.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Flot graph (Temperatura) -->
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.min.js"></script>
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.time.js"></script>
Then later down the page you source it again here:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://localhost/sistema/public/js/dropdown.js"></script>
Then almost immediately after you do it again here:
<!-- jQuery 2.2.3
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
Aside from loading jQuery too many times, the issue you're seeing is the first jQuery is loaded and then you source Flot which binds to that instance of jQuery. Once the next sourced instance of jQuery happens that association disappears.
Take time to assure you're sourcing jQuery once at the beginning of your sourced scripts and then source everything that depends on jQuery.

Categories