Cum să actualizați Sparkline Graph la fiecare 3 secunde în Spring MVC (Actualizare în timp real)

Publicat: 2013-06-17

Tutorial Sparkline.js Graph folosind Spring MVC 4.2.2 - Sfaturi Crunchify

jQuery Sparkline: Acest plugin jQuery facilitează generarea unui număr de tipuri diferite de sparkline direct în browser, folosind online o linie de două din HTML și Javascript.

Pluginul nu are alte dependențe decât jQuery și funcționează cu toate browserele moderne

Acum să folosim această bibliotecă în arhitectura Spring MVC pentru aplicația dvs. web în timp real . Iată un flux rapid cu ceea ce vom face aici:

  • În Spring MVC, controlerul meu primește date la fiecare 3 secunde și le trimite la fișierul .jsp (View).
  • Vizualizați fișierul (.jsp), obțineți date JSONArray la fiecare 3 secunde prin apelul AJAX
  • Apelul AJAX trimite date către funcția consumeJSONData(jsonArray).
  • consumeJSONData actualizează Sparkline la fiecare 3 secunde

Să începem să codificăm:

Pasul 1

Pre-Requisite: https://crunchify.com/hello-world-example-spring-mvc-3-2-1/ (Implementați acest proiect cu succes pe Tomcat)

Mai jos aveți nevoie de dependență suplimentară de json.jar Maven. Deschideți fișierul pom.xml și adăugați mai jos dependența.

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

Pasul 2

Creați fișierul CrunchifySpringSparklineConsumeJSONArray .java sub pachetul 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 ( ) ;
     }
}

Pasul 3

Creați fișierul sparkline.jsp în folderul /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 >

Altul trebuie să citească:

  • Exemplu simplu de enumerare Java
  • Exemplu Java MailAPI – Trimiteți un e-mail prin GMail SMTP
  • Ce este Daemon Thread în Java? Exemplu atasat

Pasul-4

Verificați această structură de directoare.

Sparkline Graph folosind Spring MVC - Actualizați la fiecare 3 secunde

Pasul-5

Reinstalați proiectul CrunchifySpringMVCTutorial în Apache Tomcat Server din nou.

  • Accesați fila Server în Eclipse
  • Faceți clic pe Clean...
  • Faceți clic pe Publish
  • Faceți clic pe Restart

Pasul-6

Deschideți browserul web și vizitați această adresă URL pentru a vedea rezultatul: http://localhost:8080/CrunchifySpringMVCTutorial/sparkline.html

Cum se verifică rezultatul și cum se verifică fluxul complet?

Pasul 1

Atenție la rezultatul dvs.. Ar trebui să fie același cu cum îl vedeți în partea de sus a acestei pagini.

Pasul 2

Verificați ieșirea consolei Eclipse. Veți vedea jurnalul consolei cu date la fiecare 3 secunde. Aceasta înseamnă că controlerul Spring MVC trimite date către pagina JSP la fiecare 3 secunde.

Controlerul Spring MVC trimite datele pe pagina JSP la fiecare 3 secunde

Pasul 3

Verificați Consola browser pentru a vedea datele în direct.

  1. Faceți clic dreapta pe pagină pentru a selecta Inspect Element
  2. Selectați fila console

Datele live din Spring MVC vin în browserul Chrome - Crunchify Tips