Comment mettre à jour le graphique Sparkline toutes les 3 secondes dans Spring MVC (mise à jour en temps réel)

Publié: 2013-06-17

Tutoriel graphique Sparkline.js utilisant Spring MVC 4.2.2 - Crunchify Tips

jQuery Sparkline : Ce plugin jQuery permet de générer facilement un certain nombre de différents types de sparklines directement dans le navigateur, en utilisant en ligne une ligne de deux de HTML et Javascript.

Le plugin n'a pas de dépendances autres que jQuery et fonctionne avec tous les navigateurs modernes

Utilisons maintenant cette bibliothèque dans l'architecture Spring MVC pour votre application Web en temps réel . Voici un aperçu rapide de ce que nous allons faire ici :

  • Dans Spring MVC, mon contrôleur reçoit des données toutes les 3 secondes et les envoie au fichier .jsp (View).
  • Afficher le fichier (.jsp), obtenir des données JSONArray toutes les 3 secondes via un appel AJAX
  • L'appel AJAX envoie des données à la fonction consommeJSONData(jsonArray)
  • consommeJSONData met à jour Sparkline toutes les 3 secondes

Commençons à coder :

Étape 1

Pre-Requisite: https://crunchify.com/hello-world-example-spring-mvc-3-2-1/ (Déployez ce projet avec succès sur Tomcat)

Vous avez besoin ci-dessous d'une dépendance supplémentaire json.jar Maven. Ouvrez le fichier pom.xml et ajoutez la dépendance ci-dessous.

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

Étape 2

Créez le fichier CrunchifySpringSparklineConsumeJSONArray .java sous le package 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 ( ) ;
     }
}

Étape 3

Créez le fichier sparkline.jsp sous le dossier /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 >

Un autre doit lire:

  • Exemple d'énumération Java simple
  • Exemple Java MailAPI - Envoyer un e-mail via GMail SMTP
  • Qu'est-ce qu'un thread démon en Java ? Exemple joint

Étape 4

Vérifiez cette structure de répertoires.

Sparkline Graph utilisant Spring MVC - Mise à jour toutes les 3 secondes

Étape-5

Redéployez à nouveau le projet CrunchifySpringMVCTutorial dans Apache Tomcat Server.

  • Accédez à l'onglet Server dans Eclipse
  • Cliquez sur Clean...
  • Cliquez sur Publish
  • Cliquez sur Restart

Étape-6

Ouvrez le navigateur Web et visitez cette URL pour voir le résultat : http://localhost:8080/CrunchifySpringMVCTutorial/sparkline.html

Comment vérifier le résultat et vérifier le flux complet ?

Étape 1

Faites attention à votre résultat. Il devrait être le même que celui que vous voyez en haut de cette page.

Étape 2

Vérifiez la sortie de la console Eclipse. Vous verrez le journal de la console avec des données toutes les 3 secondes. Cela signifie que le contrôleur Spring MVC envoie des données à la page JSP toutes les 3 secondes.

Le contrôleur Spring MVC transmet les données à la page JSP toutes les 3 secondes

Étape 3

Consultez la console du navigateur pour voir les données en direct.

  1. Faites un clic droit sur la page pour sélectionner Inspect Element
  2. Sélectionnez l'onglet de la console

Spring MVC live data comint to Chrome Browser - Astuces Crunchify