Bonjour à tous,
Sur mon design, j’affiche une courbe de température et j’aimerais supprimer le nom de l’info sur le pointeur pour avoir juste la valeur de la température.
Sur l’ancien forum, j’ai trouvé ça mais visiblement ça ne marche pas.
.highcharts-label:nth-child(2)>.highcharts-label-box+text>tspan:not(:nth-of-type(3))
{
display:none;
}
Si quelqu’un à une idée…
Merci d’avance.
Samuel.
Bonjour,
Il me semble que ce n’était pas :nth-of-type(3)
mais plutôt :nth-of-type(1), maintenant je peux me tromper…
Ceci dit, je cherche la même chose car depuis une des màj Jeedom il y a quelques mois, cela ne fonctionne plus 
(une évolution de la librairie Highcharts je suppose)
EDIT : peut-être plutôt une modification de l’écriture du tooltip car voici comment il est affiché :
<g class="highcharts-label highcharts-tooltip-box highcharts-color-none" transform="translate(107,94)" style="cursor:default;white-space:nowrap;">
<path fill="none" class="highcharts-label-box highcharts-shadow" d="M 3.5 0.5 L 257.5 0.5 C 260.5 0.5 260.5 0.5 260.5 3.5 L 260.5 44.5 C 260.5 47.5 260.5 47.5 257.5 47.5 L 3.5 47.5 C 0.5 47.5 0.5 47.5 0.5 44.5 L 0.5 29.839398000000003 L -5.5 23.839398000000003 L 0.5 17.839398000000003 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path>
<path fill="none" class="highcharts-label-box highcharts-shadow" d="M 3.5 0.5 L 257.5 0.5 C 260.5 0.5 260.5 0.5 260.5 3.5 L 260.5 44.5 C 260.5 47.5 260.5 47.5 257.5 47.5 L 3.5 47.5 C 0.5 47.5 0.5 47.5 0.5 44.5 L 0.5 29.839398000000003 L -5.5 23.839398000000003 L 0.5 17.839398000000003 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path>
<path fill="none" class="highcharts-label-box highcharts-shadow" d="M 3.5 0.5 L 257.5 0.5 C 260.5 0.5 260.5 0.5 260.5 3.5 L 260.5 44.5 C 260.5 47.5 260.5 47.5 257.5 47.5 L 3.5 47.5 C 0.5 47.5 0.5 47.5 0.5 44.5 L 0.5 29.839398000000003 L -5.5 23.839398000000003 L 0.5 17.839398000000003 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path>
<path fill="rgba(247,247,247,0.85)" class="highcharts-label-box" d="M 3.5 0.5 L 257.5 0.5 C 260.5 0.5 260.5 0.5 260.5 3.5 L 260.5 44.5 C 260.5 47.5 260.5 47.5 257.5 47.5 L 3.5 47.5 C 0.5 47.5 0.5 47.5 0.5 44.5 L 0.5 29.839398000000003 L -5.5 23.839398000000003 L 0.5 17.839398000000003 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#d20000" stroke-width="1"></path>
<text x="8" data-z-index="1" y="20" style="color:#333333;font-size:12px;fill:#333333;">
15 289.08 Wh
<tspan class="highcharts-br" dy="15" x="8"></tspan>
[Informatique][Consommation][STAT_TODAY]
</text>
</g>
Donc sur le bloc <text> on arrive soit à tout supprimer, soit à supprimer uniquement le sous-bloc <span> , mais pas la ligne du dessus ni celle du dessous car elles ne sont pas définies comme des balises (c’est du texte pur).
C’est bien ça ?
Pour être clair, nous voudrions que le tooltip affiché qui est :
<text x="8" data-z-index="1" y="20" style="color:#333333;font-size:12px;fill:#333333;">
15 289.08 Wh
<tspan class="highcharts-br" dy="15" x="8"></tspan>
[Informatique][Consommation][STAT_TODAY]
</text>
devienne :
<text x="8" data-z-index="1" y="20" style="color:#333333;font-size:12px;fill:#333333;">
15 289.08 Wh
</text>
C’est possible ça ?
Bonjour,
Je suis tombé sur le post ayant la même problématique. Sur mobile, c’est particulièrement gênant, car pour certains points la valeur ne s’affiche même pas au détriment du libellé !
Ce n’est pas lié à une évolution de Highcharts mais à une modification du core Jeedom (ici). Auparavant le nom de la série était dans un « span » ce qui permettait de l’enlever avec une personnalisation css. Ce n’est plus le cas maintenant 
.
Peut-être qu’un dev Jeedom pourrait faire quelque chose ?
Philippe
Hello,
Pas seulement sur mobile, c’est le cas dans beaucoup de graphiques relativement petits : le nom dépasse presque toujours le cadre, donc on ne peut même pas lire la valeur
Exemple :
Please please, remettez le nom dans un « span » qu’on puisse l’afficher ou le masquer comme on le souhaite via 2 ou 3 lignes de code dans nos design 
J’ai besoin de l’aide du pro du « sed » SVP, car je n’ai jamais réussi les formules alambiquées avec cette fichue commande, elle me rend dingue 
En fait je n’arrive pas à échapper correctement les caractères > et <
Je voudrais :
history.class.js
pointFormat: '{point.y} {series.userOptions.unite}<br/>{series.userOptions.shortName}',
pointFormat: '{point.y} {series.userOptions.unite}<br/><span>{series.userOptions.shortName}</span>',
Je veux faire un petit script, comme ça à chaque mise à jour de Jeedom je n’ai qu’à relancer le script en un clic, plutôt que d’aller manuellement modifier le fichier (c’est beaucoup plus long et source de plus d’erreurs que le script).
Quelqu’un saurait me filer un petit coup de patte SVP ?
Bonjour,
Je ne suis pas un pro du sed mais je ne vois pas pourquoi il faudrait échapper les caractères > et <, c’est les / qu’il faut échapper :
sudo sed -i -e "s/pointFormat: '{point.y} {series.userOptions.unite}<br\/>{series.userOptions.shortName}',/pointFormat: '{point.y} {series.userOptions.unite}<br\/><span>{series.userOptions.shortName}<\/span>',/g" /var/www/html/core/js/history.class.js
Merci beaucoup, ça fonctionne parfaitement 
Je cherchais sur les « > » et « < » parce que le message d’erreur faisait référence à l’un des deux et j’y comprenais pas grand chose
Bonjour, je suis interéssé par le sujet j’ai donc essayé de modifier le fichier history.class.js
à la ligne 597 j’ai modifié et j’ai mis:
pointFormat: '{point.y} {series.userOptions.unite}<br\/><span>{series.userOptions.shortName}<\/span>',
Mais ça ne fonctionne pas. J’ai bien écrit la ligne non?
Merci
Bonjour @LMQT
Est-ce que la ligne de commande donnée fonctionne ou est-ce qu’il y a une autre modification à réalise ?
Merci de ton retour
Désolé du délai, je ne viens plus très souvent sur ce forum…
@theguilt et @Franck_jeedom , comme j’ai écrit juste avant :
Et à ce jour ça fonctionne encore 
Si ça peut aider, je m’étais fait un petit script et j’ai mis un bouton sur un de mes design pour l’exécuter, via le plugin du même nom, après chaque màj de Jeedom. Le voici :
#!/bin/sh
# Créé par : LMQT (forum Jeedom).
# Merci à Spine (forum Jeedom) pour la correction de la commande "sed".
#
# Script pour :
# remplacer dans le fichier : /var/www/html/core/js/history.class.js
# les occurrences du texte :
# pointFormat: '{point.y} {series.userOptions.unite}<br/>{series.userOptions.shortName}',
# par ce texte :
# pointFormat: '{point.y} {series.userOptions.unite}<br/><span>{series.userOptions.shortName}</span>',
# afin de pouvoir masquer le SPAN dans les personnalisations des Design.
#
# Créer ce script dans /var/www/html/plugins/script/data
# Lui donner les bons droits :
# chmod +x jeedom_graph_tooltip_span.sh
# chown www-data:www-data jeedom_graph_tooltip_span.sh
#
# Version : 1.0
cp -pf /var/www/html/core/js/history.class.js /var/www/html/core/js/history.class_backup.js
sed -i -e "s/pointFormat: '{point.y} {series.userOptions.unite}<br\/>{series.userOptions.shortName}',/pointFormat: '{point.y} {series.userOptions.unite}<br\/><span>{series.userOptions.shortName}<\/span>',/g" /var/www/html/core/js/history.class.js
Pour l’explication : ça crée une sauvegarde du fichier « history.class.js », puis ça lui ajoute les tags « span » là où il faut.
Si jamais la structure du fichier source change de manière trop importante et que ça vous plante l’affichage des graphique, ou pire, vous n’avez qu’à restaurer le fichier d’origine qui a été sauvé au même endroit sous le nom « history.class_backup.js ».
Voici le fichier du script en cas de besoin (attention à bien supprimer l’extension « .txt » et surtout à le conserver au format UTF-8) :
jeedom_graph_tooltip_span.sh.txt (1,1 Ko)
Et la config de l’équipement dans le plugin « Script » :
Bonjour et merci pour l’explication détaillée !
Je compte bien tester ça.
Cependant j’ai l’impression qu’il me manque quelque chose.
En effet après avoir appliquer le script qu iva modifier le fichier history.class.js, je comprends qu’il faut faire qqch en plus sur nos graphique afin de leur dire de masquer ces span qu’on vient d’ajouter.
C’était peut-être déjà dit mais ça m’échappe…
Merci pour les tuyaux !
C’est ce qui était indiqué dans le tout premier post
Tu crées un objet HTML et dans la zone de texte tu colles les morceaux qui t’intéressent parmi ceux-là :
<style>
/* Modifications des graphiques, s'applique sur la page entière */
.graph-widget[data-graph_id="15087546"] .highcharts-label:nth-child(2)>.highcharts-label-box+text>tspan:not(:nth-of-type(1)) {
display:none;} /* Retire le nom de l'équipement de la 1ère courbe */
.graph-widget[data-graph_id="15087546"] .highcharts-label:nth-child(3)>.highcharts-label-box+text>tspan:not(:nth-of-type(1)) {
display:none;} /* Retire le nom de l'équipement de la 2nde courbe */
.graph-widget[data-graph_id="15087546"] .highcharts-label:nth-child(4)>.highcharts-label-box+text>tspan:not(:nth-of-type(1)) {
display:none;} /* Retire le nom de l'équipement de la 3ème courbe */
.graph-widget[data-graph_id="15087546"] .highcharts-button {
display:none;} /* Masque TOUS les boutons du graphique */
.graph-widget[data-graph_id="15087546"] .highcharts-plot-bands-0 {
display:none;} /* Masque les bandes pour le jour actuel si affichage "jour" */
/* Quadrillage entier axe X : */
.graph-widget[data-graph_id="15087546"] .highcharts-xaxis-grid .highcharts-grid-line {
display:none !important;stroke-width:0.5 !important;stroke:silver !important;}
/* Quadrillage principal axe Y : */
.graph-widget[data-graph_id="15087546"] .highcharts-yaxis-grid .highcharts-grid-line {
stroke-width:1.0 !important;display:yes !important;stroke:silver !important;}
/* Quadrillage secondaire axe Y : */
.graph-widget[data-graph_id="15087546"] .highcharts-yaxis-grid .highcharts-minor-grid-line {
stroke-width:0.5 !important;display:yes !important;stroke:grey !important;}
/* Axe des Y lui-même : */
.graph-widget[data-graph_id="15087546"] .highcharts-yaxis .highcharts-axis-line {
stroke-width:1.0 !important;display:yes !important;stroke:transparent !important;}
/* Graduations de l'axe des X : */
.graph-widget[data-graph_id="15087546"] .highcharts-xaxis .highcharts-tick {
stroke-width:1.0 !important;stroke:silver !important;}
/* Tooltips : */
.graph-widget[data-graph_id="15087546"] .highcharts-tooltip .highcharts-label-box {
stroke-width: 1.5 !important; /* Augmentation épaisseur cadre */
fill: #FFFFFFBB !important;} /* Fond blanc, quasi transparent (rgba) */
</style>
Pour le tooltip, c’est au début.
NB : bien sûr, l’ID, si tu filtres avec, est à modifier en fonction de tes propres design. Sinon tu retires cette info et ça le fera sur TOUS les graphiques.
Merci, en effet j’avais pas compris. C’est clair maintenant : je crée un élément html qui n’affiche en fait rien mais qui inclut ce style qui s’appliquera alors aux graphiques du design.
Merci beaucoup, je testerai !
C’est fou ça fait des années que je demande de temps en temps comment virer ces fichues commandes à rallonge sur les graphique lors d’un survol de souris !