I'm trying to create a graph with morris.js, but it gives me an error:
Uncaught Error: Graph container element not found
at d [as constructor] (morris.min.js:6)
at d.c [as constructor] (morris.min.js:6)
at new d (morris.min.js:6)
at Object.d [as Area] (morris.min.js:6)
at HTMLDocument.<anonymous> (morris-data.js:6)
at j (jquery.js:2)
at Object.fireWith [as resolveWith] (jquery.js:2)
at Function.ready (jquery.js:2)
at HTMLDocument.J (jquery.js:2)
I have looked at solutions, and one of them is to put the scripts at the end, after the div, but it does not solve anything. The div in question, where I want the graph to appear is the following:
<%@page import="Clases.Usuario"%>
<%@page import="java.util.ArrayList"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="img/logo_ur.png" />
<title>UR Apuestas - Perfil</title>
<!-- Bootstrap Core CSS -->
<link href="CSS/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="CSS/sb-admin.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="CSS/morris.css" rel="stylesheet">
<link rel="stylesheet" href="CSS/estilos.css">
<!-- Custom Fonts -->
<link href="CSS/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top nav-sports" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header logo-sports">
<a class="navbar-brand" href="sports.jsp"><img src="img/logo_ur.png" class="logo-sports"/></a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav user-sports">
<li class="dropdown user-sports">
<a href="#" class="dropdown-toggle usuario-sports" data-toggle="dropdown"><img src="img/coins.png"> <%=(String) session.getAttribute("puntos")%> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="perfil.jsp"><i class="fa fa-fw fa-refresh"></i> Canjear</a>
</li>
<li>
<a href=""><i class="fa fa-fw fa-refresh"></i> Recargar</a>
</li>
<li class="divider"></li>
<li>
<a href="ajustes.jsp"><i class="fa fa-fw fa-shopping-cart"></i> Comprar</a>
</li>
</ul>
</li>
<li class="dropdown user-sports">
<a href="#" class="dropdown-toggle mensajes-sports" data-toggle="dropdown"><i class="fa fa-envelope"></i> <b class="caret"></b></a>
<ul class="dropdown-menu message-dropdown">
<li class="message-preview">
<a href="#" class="dropdown-toggle usuario-sports" data-toggle="dropdown">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-footer">
<a href="#">Read All New Messages</a>
</li>
</ul>
</li>
<li class="dropdown user-sports">
<a href="#" class="dropdown-toggle usuario-sports" data-toggle="dropdown"><i class="fa fa-user"></i> <%=(String) session.getAttribute("user")%> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="perfil.jsp"><i class="fa fa-fw fa-user"></i> Perfil</a>
</li>
<li>
<a href="ajustes.jsp"><i class="fa fa-fw fa-envelope"></i> Ajustes</a>
</li>
<li class="divider"></li>
<li>
<form action="ControladorUsuario" method="POST">
<input type="hidden" name=""
<a href="#"><i class="fa fa-fw fa-power-off"></i> Salir</a>
</form>
</li>
</ul>
</li>
<li class="dropdown user-sports">
<form action="ControladorUsuario" method="POST">
<a href="#"><i class="fa fa-fw fa-power-off"></i> Salir</a>
</form>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav nav-right">
<div class="right-user-sports">
<center>
<h3> <%=(String) session.getAttribute("nombre")%> <%=(String) session.getAttribute("apellidos")%></h3>
<a href="perfil.jsp"><img src="img/profile.png" class="img-profile"></a>
<div class="progress level">
<div class="progress-bar progress-bar-info progress-bar-striped " role="progressbar" aria-valuenow="<%=(String) session.getAttribute("exp")%>" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: <%=(String) session.getAttribute("exp")%>%">
<%=(String) session.getAttribute("exp")%>%
</div>
</div>
</center>
</div>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-angle-double-down"></i> Deportes <i class="fa fa-fw fa-angle-double-down"></i></a>
<ul id="demo" class="collapse">
<li>
<a href="futbol.jsp">Futbol</a>
</li>
<li>
<a href="baloncesto.jsp">Baloncesto</a>
</li>
<li>
<a href="tenis.jsp">Tenis</a>
</li>
</ul>
</li>
<li>
<a href="apuestas.jsp"><i class="fa fa-fw fa-bars"></i> Mis Apuestas</a>
</li>
<li>
<a href="premios.jsp"><i class="fa fa-fw fa-edit"></i> Premios</a>
</li>
<li>
<a href="ranking.jsp"><i class="fa fa-fw fa-desktop"></i> Ranking</a>
</li>
<li>
<a href="contacto.jsp"><i class="fa fa-fw fa-wrench"></i> Contacto</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
<div class="container-fluid body-sports">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img src="img/profile.png" class="img-profile">
<div class="caption">
<center>
<h3>Imanol Urrutia Diaz</h3>
<p><a href="#" class="btn btn-primary" role="button">Cambiar imagen</a></p>
</center>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="well">Imanol Urrutia Diaz</div>
<div class="well">urrutia</div>
<div class="well">[email protected]</div>
<div class="well">605025198</div>
<div class="well">Castro urdiales</div>
</div>
<div class="col-lg-4">
<div class="info-box blue-bg">
<img src="img/coins-icon-perfil-bg.png" />
<div class="count"><%=(String) session.getAttribute("puntos")%></div>
<div class="title">URCoins</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-long-arrow-right fa-fw"></i> Donut Chart</h3>
</div>
<div class="panel-body">
<div id="morris-donut-chart"></div>
<div class="text-right">
<a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-futbol-o fa-fw"></i> Social</h3>
</div>
<div class="row deportes-sports">
<div class="col-lg-4 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<img src="img/modificar-icon.png" class="sports-icon"/>
</div>
<div class="col-xs-9 text-right">
<div class="huge">Cambiar Datos</div>
<div>Cambia los datos de tu cuenta!</div>
</div>
</div>
</div>
<a href="cambiarDatos.jsp">
<div class="panel-footer">
<span class="pull-left">Modernizate tio!</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<img src="img/apuestas-icon.png" class="sports-icon"/>
</div>
<div class="col-xs-9 text-right">
<div class="huge">Mis apuestas</div>
<div>Consulta tus apuestas!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Habras ganado? o perdido?</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<img src="img/contacto-icon.png" class="sports-icon"/>
</div>
<div class="col-xs-9 text-right">
<div class="huge">Mensajes</div>
<div>Consulta los ultimos mensajes!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Rapido ti@!Que no tenemos todo el dia!</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-futbol-o fa-fw"></i> Tu perfil</h3>
</div>
<div class="row deportes-sports">
<div class="col-lg-4 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<img src="img/perfil-icon.png" class="sports-icon"/>
</div>
<div class="col-xs-9 text-right">
<div class="huge">Mi Perfil</div>
<div>Cambia los datos de tu perfil!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Actualizate!</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<img src="img/ajustes-icon.png" class="sports-icon"/>
</div>
<div class="col-xs-9 text-right">
<div class="huge">Ajustes</div>
<div>Configura los ajustes de la web!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Configurate!</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<img src="img/contacto-icon.png" class="sports-icon"/>
</div>
<div class="col-xs-9 text-right">
<div class="huge">Contacto</div>
<div>Contacta con nosotros!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Vamos!Que nos aburrimos...!</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- /.container-fluid -->
</div>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="JS/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="JS/bootstrap.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="JS/raphael.min.js"></script>
<script src="JS/morris.min.js"></script>
<script src="JS/morris-data.js"></script>
</body>
</html>
>
<script src="JS/raphael.min.js"></script>
<script src="JS/morris.min.js"></script>
<script src="JS/morris-data.js"></script>
function Donut(options) {
this.resizeHandler = __bind(this.resizeHandler, this);
this.select = __bind(this.select, this);
this.click = __bind(this.click, this);
var _this = this;
if (!(this instanceof Morris.Donut)) {
return new Morris.Donut(options);
}
this.options = $.extend({}, this.defaults, options);
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 placeholder not found.");
}
if (options.data === void 0 || options.data.length === 0) {
return;
}
this.raphael = new Raphael(this.el[0]);
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);
});
}
this.setData(options.data);
}
Donut.prototype.redraw = function() {
var C, cx, cy, i, idx, last, max_value, min, next, seg, total, value, w, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _results;
this.raphael.clear();
cx = this.el.width() / 2;
cy = this.el.height() / 2;
w = (Math.min(cx, cy) - 10) / 3;
total = 0;
_ref = this.values;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
value = _ref[_i];
total += value;
}
min = 5 / (2 * w);
C = 1.9999 * Math.PI - min * this.data.length;
last = 0;
idx = 0;
this.segments = [];
_ref1 = this.values;
for (i = _j = 0, _len1 = _ref1.length; _j < _len1; i = ++_j) {
value = _ref1[i];
next = last + min + C * (value / total);
seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.data[i].color || this.options.colors[idx % this.options.colors.length], this.options.backgroundColor, idx, this.raphael);
seg.render();
this.segments.push(seg);
seg.on('hover', this.select);
seg.on('click', this.click);
last = next;
idx += 1;
}
this.text1 = this.drawEmptyDonutLabel(cx, cy - 10, this.options.labelColor, 15, 800);
this.text2 = this.drawEmptyDonutLabel(cx, cy + 10, this.options.labelColor, 14);
max_value = Math.max.apply(Math, this.values);
idx = 0;
_ref2 = this.values;
_results = [];
for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
value = _ref2[_k];
if (value === max_value) {
this.select(idx);
break;
}
_results.push(idx += 1);
}
return _results;
};
Donut.prototype.setData = function(data) {
var row;
this.data = data;
this.values = (function() {
var _i, _len, _ref, _results;
_ref = this.data;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
row = _ref[_i];
_results.push(parseFloat(row.value));
}
return _results;
}).call(this);
return this.redraw();
};
Donut.prototype.click = function(idx) {
return this.fire('click', idx, this.data[idx]);
};
Donut.prototype.select = function(idx) {
var row, s, segment, _i, _len, _ref;
_ref = this.segments;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
s = _ref[_i];
s.deselect();
}
segment = this.segments[idx];
segment.select();
row = this.data[idx];
return this.setLabels(row.label, this.options.formatter(row.value, row));
};