Cómo actualizar Sparkline Graph cada 3 segundos en Spring MVC (actualización en tiempo real)

Publicado: 2013-06-17

Tutorial de Sparkline.js Graph con Spring MVC 4.2.2 - Consejos de Crunchify

jQuery Sparkline: este complemento de jQuery facilita la generación de diferentes tipos de minigráficos directamente en el navegador, utilizando en línea una línea de dos de HTML y Javascript.

El complemento no tiene otras dependencias que jQuery y funciona con todos los navegadores modernos.

Ahora usemos esta biblioteca en la arquitectura Spring MVC para su aplicación web en tiempo real . Aquí hay un flujo rápido de lo que haremos aquí:

  • En Spring MVC, mi controlador obtiene datos cada 3 segundos y los envía al archivo .jsp (Ver).
  • Ver archivo (.jsp), obtener datos de JSONArray cada 3 segundos a través de una llamada AJAX
  • La llamada AJAX envía datos a la función consumeJSONData (jsonArray)
  • consumeJSONData actualiza Sparkline cada 3 segundos

Comencemos a codificar:

Paso 1

Pre-Requisite: https://crunchify.com/hello-world-example-spring-mvc-3-2-1/ (Implemente este proyecto con éxito en Tomcat)

Necesita debajo de la dependencia adicional json.jar Maven. Abra el archivo pom.xml y agregue la dependencia a continuación.

pom.xml
1
2
3
4
5
< dependency >
< groupId > org . json < / groupId >
< artifactId > json < / artifactId >
< version > 20150729 < / version >
< / dependency >

Paso 2

Cree el archivo CrunchifySpringSparklineConsumeJSONArray .java en el paquete com.crunchify.controller .

CrunchifySpringSparklineConsumeJSONArray.java
Java
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
package com . crunchify . controller ;
 
import java . util . Random ;
 
import org . json . JSONArray ;
import org . json . JSONException ;
import org . json . JSONObject ;
import org . springframework . stereotype . Controller ;
import org . springframework . web . bind . annotation . RequestMapping ;
import org . springframework . web . bind . annotation . RequestMethod ;
import org . springframework . web . bind . annotation . ResponseBody ;
import org . springframework . web . servlet . ModelAndView ;
 
/**
* @author Crunchify.com
*
*/
 
@Controller
public class CrunchifySpringSparklineConsumeJSONArray {
 
     @RequestMapping ( "/sparkline" )
     public ModelAndView crunchifySparklineTest ( ) {
         return new ModelAndView ( "sparkline" , "message" , "Sparkline.js Example which accepts JSONArray value every 3 seconds & updates graphs.." ) ;
     }
 
     @RequestMapping ( value = "/sparklinetest" , method = RequestMethod . GET )
     public @ResponseBody
     String constructJSONArray ( ) throws JSONException {
 
         JSONObject one = new JSONObject ( ) ;
         JSONObject two = new JSONObject ( ) ;
         JSONObject three = new JSONObject ( ) ;
 
         JSONArray result = new JSONArray ( ) ;
         Random r = new Random ( ) ;
         int [ ] r1 = { r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) } ;
         int [ ] r2 = { r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) } ;
         int [ ] r3 = { r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) } ;
 
         one . put ( "one" , r1 ) ;
         two . put ( "two" , r2 ) ;
         three . put ( "three" , r3 ) ;
 
         result . put ( one ) ;
         result . put ( two ) ;
         result . put ( three ) ;
 
         JSONObject jsonObj = new JSONObject ( ) ;
         jsonObj . put ( "sparkData" , result ) ;
         System . out . println ( "Sendig this data to view (sparkline.jsp): " + jsonObj . toString ( ) ) ;
 
         return jsonObj . toString ( ) ;
     }
}

Paso 3

Cree el archivo sparkline.jsp en la carpeta /WebContent/WEB-INF/jsp .

sparkline.jsp
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
< html >
< head >
< TITLE > Crunchify - Sparkline . js Example which accepts JSONArray
     value every 3 seconds < / TITLE >
 
<style type ="text/css">
body {
     background-image :
         url ( 'https://cdn.crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png' ) ;
}
</style>
<script type = "text/javascript"
     src = "http://code.jquery.com/jquery-1.10.1.min.js" > </script>
<script
     src = "https://cdn.crunchify.com/wp-content/uploads/code/jquery.sparkline.js" > </script>
 
<script type = "text/javascript" >
     function crunchifySparkline ( ) {
         $ . ajax ( {
             url : 'sparklinetest.html' ,
             dataType : "json" ,
             cache : false ,
             contentType : 'application/json; charset=utf-8' ,
             type : 'GET' ,
             success : function ( result ) {
                 var one = result . sparkData ;
                 //alert(one);
                 consumeJSONData ( one ) ;
             }
         } ) ;
     }
 
     function consumeJSONData ( sparkData ) {
         console . log ( sparkData ) ;
         for ( var i = 0 ; i < sparkData . length ; i ++ ) {
             var obj = sparkData [ i ] ;
             var crunchifyName ;
             var crunchifyValue ;
             for ( var key in obj ) {
                 crunchifyName = key ;
                 crunchifyValue = obj [ key ] . toString ( ) ;
                 crunchifyValue = crunchifyValue . substr ( 1 ) ;
                 crunchifyValue = crunchifyValue . substring ( 0 ,
                         crunchifyValue . length - 1 ) ;
                 var n = crunchifyValue . split ( "," ) ;
                 console . log ( n ) ;
                 $ ( "#" + crunchifyName ) . sparkline ( n , {
                     type : 'line' ,
                     width : '80' ,
                     fillColor : '#eeeeee'
                 } ) ;
             }
         }
     }
</script>
 
<script type = "text/javascript" >
     var intervalId = 0 ;
     intervalId = setInterval ( crunchifySparkline , 3000 ) ;
</script>
< / head >
 
< body >
     < div align = "center" >
         < br > < br > $ { message } < br > < br >
         < div id = "result" > < / div >
 
         < br >
         < br > Sparkline One : &nbsp; &nbsp; &nbsp; &nbsp; < span id = "one" > . < / span >
         < br >
         < br > Sparkline Two : &nbsp; &nbsp; &nbsp; &nbsp; < span id = "two" > . < / span >
         < br >
         < br > Sparkline Three : &nbsp; &nbsp; &nbsp; &nbsp; < span id = "three" > . < / span >
         < br >
         < br > < br > < br >
 
         < div
             style = "font-family: verdana; line-height: 25px; padding: 5px 10px; border-radius: 10px; border: 3px solid #EE872A; width: 50%; font-size: 12px;" >
 
             Sparkline . js Example which accepts JSONArray value every 3 seconds by
             < a href = 'https://crunchify.com' > Crunchify < / a > . Click < a
                 href = 'https://crunchify.com/category/java-tutorials/' > here < / a >
             for all Java , Spring MVC , Web Development examples . < br >
         < / div >
     < / div >
< / body >
< / html >

Otro debe leer:

  • Ejemplo de enumeración simple de Java
  • Ejemplo de Java MailAPI: enviar un correo electrónico a través de GMail SMTP
  • ¿Qué es Daemon Thread en Java? Ejemplo adjunto

Etapa 4

Consulte esta estructura de directorios.

Sparkline Graph usando Spring MVC - Actualizar cada 3 segundos

Paso-5

Vuelva a implementar el proyecto CrunchifySpringMVCTutorial en Apache Tomcat Server nuevamente.

  • Ir a la pestaña Server en Eclipse
  • Haga clic en Clean...
  • Haga clic en Publish
  • Haga clic en Restart

Paso-6

Abra el navegador web y visite esta URL para ver el resultado: http://localhost:8080/CrunchifySpringMVCTutorial/sparkline.html

¿Cómo verificar el resultado y verificar el flujo completo?

Paso 1

Cuidado con el resultado. Debería ser el mismo que ves en la parte superior de esta página.

Paso 2

Echa un vistazo a la salida de la consola de Eclipse. Verá el registro de la consola con datos cada 3 segundos. Eso significa que el controlador Spring MVC está enviando datos a la página JSP cada 3 segundos.

El controlador Spring MVC envía datos a la página JSP cada 3 segundos

Paso 3

Consulte la consola del navegador para ver datos en vivo.

  1. Haga clic derecho en la página para seleccionar Inspect Element
  2. Seleccione la pestaña console

Comunión de datos en vivo de Spring MVC con el navegador Chrome - Consejos de Crunchify