So aktualisieren Sie das Sparkline-Diagramm alle 3 Sekunden in Spring MVC (Echtzeit-Update)

Veröffentlicht: 2013-06-17

Sparkline.js-Diagramm-Tutorial mit Spring MVC 4.2.2 - Crunchify-Tipps

jQuery Sparkline: Dieses jQuery-Plugin macht es einfach, eine Reihe verschiedener Arten von Sparklines direkt im Browser zu generieren, indem es online eine Zweizeile von HTML und Javascript verwendet.

Das Plugin hat außer jQuery keine Abhängigkeiten und funktioniert mit allen modernen Browsern

Lassen Sie uns nun diese Bibliothek in der Spring MVC-Architektur für Ihre Echtzeit-Webanwendung verwenden. Hier ist ein kurzer Ablauf dessen, was wir hier tun werden:

  • In Spring MVC erhält mein Controller alle 3 Sekunden Daten und sendet sie an die .jsp-Datei (View).
  • Datei (.jsp) anzeigen, JSONArray-Daten alle 3 Sekunden per AJAX-Aufruf abrufen
  • Der AJAX-Aufruf sendet Daten an die Funktion „consumeJSONData(jsonArray)“.
  • konsumierenJSONData aktualisiert Sparkline alle 3 Sekunden

Beginnen wir mit dem Codieren:

Schritt 1

Pre-Requisite: https://crunchify.com/hello-world-example-spring-mvc-3-2-1/ (Stellen Sie dieses Projekt erfolgreich auf Tomcat bereit)

Sie benötigen unten eine zusätzliche json.jar Maven-Abhängigkeit. Öffnen Sie die Datei pom.xml und fügen Sie die folgende Abhängigkeit hinzu.

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

Schritt 2

Erstellen Sie die Datei CrunchifySpringSparklineConsumeJSONArray .java unter dem Paket 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 ( ) ;
     }
}

Schritt 3

Erstellen Sie die Datei sparkline.jsp im Ordner /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 >

Ein weiteres muss gelesen werden:

  • Einfaches Java-Enum-Beispiel
  • Java MailAPI-Beispiel – Senden Sie eine E-Mail über GMail SMTP
  • Was ist Daemon-Thread in Java? Beispiel anbei

Schritt 4

Checken Sie diese Verzeichnisstruktur aus.

Sparkline-Diagramm mit Spring MVC - Aktualisierung alle 3 Sekunden

Schritt-5

Stellen Sie das CrunchifySpringMVCTutorial -Projekt erneut in Apache Tomcat Server bereit.

  • Gehen Sie in Eclipse zur Registerkarte Server
  • Klicken Sie auf Clean...
  • Klicken Sie auf Publish
  • Klicken Sie auf Restart

Schritt-6

Öffnen Sie den Webbrowser und besuchen Sie diese URL, um das Ergebnis zu sehen: http://localhost:8080/CrunchifySpringMVCTutorial/sparkline.html

Wie verifiziere ich das Ergebnis und überprüfe den vollständigen Fluss?

Schritt 1

Achten Sie auf Ihr Ergebnis. Es sollte dasselbe sein, wie Sie es oben auf dieser Seite sehen.

Schritt 2

Sehen Sie sich die Ausgabe der Eclipse-Konsole an. Sie sehen alle 3 Sekunden ein Konsolenprotokoll mit Daten. Das bedeutet, dass der Spring MVC-Controller alle 3 Sekunden Daten an die JSP-Seite sendet.

Der Spring MVC-Controller überträgt alle 3 Sekunden Daten auf die JSP-Seite

Schritt 3

Checkout Browser-Konsole, um Live-Daten zu sehen.

  1. Klicken Sie mit der rechten Maustaste auf die Seite, um Inspect Element auszuwählen
  2. Wählen Sie die console aus

Spring MVC-Live-Daten kommen in den Chrome-Browser - Crunchify-Tipps