Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Grafico en tiempo real Javascript Expressjs y html

JavaScript - Grafico en tiempo real Javascript Expressjs y html

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 5
Ha disminuido su posición en 11 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Grafico en tiempo real Javascript Expressjs y html

Publicado por bruno (2 intervenciones) el 21/09/2020 19:31:44
Bueno, tengo un proyecto personal casi finalizado que lo realizo a modo de practica/desafio para integrarme a nuevas tecnologias.
Utilizo html, mysql, javascript, D3js para graficar y expressjs con nodejs para levantar un servidor y recuperar datos de la base de datos.

Basicamente son 4 imagenes que se agrandan según cuantos clicks le haces a cada una de google, facebook, inmokey y youtube. Los datos estan almacenados en una base de datos y el unico dato dinamico que tiene es el "numero de visitas" que aumentara cada vez que se haga click en la imagen.
Ej: Si hago click en la imagen de "google" esta hace un "update" a la base de datos y a la vez agranda el tamaño en la pagina de la imagen con una escala hecha por mi donde el "tamaño" se multiplica por el "numero de visitas".
Con d3 agrego las etiquetas y tomas los valores haciendo una petición al servidor que recupera y devuelve los datos a el script que utiliza el html.
LES ADJUNTO FOTOS y CODIGO.
Ya funciona y conseguí hacer las conexiones con el servidor, base de datos html y el script, funciona, guarda los datos, los actualiza y los levanta según mis acciones.
entonces.. ¿que quiero solucionar? El grafico no se actualiza en tiempo real si el "click" se hace desde otra pestaña. Es decir, puedo tener 2 pestañas apuntando a la pagina y ambas impactaran correctamente en la base de datos pero no en la visualización del grafico en tiempo real (Si hago 2 clicks a "facebook "desde la "pestaña1" y 1 click a "facebook" desde otra pestaña EN LA BASE DE DATOS APARECERAN 3 VISITAS pero GRAFICAMENTE en una pestaña el tamaño es equivalente a 2 VISITAS y en la otra pestaña A 1 VISITA, CUANDO DEBERIAN SER 3 en ambas). Necesito que lo que haga desde cualquier pestaña a la misma página impacte visualmente SIN TENER QUE HACER UN F5.
Dicho de otra forma, los cambios en la base de datos tienen que reflejarse en tiempo real en "el grafico" (las imagenes), cosa que se vea igual en cualquier pestaña o accediendo desde cualquier navegador sin tener que hacer un "F5" en la pagina.

De momento utilize un "setInterval(GetLinks,5000); para que cada 5 segundos me recupere datos actualizado de la base de datos, pero cuando aplico "setInterval(Graficar, 2000); ejecuta el codigo de graficar cada 2 segundos pero no me modifica los valores con los nuevos recibidos en "GETLINKS".

Mil disculpas por las mayusculas y el tamaño del texto, quise ser lo mas explicativo posible. Gracias, es la primera vez que me meto en estos foro a divulgar y estoy ingresando al mundo de la programación web. Volvi a codear después de mucho tiempo.

do4Fko5
IHgm1Z5
dUnk0BV
8ryqRMq

El script: VER "GRAFICAR()" que utilice D3 y la "Respuesta" es un json convertido a array que recupero con express de la base de datos. Utilice D3 por que es sobre lo que tengo que aprender y me lo están requiriendo, se que es no esta del todo bien aplicado pero lo hice solo a modo de practica con mis propias imagenes.

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
var Respuesta;
    GetLinks(); //crea conexion y los aplica a "Respuesta" para rellenar los DOM con d3.
 
 //declaracion de variables
 //parametros contenedor SVG
 var h= 1000; //altura
 var w= 1500; //Ancho
 //Links Variables
 var contV=0;//contador de visitas a cada link
 var HI=50;//heigth Imagen
 
//para las transiciones al cambiar de tamaño de las imagenes.
 var ImagenGrande;
 var Imagennormal;
 
 //separacion entre imagenes (padding)
 var Separacion= 200;
//posicion  en x y en Y de imagenes
 x=200;
 y=200;
 //elemento SVG
 
     var svg = d3.select("body")
                         .append("svg")//crea el svg
                         .attr("width", w)//aplica ancho
                         .attr("height", h);//aplica largo
 
     setTimeout(Graficar,800);
 
    function Graficar(){
        console.log("graficando");
        var ImagenesLinks=svg.selectAll("g")
 
         .data(Respuesta).enter().append("g").append("a")
         .attr("href",function(d){
 
               return d["Link"];
 
           })
           .attr( "target","_blank")
           .append("image").attr("xlink:href",function(d){
 
              //return d[3];
             return d["Url"];
           })
           .attr("x",function(d){
               x=x+Separacion;
               return x;
           }).attr("idnombre",function(d){
           //return d[1];
           return d["Nombre"];
 
           })
           .attr("id",function(d){
               //return d[0]
           return d["ID"].toString();
 
           })
           .attr("y",y).attr("height",50).attr("width",50)
    .on("click",function(d){
     var Visitas= d["Visitas"]+1;
     let data = {"Visitas" : ""+Visitas+""}
 
     $.ajax({
     type: 'PUT',
     url: "/actualizar/"+d["ID"]+"",
     contentType: 'application/json',
     data: JSON.stringify(data),
     }).done(function () {
     console.log('SUCCESS');
     }).fail(function (msg) {
     console.log('FAIL');
     }).always(function (msg) {
     console.log('ALWAYS');
     }   );
     d["Visitas"]++;
     ImagenesLinks;
     })
     .on("mouseover",function(d){
     ImagenGrande = ImagenesLinks.transition().duration(1000)
     .attr("height",function(d){
 
 
  contV=d["Visitas"];
  return HI*contV;
 
     })
     .attr("width",function(d){
 
   contV=d["Visitas"];
  return HI*contV;
     });
  ImagenGrande;
 
     }   )
     .on("mouseout",function(){
    Imagennormal = ImagenesLinks.transition().duration(1000).attr("y",y).attr("height",50).attr("width",50);
     Imagennormal;
 
     }
     );
       }
 //////////////////////////////Respuesta Peticion GET/////////////////////////////
 function GetLinks(){
    $.ajax({
     url: '/paginas',
     success: function(respuesta) {
       Respuesta=respuesta;
         console.log(Respuesta);
     },
     error: function() {
         console.log("No se ha podido obtener la información");
     }
 });
 };
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
sin imagen de perfil
Val: 5
Ha disminuido su posición en 11 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Grafico en tiempo real Javascript Expressjs y html

Publicado por bruno (2 intervenciones) el 21/09/2020 22:45:50
Lo solucione "Temporalmente" , no utilizo el servidor como me gustaria para ver en tiempo real pero consegui que se "refresque" el grafico cada 5 segundos con setInterval(); llamando a GetLinks() y la funcion Graficar().
Pero modifique la funcion "Graficar" , en lugar de utilizar d["Visitas"] uso directamente el array que recupero en GetLinks() llamado "Respuesta" , logre referenciarlo por ID asi:


Respuesta[ d["ID"] ].Visitas; <--> esto va a buscar dentro del grafico el ID que es un numero , entonces va a el array "Respuesta" en la posición del ID sobre el que se hizo "CLICK" y luego a las Visitas que tiene en esa posición.
De esta manera cuando utilizo "GetLinks()" me actualiza Respuesta y puedo utilizarlo con D3, lo actualizo cada 5 segundos y listo, la acción que haga en una pestaña impactara en la otra a los 5 segundos.

De todas maneras me gustaría que me ayuden a ver otra forma de solucionarlo mas por el lado del servidor por que a mi forma de verlo no se si es muy buena la practica que termine haciendo, debido a que genera una petición a la base de datos cada 5 segundos, independientemente de las acciones del cliente.
Intente hacer que se active por un evento pero no logre el resultado esperado.
Adjunto el script y el html
Html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<title>Proyecto Links</title>
        <script src="https://d3js.org/d3.v3.min.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="../ScriptChart.js">// con el ../ esos 2 puntos "suben un nivel y van a la carpeta arriba de la que se encuentra este html</script>
       </script>-->
 
   </head>
    <body>
        <p >
 
            <button onclick=Resetear()><b>Peticion PUT/Resetear</b></button>
        </p>
    </body>
<script src="js/ScriptChart.js"></script>
<script> setInterval(Refrescar,5000);  </script>
 
</html>

Script
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
var Respuesta;
    GetLinks(); //crea conexion y los aplica a "Respuesta" para rellenar los DOM con d3.
 
 //declaracion de variables
 //parametros contenedor SVG
 var h= 1000; //altura
 var w= 1500; //Ancho
 //Links Variables
 var contV=0;//contador de visitas a cada link
 var HI=50;//heigth Imagen
 
//para las transiciones al cambiar de tamaño de las imagenes.
 var ImagenGrande;
 var Imagennormal;
 
 //separacion entre imagenes (padding)
 var Separacion= 200;
//posicion  en x y en Y de imagenes
 x=200;
 y=200;
 //elemento SVG
 
     var svg = d3.select("body")
                         .append("svg")//crea el svg
                         .attr("width", w)//aplica ancho
                         .attr("height", h);//aplica largo
 
     setTimeout(Graficar,800);
 
    function Graficar(){
        console.log("graficando");
        var ImagenesLinks=svg.selectAll("g")
 
         .data(Respuesta).enter().append("g").append("a")
         .attr("href",function(d){
 
               return d["Link"];
 
           })
           .attr( "target","_blank")
           .append("image").attr("xlink:href",function(d){
 
              //return d[3];
             return d["Url"];
           })
           .attr("x",function(d){
               x=x+Separacion;
               return x;
           }).attr("idnombre",function(d){
           //return d[1];
           return d["Nombre"];
 
           })
           .attr("id",function(d){
               //return d[0]
           return d["ID"].toString();
 
           })
           .attr("y",y).attr("height",50).attr("width",50)
    .on("click",function(d){
     //var Visitas= d["Visitas"]+1;
     var Visitas= Respuesta[d["ID"]].Visitas+1;
     let data = {"Visitas" : ""+Visitas+""}
 
     $.ajax({
     type: 'PUT',
     url: "/actualizar/"+d["ID"]+"",
     contentType: 'application/json',
     data: JSON.stringify(data),
     }).done(function () {
     console.log('SUCCESS');
     }).fail(function (msg) {
     console.log('FAIL');
     }).always(function (msg) {
     console.log('ALWAYS');
     }   );
     d["Visitas"]++;
     ImagenesLinks;
     })
     .on("mouseover",function(d){
     ImagenGrande = ImagenesLinks.transition().duration(1000)
     .attr("height",function(d){
 
    contV=Respuesta[d["ID"]].Visitas;//este es el cambio que hice en "Graficar()"
  //contV=d["Visitas"];
  return HI*contV;
 
     })
     .attr("width",function(d){
    contV=Respuesta[d["ID"]].Visitas;
   //contV=d["Visitas"];
  return HI*contV;
     });
  ImagenGrande;
 
     }   )
     .on("mouseout",function(){
    Imagennormal = ImagenesLinks.transition().duration(1000).attr("y",y).attr("height",50).attr("width",50);
     Imagennormal;
 
     }
     );
       }
 //////////////////////////////Respuesta Peticion GET/////////////////////////////
 function GetLinks(){
    $.ajax({
     url: '/paginas',
     success: function(respuesta) {
       Respuesta=respuesta;
         console.log(Respuesta);
     },
     error: function() {
         console.log("No se ha podido obtener la información");
     }
 });
 };
 
 ////////////////////////RESETEAR//////////////////////////////////////////////
 function Resetear(){
 
  datos = "nada"
   $.ajax({
     type: 'PUT',
     url: "/actualizarTodos",
     }).done(function () {
     console.log('SUCCESS');
     }).fail(function (msg) {
     console.log('FAIL');
     }).always(function (msg) {
     console.log('ALWAYS');
     }   );
 
     for(i=0;i<Respuesta.length;i++){
         Respuesta[i].Visitas=1;
     }
 }
 
 //FUNCION AGREGADA, "REFRESCAR"
///////////////////////////////Refrescar/////////////////////////////////////////
function Refrescar(){
    GetLinks();
    setTimeout(Graficar,800);
    console.log("refrescado");
}
//////////////////////////////////////////////////////////////////////////////
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