Uncaught Error: Graph container element not found

abirgl Messages postés 127 Date d'inscription   Statut Membre Dernière intervention   -  
abirgl Messages postés 127 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
Lorsque j'exécute ma page web, l'erreur suivante apparaît sur la console:
Uncaught Error: Graph container element not found morris.js:103
Comment je peux corriger ça svp ?
Merci d'avance


1 réponse

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour

Il nous faudrait le code de ta page .
0
abirgl Messages postés 127 Date d'inscription   Statut Membre Dernière intervention  
 
Voici le code :

function Grid(options) {
this.resizeHandler = __bind(this.resizeHandler, this);
var _this = this;
if (typeof options.element === 'string') {
this.el = $(document.getElementById(options.element));
} else {
this.el = $(options.element);
}
if ((this.el == null) || this.el.length === 0) {
throw new Error("Graph container element not found");
}
...
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > abirgl Messages postés 127 Date d'inscription   Statut Membre Dernière intervention  
 
le code de la PAGE ... pas juste un bout de fonction.
Car cette fonction est appellée par qqchose .... cette chose faisant reférence (via le this) à un truc qui n'existe pas ou est null ....
0
abirgl Messages postés 127 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour,
Voici le code de ma page web :


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LTH</title>
<link href="assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="assets/plugins/pace/pace-theme-big-counter.css" rel="stylesheet" />
<link href="assets/css/style.css" rel="stylesheet" />
<link href="assets/css/main-style.css" rel="stylesheet" />
<link href="assets/plugins/morris/morris-0.4.3.min.css" rel="stylesheet" />
<script src=""quot;https://maps.googleapis.com/maps/api/js?key=AIzaSyDm85_icmgwRYEITWUiNSghvz30CZnB6NQ&language=fr" type="text/javascript"></script>
<script type="text/javascript">
function TabOTJournaliere()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(maPosition);
}
function maPosition(position)
{
var latOrigin = position.coords.latitude ;
var lngOrigin=position.coords.longitude;
var Code_Equipe=4;
var xhr = new XMLHttpRequest();
xhr.open("GET", "ListeOTJournaliere.php?Code_Equipe="+Code_Equipe+"&latOrigin="+latOrigin+"&lngOrigin="+lngOrigin,true);
xhr.send(null);
xhr.onreadystatechange = result;
function result()
{
if((xhr.status == 200)&&(xhr.readyState==4))
document.getElementById("tabtj").innerHTML=xhr.responseText;
}
}
}
</script>
</head>
<body onload="TabOTJournaliere()">
<form name="faccueil" method="POST">
<div id="wrapper">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" rel="nofollow noopener noreferrer" target="_blank">
<img src=""quot;assets/img/logo-LTH-new.jpg" alt="" />
</a>
</li>
</ul>
</div>
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" rel="nofollow noopener noreferrer" target="_blank">
<img src=""quot;assets/img/cst.png" alt="" />
</a>
</li>
</ul>
</nav>
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li>
<div class="user-section">
<div class="user-section-inner"><img src=""quot;assets/img/user.jpg" alt=""></div>
<div class="user-info">
<div> <strong>
ABIR </strong></div>
<div class="user-text-online"><span class="user-circle-online btn btn-success btn-circle "></span> Online</div>
</div>
</div>
</li>
<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><i class="fa fa-dashboard fa-fw"></i>Liste Des OT Planifiés</a> </li>
<li><a href="InterventionsEnCours.php?id=4" rel="nofollow noopener noreferrer" target="_blank"><i class="fa fa-wrench fa-fw"></i>Interventions En Cours</a> </li>
<li> <a href="InterventionsValidees.php?id=4" rel="nofollow noopener noreferrer" target="_blank"><i class="fa fa-table fa-fw"></i>Interventions Validées</a> </li>
<li><a href="Logout.php" rel="nofollow noopener noreferrer" target="_blank"><i class="fa fa-sign-out fa-fw"></i>Logout</a> </li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<br/>
<br/>
<br/>
<!--<h1 class="page-header"></h1> -->
</div>
</div>
<div class="row"></div>
<div class="row">
<div class="col-lg-8">
<div class="panel panel-primary">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i>Liste des OT Planifiés : 2017-03-9 <div class="pull-right"> <div class="btn-group"> <ul class="dropdown-menu pull-right" role="menu"> </ul> </div> </div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive" id="tabtj"> </div>
<div name="LinkGPS"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-primary text-center no-boder"></div>
<div class="panel panel-primary text-center no-boder"></div>
<div class="panel panel-primary text-center no-boder"></div>
<div class="panel panel-primary text-center no-boder"></div>
</div>
</div>
<div class="row"> <div class="col-lg-4"></div></div> </div> </div>
</div>
<script src=""quot;assets/plugins/jquery-1.10.2.js"></script>
<script src=""quot;assets/plugins/bootstrap/bootstrap.min.js"></script>
<script src=""quot;assets/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src=""quot;assets/plugins/pace/pace.js"></script>
<script src=""quot;assets/scripts/siminta.js"></script>
<script src=""quot;assets/plugins/morris/raphael-2.1.0.min.js"></script>
<script src=""quot;assets/scripts/dashboard-demo.js"></script>
<script src=""quot;assets/plugins/morris/morris.js"></script>
</head>
</form>
</body>
</html>

Le code de la fonction qui génère l'exception :

function Grid(options) {
this.resizeHandler = __bind(this.resizeHandler, this);
var _this = this;
if (typeof options.element === 'string') {
this.el = $(document.getElementById(options.element));
} else {
this.el = $(options.element);
}
if ((this.el == null) || this.el.length === 0) {
throw new Error("Graph container element not found");
}
if (this.el.css('position') === 'static') {
this.el.css('position', 'relative');
}
this.options = $.extend({}, this.gridDefaults, this.defaults || {}, options);
if (typeof this.options.units === 'string') {
this.options.postUnits = options.units;
}
this.raphael = new Raphael(this.el[0]);
this.elementWidth = null;
this.elementHeight = null;
this.dirty = false;
this.selectFrom = null;
if (this.init) {
this.init();
}
this.setData(this.options.data);
this.el.bind('mousemove', function(evt) {
var left, offset, right, width, x;
offset = _this.el.offset();
x = evt.pageX - offset.left;
if (_this.selectFrom) {
left = _this.data[_this.hitTest(Math.min(x, _this.selectFrom))]._x;
right = _this.data[_this.hitTest(Math.max(x, _this.selectFrom))]._x;
width = right - left;
return _this.selectionRect.attr({
x: left,
width: width
});
} else {
return _this.fire('hovermove', x, evt.pageY - offset.top);
}
});
this.el.bind('mouseleave', function(evt) {
if (_this.selectFrom) {
_this.selectionRect.hide();
_this.selectFrom = null;
}
return _this.fire('hoverout');
});
this.el.bind('touchstart touchmove touchend', function(evt) {
var offset, touch;
touch = evt.originalEvent.touches[0] || evt.originalEvent.changedTouches[0];
offset = _this.el.offset();
_this.fire('hover', touch.pageX - offset.left, touch.pageY - offset.top);
return touch;
});
this.el.bind('click', function(evt) {
var offset;
offset = _this.el.offset();
return _this.fire('gridclick', evt.pageX - offset.left, evt.pageY - offset.top);
});
if (this.options.rangeSelect) {
this.selectionRect = this.raphael.rect(0, 0, 0, this.el.innerHeight()).attr({
fill: this.options.rangeSelectColor,
stroke: false
}).toBack().hide();
this.el.bind('mousedown', function(evt) {
var offset;
offset = _this.el.offset();
return _this.startRange(evt.pageX - offset.left);
});
this.el.bind('mouseup', function(evt) {
var offset;
offset = _this.el.offset();
_this.endRange(evt.pageX - offset.left);
return _this.fire('hovermove', evt.pageX - offset.left, evt.pageY - offset.top);
});
}
if (this.options.resize) {
$(window).bind('resize', function(evt) {
if (_this.timeoutId != null) {
window.clearTimeout(_this.timeoutId);
}
return _this.timeoutId = window.setTimeout(_this.resizeHandler, 100);
});
}
if (this.postInit) {
this.postInit();
}
}
0