Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Ayuda con graficas y javascript

JavaScript - Ayuda con graficas y javascript

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de ASTRID

Ayuda con graficas y javascript

Publicado por ASTRID (7 intervenciones) el 10/03/2016 21:50:40
Hola si por favor alguien me puede ayudar con el ejemplo UPDATE de esta página http://maurizzzio.github.io/function-plot/ que muestra dos graficas cuando le dan click al boton update pero no sé como usarlo y poner eso en el html :S Al final de la pagina en playground esta un ejemplo que si funciona

PD: yo estoy empezando con la programacion y disculpen la ignorancia jeje... Muchas gracias

Esto es lo que me dan en la pagina pero no se como usarlo en el html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var options = {
  target: '#quadratic-update',
  data: [{
    fn: 'x'
  }]
};
$('#update').click(function () {
  if (!options.title) {
    // add a title, a tip and change the function to y = x * x

    options.title = 'hello world';
    options.tip = {
      xLine: true,
      yLine: true
    };
    options.data[0] = {
      fn: 'x * x',
      derivative: {
        fn: '2 * x',
        updateOnMouseMove: true
      }
    }
  } else {
    // remove the title and the tip

    // update the function to be y = x

    delete options.title;
    delete options.tip;
    options.data[0] =  {
      fn: 'x'
    }
  }
  functionPlot(options)
})
// initial plot

functionPlot(options)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ayuda con graficas y javascript

Publicado por Vainas (258 intervenciones) el 14/03/2016 14:00:15
Buenas:

Te puedo ayudar pero no entiendo en realidad lo que quieres.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ASTRID

Ayuda con graficas y javascript

Publicado por ASTRID (7 intervenciones) el 14/03/2016 18:21:42
necesito todo el codigo del html con el boton update configurado para que el javascript funcione asi como en el ejemplo update

Dibujo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ayuda con graficas y javascript

Publicado por Vainas (258 intervenciones) el 15/03/2016 13:54:09
Buenas:

La verdad es que la documentacion no deja todo claro pero bueno aqui va mi explicacion:

En realidad la libreria tiene que ser "compilada" con npm para poder utilizar todo lo que hay que cargar antes que ella. Ellos ofrecen una solucion en donde todo viene compilado y solo recibes un archivo que es importarla de:

1
<script src="https://wzrd.in/standalone/function-plot@1.16.3"></script>

wzrd parece ser un servicio que realiza todos los pasos de compilacion de librerias en npm.

Aqui viene lo que no dejan claro... o si:

Function Plot is a plotting library built on top of D3.js

Dice que esta construida en base a D3.js asi que vamos a la web y me consigo que tambien hay una libreria ya compilada del mismo

1
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

Con esto ya no da errores en la llamadas a la funcion. Solo queda crear la capa que va a tener el grafico(Yo solo copio lo que vienen en el ejemplo):

1
2
3
<div class="col-md-6 center-block demos">
	<span id="quadratic-update" class="graph"></span>
<div>

Y luego ya el codigo js.

En general queda asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div class="col-md-6 center-block demos">
	<span id="quadratic-update" class="graph"></span>
<div>
<button id="update" >Update</button>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://wzrd.in/standalone/function-plot@1.16.3"></script>
<script type="text/javascript">
$(function(){
var options = {
  target: '#quadratic-update',
  data: [{
    fn: 'x'
  }]
};
$('#update').click(function () {
  if (!options.title) {
    // add a title, a tip and change the function to y = x * x

    options.title = 'hello world';
    options.tip = {
      xLine: true,
      yLine: true
    };
    options.data[0] = {
      fn: 'x * x',
      derivative: {
        fn: '2 * x',
        updateOnMouseMove: true
      }
    }
  } else {
    // remove the title and the tip

    // update the function to be y = x

    delete options.title;
    delete options.tip;
    options.data[0] =  {
      fn: 'x'
    }
  }
  functionPlot(options);
})
// initial plot

functionPlot(options);
});
</script>
</body>
</html>

Ten en cuenta que no he usado boostrap asi que el boton se ve por defecto.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar