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

Version imprimable

26/04/2018, 17h29
dubis

Comment utiliser un graph sparkline avec un flot de données
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:

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:

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:

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

Merci de votre aide.
30/04/2018, 11h44
NoSmoking

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

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:

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

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

Code:

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:

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.

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:

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:

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:

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:

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:

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

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:

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();  
}

Merci NoSmoke,

Je vois ce que tu veux dire, ce serai bien si je n'avais qu'un seul type de message avec un seul type de topics, et donc un seul type de playload. J'ai en fait plusieurs message et j'ai donc fait une déclaration de switch (area) { sur la position 1 de l'array message, mit dans la variable area. Ceci dit j'ai du mieux mais ce n'est pas complet. J'ai donc modifié le case basement comme ceci :

Code:

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
                 case 'basement':
                    $('#basementTempSensor').html('(Sensor value: ' + payload + ')');
                    // Fin de condition         
                    // Graphe Start Here
                    console.log(" Message basement payload avant graphe : " + payload);
				var valuesList = [0];
				var sparklineDuration = 30;
				var sparklinePulsTime = 2000; //every second - how frequent to update line
 
// 				console.log(" Flag valueList : " + payload);
				var sparklineLeadLine = function() {
				console.log(" Flag Graphe valueList : " + valuesList);
				$('.basementTempSparkline').sparkline(valuesList, {
				type: 'line',
				width: '50%',
				height: '50'
				});
			}
			window.setInterval(function(){
			valuesList.push(payload);
			console.log(" Flag1 valueList : " + payload);
			valuesList = updateValueList(valuesList, sparklineDuration);
			console.log(" Flag2 valueList : " + payload);
	        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;}
 
//                         End graphe
 
                    break;

Ce que j'ai compris il ne faut pas mettre # devant l'ID du graphe mais un point.
Avec ce type de code j'ai le graphe qui commence à être modifié mais il prend des valeurs bizarres :

Code:

1
2
3
4
5
6
7
8
9
10
Flag Graphe valueList : 0,17,17,17,17
 Flag1 valueList : 24
 Flag2 valueList : 24
 Flag Graphe valueList : 0,24,24,24
 Flag1 valueList : 18
 Flag2 valueList : 18
 Flag Graphe valueList : 0,18,18,18,18,18,18
 Flag1 valueList : 22
 Flag2 valueList : 22
 Flag Graphe valueList : 0,22,22

Apparemment toutes les colonnes de l'array sont écrasée par la dernière valeur de payload. Ce qui expliquerai la "flat line"

Merci.

02/05/2018, 19h50
NoSmoking

Citation:

Ce que j'ai compris il ne faut pas mettre # devant l'ID du graphe mais un point.

c'est comme en CSS, les sélecteurs lui sont d'ailleurs empruntés, # pour les ID et . pour les classes.

Citation:

Apparemment toutes les colonnes de l'array sont écrasée par la dernière valeur de payload. Ce qui expliquerai la "flat line"

il faut que ton tableau de données soit une variable globale alors que dans ton code elle apparaît comme locale.

Code:

var valuesList = [0];

regarde où elle est placée dans le code que je t'ai mis.

8O Effectivement si je met la variable après la balise script cela fonctionne 8O
Code:

1 2 <script type="text/javascript"> var valuesList = [0] ;
Résultat de log :
Code:

1 2 3 Flag Graphe valueList : 24,24,27,15,24,19,15,26,16,18,19,16,23,22,24,24,27,15,24,19,15,26,16,18,19,16,23,22,24,24 Flag Graphe valueList : 22,24,24,27,15,24,19,15,26,16,18,19,16,23,22,24,24,27,15,24,19,15,26,16,18,19,16,23,22,24 Flag Graphe valueList : 24,24,27,15,24,19,15,26,16,18,19,16,23,22,24,24,27,15,24,19,15,26,16,18,19,16,23,22,24,24
Cela ne m'arrange pas si je veut faire du cas par cas avec switch et case

L'autre problème la série de valeur n'arrête pas de changer de colonne dans l'array même quand il n'y a pas de nouvelle valeur. Cela fausse la représentation de la réalité, mais bon j'ai trouvé la solution de mon problème principale, remplir le tableau du graphe dynamiquement.
Je marque donc comme résolu c'est à moi de creuser maintenant.
Merci au support de Nosmoke