Jak aktualizować wykres Sparkline co 3 sekundy w wiosennym MVC (aktualizacja w czasie rzeczywistym)

Opublikowany: 2013-06-17

Samouczek dotyczący wykresów Sparkline.js przy użyciu Spring MVC 4.2.2 — wskazówki dotyczące Crunchify

jQuery Sparkline: Ta wtyczka jQuery ułatwia generowanie wielu różnych typów wykresów przebiegu w czasie bezpośrednio w przeglądarce, przy użyciu linii online składającej się z dwóch kodów HTML i JavaScript.

Wtyczka nie ma zależności innych niż jQuery i działa ze wszystkimi nowoczesnymi przeglądarkami

Teraz użyjmy tej biblioteki w architekturze Spring MVC dla Twojej aplikacji internetowej czasu rzeczywistego . Oto krótki opis tego, co tutaj zrobimy:

  • W Spring MVC mój kontroler pobiera dane co 3 sekundy i wysyła je do pliku .jsp (Widok).
  • Przeglądaj plik (.jsp), pobieraj dane JSONArray co 3 sekundy za pomocą wywołania AJAX
  • Wywołanie AJAX wysyła dane do funkcji consumerJSONData(jsonArray)
  • consumerJSONData aktualizuje Sparkline co 3 sekundy

Zacznijmy kodować:

Krok 1

Pre-Requisite: https://crunchify.com/hello-world-example-spring-mvc-3-2-1/ (Wdróż ten projekt pomyślnie na Tomcat)

Potrzebujesz poniżej dodatkowej zależności json.jar Maven. Otwórz plik pom.xml i dodaj poniżej zależność.

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

Krok 2

Utwórz plik CrunchifySpringSparklineConsumeJSONArray .java w pakiecie 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 ( ) ;
     }
}

Krok 3

Utwórz plik sparkline.jsp w folderze /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 >

Inny musi przeczytać:

  • Przykład prostego wyliczenia Java
  • Przykład Java MailAPI – Wyślij wiadomość e-mail przez Gmail SMTP
  • Co to jest wątek demona w Javie? Przykład w załączeniu

Krok 4

Sprawdź tę strukturę katalogów.

Wykres Sparkline przy użyciu Spring MVC — aktualizacja co 3 sekundy

Krok-5

Ponownie wdróż projekt CrunchifySpringMVCTutorial na serwerze Apache Tomcat Server.

  • Przejdź do zakładki Server w Eclipse
  • Kliknij Clean...
  • Kliknij Publish
  • Kliknij Restart

Krok-6

Otwórz przeglądarkę internetową i odwiedź ten adres URL, aby zobaczyć wynik: http://localhost:8080/CrunchifySpringMVCTutorial/sparkline.html

Jak zweryfikować wynik i sprawdzić pełny przepływ?

Krok 1

Uważaj na swój wynik. Powinien być taki sam, jak widzisz na górze tej strony.

Krok 2

Sprawdź dane wyjściowe konsoli Eclipse. Co 3 sekundy zobaczysz log konsoli z danymi. Oznacza to, że kontroler Spring MVC wysyła dane do strony JSP co 3 sekundy.

Kontroler Spring MVC przesyła dane do strony JSP co 3 sekundy

Krok 3

Konsola przeglądarki Checkout, aby zobaczyć dane na żywo.

  1. Kliknij prawym przyciskiem myszy na stronie, aby wybrać opcję Inspect Element
  2. Wybierz kartę console

Dane na żywo Spring MVC są przesyłane do przeglądarki Chrome — porady Crunchify