Comment utiliser un graph sparkline avec un flot de données

**dubis** · 26/04/2018, 17h29

Bonjour,

Je source les script suivant dans ma pag web : jquery-1.7.2.min.js et jquery.sparkline.js dans leur dernière version.

Voici la définition de mon graphe sparkline avec un array statique qui fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var Temp = [11,13,14,17,15,19,14,14,17,15,19,16,14];
$('.basementTempSparkline').sparkline(Temp, {
type: 'line',
 width: '160',
height: '40'
});

Quand j'essaye de pousser les 20 dernières données de payload dans le array il ne fonctionne plus :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
var Temp =[]; 
Temp.push(parseInt(payload));
if (Temp.length >= 20) {
Temp.shift()
}
$('.basementTempSparkline').sparkline(Temp, {
type: 'line',
 width: '160',
height: '40'
});

Avec la déclaration ci dessus la place du graphe dans la page html reste blanche. Si je met Temp entre guillemet dans la déclaration du graphe sparkline, j'ai un ligne plate.
Je me sert de payload à travers une web socket. Sa valeur s'affiche dynamiquement suivant ses variations comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $('#TempSensor').html('(Sensor value: ' + payload + ')');

Merci de votre aide.

**NoSmoking** · 30/04/2018, 11h44

Bonjour,
vérifie quand même que parseInt(payload) ne te retourne pas NaN.

**dubis** · 30/04/2018, 20h08

Bonjour Nomosking,

Comment vérifier la valeur de parseInt(payload)? (Comment as tu fait pour la coloration syntaxique ?)
La valeur de payload s'affiche très bien dans la page et une condition fait changer la couleur suivant le niveau.
Ceci dit dans l'état ou j'ai ouvert mon post il n'est pas sur que le tableau se remplisse à la volée.
J'ai donc trouvé ceci qui crée un graphe dynamique avec des valeurs hazardeuses.

J'ai donc essayé de l’intégrer comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
     case 'basement':
                    $('#basementTempSensor').html('(Sensor value: ' + payload + ')');
                 //Condition de couleur d'affichage
                // debut de Graphe
	     var sparklineDuration = 30; //seconds - value stay in view for how long
		var valuesList = []; // list of values
		var sparklinePulsTime = 1000; //every second - how frequent to update line
                var sparklineLeadLine = function() {
	        $('.basementTempSparkline').sparkline( valuesList, {
	            type: 'line',
	            width: '100%',
	            height: '50'
	        });
	    }
	    window.setInterval(function(){
	    valuesList.push( payload ) + ","; // Push in the valuesList array
	    valuesList = updateValueList(valuesList, sparklineDuration);
	        sparklineLeadLine();
	    }, sparklinePulsTime);
	    var refreshSparklines;
	    $(window).resize(function(e) {
	        clearTimeout(refreshSparklines);
	        refreshSparklines = setTimeout(sparklineLeadLine, 500);
	    });
	    sparklineLeadLine();
// 	})
	function updateValueList(valuesList, sparklineDuration) {
	    if(valuesList.length > sparklineDuration) {
	        return valuesList.slice(valuesList.length - sparklineDuration,valuesList.length);
	    }
	    return valuesList;
	}
                    break;

Toujours un ligne plate pas d'issue

**NoSmoking** · 01/05/2018, 08h23

• J'ai du mal à comprendre ce que tu essaies de faire avec ces lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
valuesList.push(payload) + ","; // Push in the valuesList array
valuesList = updateValueList(valuesList, sparklineDuration);

... tu dois avoir des erreurs dans la console (F12).

• D'où sort la valeur de payload ?

• Essaie ce fichier exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8">
<title>JQuery Sparkline Live</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js"></script>
</head>
<body>
	<p>JQuery Sparkline Live</p>
  <input id="new-value" value="">  
	<div id="jq-sparkline-live"></div>
<script>
var valuesList = [0];
var sparklineLeadLine = function() {
  $('#jq-sparkline-live').sparkline(valuesList, {
    type: 'line',
    width: '100%',
    height: '50'
  });
}
 
$("#new-value").on("change", function() {
  var val = $(this).val();
  if (!isNaN(val)) {
    valuesList.push(val);
    $(this).val("");
    console.log("tab : ", valuesList);
    sparklineLeadLine();
  }
  else {
    $(this).val("ERREUR saisie !");
  }
});
</script>
</body>
</html>

Nota : il faut au moins 2 valeurs pour que le graphe apparaisse.

**dubis** · 01/05/2018, 20h42

Bonjour NoSmocking,

Merci pour le code et pour répondre au 2 premières questions :
En ce qui concerne cette ligne

valuesList.push(payload) + ",";

C'est une mise en forme de ceci qui est fixe qui devrait être comprise comme ceci :

var valuesList = [11,13,14,17,15,19,14,14,17,15,19,16,14];

Avec cette dernière liste c'est un valeur fixe qui s'affiche. Du coup je ne vois pas comment générer une deuxième liste de valeur ?
Ceci dit cela ne fonctionne pas avec ou sans + ","

payload une valeur générée par un script python qui est sensé envoyer des messages MQTT à un serveur websocket en python. D'ailleurs je monitore le message dans ma page web comme ceci :

Latest MQTT message: home/basement temp, 26

Dans ce cas payload prend la valeur 26.
Voici la fonction qui génère le payload :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
        function onMessageArrived(message) {
            var topic = message.destinationName;
            var payload = message.payloadString;
            console.log("Topic: " + topic + ", Message payload: " + payload);
            $('#message').html(topic + ', ' + payload);
            var message = topic.split('/');
            var area = message[1];
            var state = message[2];

Celui ci apparaît donc dans la console :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
opic: home/basement/temp, Message payload: 2
index.html:75:13
ReferenceError: responseObject is not defined[En savoir plus]
index.html:69:13
Host: 127.0.0.1, Port: 3000, Path: /mqtt TLS: false
index.html:57:13
Topic: $SYS/broker/version, Message payload: HBMQTT version 0.9.2
index.html:75:13
Error: Data do not match the MQTT topic.
index.html:193:26
Topic: home/basement/temp, Message payload: 25
index.html:75:13
Topic: home/kitchen/window, Message payload: true
index.html:75:13

Du coup j'ai ajouté 2 flags supplémentaires un avant le case et l'autre avant la fonction du graphe et la valeur est bien apparue dans la console :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Topic: home/basement/temp, Message payload: 17
 Message basement payload avant if: 17
 Message basement payload avant graphe : 17

Apparemment il n'y a pas d'erreur à part que le graphe reste plat

En ce qui concerne le code fourni je l'ai modifié comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
                    console.log(" Message basement payload avant graphe : " + payload);
				var valuesList = [0];
				var sparklineLeadLine = function() {
				$('#basementTempSparkline').sparkline(valuesList, {
				type: 'line',
				width: '100%',
				height: '50'
				});
			}
 
				payload.on("change", function() {
				var val = $(this).val();
				if (!isNaN(val)) {
				valuesList.push(val);
				$(this).val("");
				console.log("INTEGRATION ValuesLisr : ", valuesList);
				sparklineLeadLine();
				}
				else {
				$(this).val("ERREUR saisie !");
				}
				});
//                         End graphe

Je n'ai pas d'erreur dans la log :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Topic: home/basement/temp, Message payload: 16
 Message basement payload avant if: 16
 Message basement payload avant graphe : 16

et pas de retour pour "INTEGRATION ValuesLisr ". Je pas de graphe qui s'affiche moins qu'une ligne plate.
Merci

**NoSmoking** · 02/05/2018, 09h54

Tu récupères la valeur dans ta fonction onMessageArrived(message), c'est donc de là que tu dois appeler la fonction de mise à jour de ton graphe. Dans mon exemple c'est l'équivalent de la fonction sur le onchange.

pour synthétiser cela pourrait donner

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var valuesList = [0];
var sparklineLeadLine = function() {
  $('#jq-sparkline-live').sparkline(valuesList, {
    type: 'line',
    width: '100%',
    height: '50'
  });
}
function onMessageArrived(message) {
  var topic = message.destinationName;
  // récupération de ta valeur
  var payload = message.payloadString;
  console.log("Topic: " + topic + ", Message payload: " + payload);
  // ajout valeur, on pourrait faire des test
  valuesList.push(payload);
  // appel fonction de traçage
  sparklineLeadLine();  
}

Comment utiliser un graph sparkline avec un flot de données

jQuery

Vue hybride

Discussions similaires

Partager

Partager