[TUTO noodom] Nouveau widget nooChart

[noodom]

Bonsoir,

Je vous propose un nouveau widget nooChart pour afficher graphiquement l’historique de ses commandes numériques, basé sur la librairie HighCharts.

Le principe est de faciliter l’intégration de visuels de l’historique des commandes (regroupées ou pas) sous forme de courbes, de colonnes, de camemberts, …

Le code et les explications d’installation sont accessibles ici :

Voilà pour une démonstration rapide de quelques possibilités :

L’utilisation est plutôt simple :

• création d’un virtuel avec une simple commande info numérique qui ne sera utilisée que pour récupérer les différents paramètres nécessaires dont l(es) id(s) des commandes qu’on souhaite visualiser.
• ajout des paramètres pour personnaliser l’affichage

Les paramètres sont les suivants (seul le paramètre idCommand est obligatoire) :

idCommand : id des commandes à afficher (par défaut 0, pour afficher plusieurs graphiques, séparer les ids par des ‹ | ›, ex : 1234|5678)
chartType : (par défaut ‹ line ›,valeurs possibles : line : ligne, column : colonnes, area : aire, pie : camembert, bar : barres horizontales)
width : largeur du graphique (par défaut 300)
height : hauteur du graphique (par défaut 500)
chartTitle : titre du graphique (vide par défaut)
chartSubtitle : sous-titre du graphique (vide par défaut)
xTitle : légende de l’axe horizontal (vide par défaut)
yTitle : légende de l’axe vertical (vide par défaut)
yMin : valeur minimale de l’axe vertical (par défaut 0)
yMax : valeur maximale de l’axe vertical (par défaut 100)
duration : durée d’affichage jusqu’à la date de fin (dateEnd) (format : « 3y-6m-45m », « 24h », …)
dateStart : date de début d’affichage au format ‹ YYYY-MM-JJ › (par défaut « 2020-01-01 »)
dateEnd : date de fin d’affichage (par défaut date courante)
addSerieLabel : texte à afficher dans la popup affichée à chaque création de série de données (vide par défaut et donc pas d’affichage de popup)
addSerialColor : couleur du texte addSerieLabel (par défaut ‹ #FFFFFF ›)
addSerialBackgroundColor : couleur de fond du texte addSerieLabel (par défaut ‹ #FFFFFF ›)
suffix : chaine de caractères à ajouter aux valeurs (vide par défaut, par exemple ’ %‹ , ’ ° ›)
nbDecimals : nombre de décimales affichées pour les valeurs affichées (par défaut 2)

allowPointSelectPie : (actif seulement pour chartType=‹ pie ›) autorisation de sélectionner un élément du camembert (par défaut 1, valeurs possibles : 0 : non, 1: oui)
depthPie : (actif seulement si enabled3D est à 1) épaisseur du camembert (par défaut 35),
innerSizePie : largeur du trou à l’intérieur du camembert (par défaut 0),
enabledLabelsPie : affichage du libellé relié à chaque partie du camembert (par défaut 0, valeurs possibles : 0 : non, 1: oui)
enabled3D : active la visualisation 3D (par défaut 0, valeurs possibles : 0 : non, 1: oui)
alpha3D : (actif seulement si enabled3D est à 1) angle d’affichage pour la vue de haut (par défaut à 20)
beta3D : (actif seulement si enabled3D est à 1) angle d’affichage horizontal (par défaut à 20, valeurs cohérentes : -45 à 45)
depth3D : (actif seulement si enabled3D est à 1) distance du graphique par rapport au fond (par défaut à 20)
viewDistance3D : (par défaut 25)
showExportMenu : affiche le bouton permettant d’exporter l’affichage (png, jpeg, pdf, …), par défaut à 0, valeurs possibles : 0 : non, 1: oui
description : texte de description à ajouter en bas du graphique (vide par défaut)

C’est une première version (qu’on peut qualifier de BETA !), encore fraiche comme d’hab, donc c’est susceptible de beaucoup évoluer : corrections, améliorations de l’existant mais surtout ajout de nombreux paramètres supplémentaires.

[noodom]

[Réservé pour compléter]

[johann]

Bonjour @noodom,

Est-ce qu’il est possible d’avoir juste les dernière 24H, au lieu de mettre une date de départ fixe ?

Merci

[noodom]

Salut,

J’ai ajouté un nouveau paramètre duration pour gérer une durée plutôt qu’une date de début.
Ce paramètre est prioritaire sur le paramètre dateStart qui sera alors ignoré si les 2 sont présents.

• on peut définir une durée avec les formats suivants : M pour le nombre de mois, w pour le nombre de semaines, d pour le nombre jours, h pour le nombre d’heures, m pour le nombre de minutes, s pour le nombre de secondes
• au choix, on peut mettre un de ces formats ou plusieurs, séparés par un tiret (-), qui vont alors s’additionner

Exemples de formats possibles :

• « 1d » ou « 24h » : durée de 24h
• « 2M-1w-2d-12h-30mn-10s » : durée de 2 mois, 1 semaine, 2 jours, 12h, 30mn et 10 secondes

Dispos sur le github.

[johann]

Merci pour ce retour rapide, ça marche très bien.

En revanche, j’ai un soucis avec la courbe, j’ai ajouté 4 ID dans le paramétre IDcommand, mais je ne vois qu’une seule courbe sur le graphique

Parfois en actualisant, j’ai ça :

Est-ce qu’il y autre chose à faire ? Les 4 id sont bien historisés.

Merci

[noodom]

Ils ont tous des historiques sur la période ?
Possible qu’ils ne soient pas affichées si pas de valeurs présentes sur la période.

Tu peux tester un par un si ils s’affichent correctement ?

Sinon je regarderai ce qui peut poser problème.

[johann]

Les commandes sont historisés sans purge.

Cela fonctionne bien quand je ne mets qu’une seule commande.

Merci

[Mika59]

Salut Noodom et merci pour ton travail conséquent !

J’essaie d’utiliser ce widget mais je ne parviens pas à ce que je veux…

En fait j’ai un curseur (slider) qui peut prendre 5 états différents (gestion poêle) et j’aimerais afficher un camembert avec le pourcentage d’utilisation des 5 états différents, est-ce possible ?

Si jamais tu repasses par ce sujet

[noodom]

@noodom

enabledLabelsPie

Helloo,

ça fait quelques temps que je n’ai pas joué avec ce widget

Le camembert n’est pas dépendant du slider mais de la commande info liée au slider.
Il faudra donc associer cette commande info à la commande info du camembert.

Tu crées donc un virtuel avec une commande info numérique.
Tu associes le widget nooChart à cette commande.
Ensuite, tu ajoutes les paramètres optionneles nécessaires pour aficher le camembert avec la commande info du poële.
(Je te laisse relire la documentation pour plus de détails si nécessaire)

[Mika59]

Merci pour ta réponse.
En fait je suis un peu perdu, j’ai un graphique standard « jeedom » et quand j’applique le widget cela me donne un résultat qui semble cumuler les états successivement. Je mets un screenshot pour illustrer…
Je pense que je dois d’abord calculer dans un virtuel les différents pourcentage puis ensuite lui appliquer le widget, ça me parait un peu lourd comme opération.

Le résultat que je cherche serait du genre :

[noodom]

Faut que je me replonge dans le widget, possible qu’il manque la gestion des labels pour les camemberts.
Tu peux tester avec le type column ou line pour voir ?

[Mika59]

Voilà 3 types différents, mon souci est que j’affiche des états mais pas des pourcentages…

[noodom]

Alors, j’ai regardé rapidement à nouveau le code et en effet, le camembert affiche tous les états qu’on lui donne (ici l’historique d’un équipement) et non les pourcentages d’utilisation hélas.
Il ne fait pas de calculs, il ressort juste les données fournies.

[Mika59]

Salut, du coup je passe par un code highchart qui correspond à peu près à ce que je cherche…
J’aimerais juste changer l’affichage des infos, ça ne rend pas terrible.

Par contre j’ai été obligé de créer un virtuel qui calcule le pourcentage de chaque donnée.

[noodom]

@Mika59

Par contre j’ai été obligé de créer un virtuel qui calcule le pourcentage de chaque donnée.

Et tu ne peux pas appliquer mon widget à ton virtuel du coup ?

@Mika59

je passe par un code highchart

EDIT : En relisant ta réponse, c’est ce que tu dois faire en fait ?

Je regarde pour personnaliser le rendu.

[Mika59]

J’ai essayé mais je t’avoue que je n’ai pas réussi…

J’ai réussi avec les graphiques de base de jeedom, j’ai réussi avec un bout de code trouvé sur ce forum mais pas avec ton widget…

En fait je me retrouve avec 5 infos dans mon virtuel et j’ai pas compris comment afficher un pie avec…
J’ai essayé de lister les infos comme ça :

idCommand : id des commandes à afficher (par défaut 0, pour afficher plusieurs grphiques, séparer les ids par des ‹ | ›, ex : 1234|5678)

mais sans résultat…

mon virtuel :

[noodom]

En fait il faudrait ajouter les valeurs (label, pourcentage) de chaque valeur de pourcentage sur la commande info numérique sur laquelle on applique le widget.

Par exemple un scénario du genre :

• effacer l’historique du widget
• ajouter chaque pourcentage des valeurs à afficher

(Avec pour déclencheur la commande info numérique du champ à suivre pour une mise à jour à chaque modif)

Bon, il doit y avoir moyen de faire plus simple… là c’est au plus rapide.

[delaportedom]

Bonjour,
je viens sur ce sujet car je n’ai pas compris comment faire pour ajouter chaque pourcentage ou valeur sur une seule commande info numérique pour obtenir un graph « type camembert » ?
D’avance merci
Dominique

[Telaix]

Bonjour,
Tout d’abords félicitation à noodom pour son widget nooCircleProgress qui fonctionne à merveille.
Dans la lignée de ce dernier j’ai voulu utiliser nooChart et là impossible de le faire fonctionner en suivant toutes les instructions d’installation et de paramétrage…
Ce widget est il toujours compatible avec les dernières versions de Jeedom, j’utilise la 4.3.15 ?
Merci d’avance pour votre retour.
Cordialement.

[Nipepsi]

Bonjour noodom,

Tout d’abord, désolé de déterrer ce post 2 ans après ta dernière intervention !!
Je suis dans le même cas que @Telaix, je n’arrive pas à utiliser ton Widget nooChart.
Ta procédure étant très clair, je n’ai pas eu de souci particulier :

• Je créé le Widget
• Je l’applique sur une commande info / numérique d’un virtuel n’ayant que cette commande
• Je met le paramètre idCommand avec le numéro d’ID de mon graph
• J’enregistre mon virtuel…

Et la, c’est le drame ! Impossible d’afficher le Dashboard, boutons du haut plus fonctionnels, … Dès que le chargement arrive au virtuel, plantage.
J’ai réussi par chance à ouvrir un virtuel présent au tout début de mon Dashboard avant que ma page essai d’afficher le virtuel, ce qui m’a permis de retourner sur la liste de mes virtuel et de désactiver le virtuel en question. J’ai essayé 4 fois, même problème.
La version de mon Jeedom est la 4.3.21.
Peut être une incompatibilité avec ma version de Jeedom, ou une mauvaise manip de ma part…
Es-tu au courant de ce problème ? Aurais-tu un petit conseil à me donner ?
Au passage, merci pour tout ton travail sur les widgets, je suis en pleine création de mes designs, tes widgets en font parti