¿Cómo rellenar una grafica Morris con un array?
Publicado por Inma (3 intervenciones) el 05/11/2022 00:21:54
Hola tengo una duda sobre como rellenar los datos de la grafica morris con un array que obtengo del metedo fibonacci, no consigo crear la grafica con un array.. Adjunto codigo..
<!DOCTYPE html>
<html>
<title>Mi Grafica</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<link rel="stylesheet" href="morris.css">
<script src="morris.js-0.5.1/morris.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg320mUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Gráficas</h1>
<hr>
<div class="row">
<div class="col-md-6">
<h2>Gráfica de linea</h2>
<hr>
<div id="myfirstchart"></div>
</div>
</div>
</div>
> Script: Aqui saco la funcion de fibonacci para hacerlo array
<script>
var numerosY = []; //Numero del fibonacci
var numerosX = []; //Numeros de abajo de la grafica
function fibonacci(num) {
if (num < 2) {
return num;
}
else {
return fibonacci(num - 1) + fibonacci(num - 2);
}
}
//Pido un numero al usuario para hacer los arrays
var numeroEntra = prompt('Introduzca numero: ');
if (numeroEntra <= 0) {
alert('Introduzca un numero positivo');
}
else {
for (var j = 1; j <= numeroEntra; j++) {
numerosX.push(j);
}
for (var i = 0; i < numeroEntra; i++) {
/* numerosY = fibonacci(i); */
numerosY.push(fibonacci(i));
}
alert(numerosY);
alert(numerosX);
}
> Luego lo quiero plasmar ese array en una grafica.
new Morris.Line({
element: 'myfirstchart',
> Es aqui donde no encuentro solucion, porque no se me rrelena los datos
> de la grafica
//Array de datos de la grafica
data: [
{ year: numerosX.length, value: numerosY.length },
],
xkey: 'year',
ykeys: ['value'],
labels: ['Value']
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<title>Mi Grafica</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<link rel="stylesheet" href="morris.css">
<script src="morris.js-0.5.1/morris.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg320mUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Gráficas</h1>
<hr>
<div class="row">
<div class="col-md-6">
<h2>Gráfica de linea</h2>
<hr>
<div id="myfirstchart"></div>
</div>
</div>
</div>
> Script: Aqui saco la funcion de fibonacci para hacerlo array
<script>
var numerosY = []; //Numero del fibonacci
var numerosX = []; //Numeros de abajo de la grafica
function fibonacci(num) {
if (num < 2) {
return num;
}
else {
return fibonacci(num - 1) + fibonacci(num - 2);
}
}
//Pido un numero al usuario para hacer los arrays
var numeroEntra = prompt('Introduzca numero: ');
if (numeroEntra <= 0) {
alert('Introduzca un numero positivo');
}
else {
for (var j = 1; j <= numeroEntra; j++) {
numerosX.push(j);
}
for (var i = 0; i < numeroEntra; i++) {
/* numerosY = fibonacci(i); */
numerosY.push(fibonacci(i));
}
alert(numerosY);
alert(numerosX);
}
> Luego lo quiero plasmar ese array en una grafica.
new Morris.Line({
element: 'myfirstchart',
> Es aqui donde no encuentro solucion, porque no se me rrelena los datos
> de la grafica
//Array de datos de la grafica
data: [
{ year: numerosX.length, value: numerosY.length },
],
xkey: 'year',
ykeys: ['value'],
labels: ['Value']
});
</script>
</body>
</html>
Valora esta pregunta
0
