Je poursuis avec plus ou moins de bonheur mon parcours initiatique sur Jeedom.
J’explore les Vues et les Designs et je trouve surprenant que les vues qu’on s’amuse à fignoler ne soit pas intégrables directement dans les Design mais qu’on doive récréer des « Graphiques » qui reprennent sensiblement les mêmes infos et les mêmes menus (sauf toutefois la possibilité d’ordonner les séries).
C’est peut-être historique et c’est peut-être aussi une piste d’amélioration de fusionner ces deux fonctionnalités.
Par ailleurs, j’ai cherché sans succès à obtenir des graphiques (colonne ou pas) à la fois groupés et empilés comme on peut le faire avec Excel par exemple. Je n’ai pas trouvé comment faire et je ne suis pas sûr que ce soit possible.
Quelqu’un a-t-il un retour d’expérience là-dessus ?
Je ne connais pas Grafana mais ça a l’air tres intéressant. Je vois qu’il y a une API. Pensez-vous qu’il soit possible que Jeedom envoie des donnees a Grafana et recupere les visualisation dans un Design ?
Je connais pas HighCharts mais ça a aussi l’air vraiment très bien. J’ai l’impression cependant que c’est un produit payant.
Je suis prêt à programmer quelque chose mais les tutos que je trouve (comme celui-ci) se concentrent sur l’accessoire (les couleurs, leurs formes, les css, etc…) en omettant l’essentiel: comment établir la connexion entre HighCharts et Jeedom ?
Je vais farfouiller pour essayer trouver mais si vous avez un lien explicatif, ce serait super.
Puis de cliquer sur le bouton « nouveau ». Problème: je n’ai pas de bouton « nouveau » mais je me dis que cela a peut-être changé et que c’est désormais le bouton « créer un widget »
Alors je clique sur « créer un widget » et effectivement j’ai la fenêtre qui va bien qui s’ouvre :
J’indique alors comme dans le tuto que je veux crée un widget de type info et de sous-type numérique et de Nom JaugeHighchart et là… j’ai un message d’erreur: « le sous-type ne peut être vide ».
Bonjour,
La réponse de Jeedom concernant Le sous type ne peut être vide:
Vous avez vu l’exemple pour savoir comment créer les axes et les séries de données pour qu’elles soient groupées ?
On y accède par le bouton sur la page de l’exemple fourni plus haut.
Bon… je progresse mais très lentement en raison de ma méconnaissance de jeedom.
1. Première étape:
Suite au bug signalé par Loïc sur la création de widget code, je l’ai créé à la main et j’y est collé le code Highcharts (html + css + javascript). A ce stade, cela revient à coller le fichier exemple avec des données statiques
2. je me doute bien que je vais devoir remplacer ces données statiques par celles issues en dynamique de commandes Jeedom
ChatGPT qui est mon ami (parce que pour trouver l’info autrement… bonjour) m’indique que la syntaxe va être quelque chose de ce genre (modulo des concaténations et tripatouillages divers et variés pour se conformer à la structure qu’attend Highcharts):
var data = jeedom.cmd.get({id: "ton_id_de_commande"});
Highcharts.chart('container', {
series: [{
name: 'Données dynamiques',
data: data // insérer les données récupérées
}]
});
3. en ensuite ?
je ne sais pas trop parce que le widget code créé à la main n’apparaît pas dans la liste de mes widgets. En revanche, il apparaît dans la liste des possibles remplacements ce qui m’effraie: DanielJ explique en effet que cet outil de remplacement est irréversible (j’aurais envie d’écrire irrémédiable) et comme je suis tout sauf sûr de moi… j’hésite.
Deux questions ouvertes pour moi:
Suis-je sur la bonne piste ?
Y a-t-il moyen de tester tout cela dans une sandbox sans tout casser ?
ps: j’ai bien vu le plugin script mais ça me paraît encore plus scabreux.
Je me permets de relancer ce sujet sur les graphique groupés ET empilés parce que - au-delà du fait que je n’ai pour l’instant pas convergé - je lis d’innombrables fils du forum qui m’orientent vers des pistes différentes sans qu’il me soit vraiment possible de comprendre celle(s) qu’il faut employer. Du reste, il y a peut-être plusieurs façon de faire.
Pour adapter les codes Highcharts, je vois des tas de procédés différents sans que leurs auteurs ne précisent nécessairement ce qu’ils font et où ils le font. De ce que j’ai compris :
certains utilisent un fichier html placé dans hml/data/customTemplates qu’on vient charger par un code js qu’on place - lui - dans /mobile/custom ou /desktop/custom selon ce qu’on veut faire. C’est ce qui est fait ici pour Widget Solid Gauge
d’autres encore semblent utiliser le plugin Pimp my Jeedom comme indiqué sur le Github associé au code de Noodom: [TUTO noodom] Nouveau widget nooChart
Bref, je ne sais pas laquelle (lesquelles) de ces méthodes est la plus appropriée à mon cas. Et pour tout dire, je m’embrouille trop souvent dans les explications détaillées du forum desquelles j’ai du mal à faire ressortir les principes généraux.
Après avoir infiniment pesté, maugréé et vitupéré Jeedom pour ses aspects horriblement geek, je suis heureux de vous présenter enfin une contribution positive sur les graphiques groupés ET empilés:
J’ai donc employé les graphiques HighCharts en me fondant sur l’utilisation du plugin plugin-htmldisplay . Inutile de vous dire que je n’y serai jamais parvenu sans l’aide massive de notre nouvel ami à tous, ChatGPT qui a très largement contribué au code final que voici :
Je n’ai pas réussi (et ChatGPT non plus) à faire en sorte que le graphique soit peuplé par défaut sur un créneau de dates données (par exemple de J-7 à J-1). C’est une affaire de chargement asynchrone mais le graphique « arrive » vide et je dois préciser les dates « à la main » pour qu’il se peuple.
Une remarque sur le contenu des énergies journalières affichées:
Je me serais attendu à ce que production + importation soit un peu supérieur à consommation + exportation, à cause des pertes. Or j’ai systématiquement le contraire. Je n’ai pas d’explication satisfaisante mais je vais vérifier que les données intégrées (en sommes par jour) considèrent toutes bien les mêmes périodes de temps.
Voilà, merci à tous ceux qui ont supporté avec navrement mes errements et commentaires doux-amers. Ceci dit, avant que Jeedom devienne un produit grand public, il risque de se passer du temps.
Bravo et merci !
Peux-tu préciser la mise en œuvre ?
Il suffit de faire un copier/coller du code, comment/ou indiquer les sources de données ?
Merci par avance
Ensuite, on colle le code indiqué dans l’éditeur de l’onglet « dashboard » si on veut que cette visualisation apparaisse sur le dashboard ou « mobile » si on veut qu’elle apparaisse sur le mobile (ou les deux).
Les sources de données sont les numéros de commande spécifiques aux équipements et sont spécifiées par les commandes du type :
// Chargement production
jeedom.history.get({
cmd_id: 42,
dateStart: dateStartStr,
dateEnd: dateEndStr,
success: function (result) {
for (let i = 0; i < result.data.length; i++) {
const d = new Date(result.data[i][0]);
timestamps.push(d.getTime());
prod_jour.push(Math.floor(result.data[i][1] / 1000));
}
chargements++;
essayerAfficherGraphique();
}
});
Ici, le numéro 42 correspond au numéro de la commande « production jour » de ma passerelle enphase:
L’avantage de cette librairie highcharts est qu’elle permet de rassembler les séries en autant de catégories qu’on veut (enfin, je pense, je n’ai pas testé). Moi j’ai utilisé deux catégories « In » et « Out » mais on peut sans doute en faire autant qu’on veut.
sur la page de l’exemple fourni plus haut.
