Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Le groupe des Helpers est present pour vous aidez, n'hésitez pas à poser des questions ;)

Toute la communauté vous remercie

/!\ L’ancien forum passera en lecture seule en janvier 2020 (Si community a bien pris le relais) puis nous le fermerons définitivement en janvier 2021./!\
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

Problème de graphique type camembert avec légende

Cette partie est réservée à l'utilisation de l'interface web de configuration de JEEDOM
eeBud
Timide
Messages : 381
Inscription : 28 mars 2016, 23:22
Localisation : Nancy

Re: Problème de graphique type camembert avec légende

Message par eeBud » 24 nov. 2018, 11:14

Je ne t'oublie pas, je te fais ça quand j'aurai un peu de temps, je peux maintenant poster sur le market, donc ce sera plus facile.
J'ai commencé, mais quelques modification à faire.
gaugelinhorcentr.png
gaugelinhorcentr.png (1.73 Kio) Consulté 460 fois

weado
Timide
Messages : 205
Inscription : 15 janv. 2017, 22:19

Re: Problème de graphique type camembert avec légende

Message par weado » 24 nov. 2018, 14:01

Sympa. merci ;-)

Djal94
Actif
Messages : 1224
Inscription : 09 août 2016, 09:21

Re: Problème de graphique type camembert avec légende

Message par Djal94 » 24 nov. 2018, 20:01

weado a écrit :
20 nov. 2018, 13:35
Hello,
Pour reprendre les exemples et les mettre à sauce, ce que j'ai réussi à faire pour beaucoup je cale sur la version "bar" d'highchart, car je voudrais fixer le datalabel à un endroit, mais non pas qu'il suive l'évolution de la barre. Voici mon exemple.

Trop à droite : Capture.PNG
Trop à gauche : Capture1.PNG
Parfait, mais je n'y arrive pas avec HighChart : Capture3.PNG

Une idée, car j'ai essayé de avec "formatter: function" mais je peux bouger que le style et avec d'autres fonctions mais rien n'y fait.

Hello, c'est possible de partager ton code stp? J'ai beau essayer avec le code du dessus, je n'y arrive pas.
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

weado
Timide
Messages : 205
Inscription : 15 janv. 2017, 22:19

Re: Problème de graphique type camembert avec légende

Message par weado » 25 nov. 2018, 10:09

eeBud a écrit :
24 nov. 2018, 11:14
Je ne t'oublie pas, je te fais ça quand j'aurai un peu de temps, je peux maintenant poster sur le market, donc ce sera plus facile.
J'ai commencé, mais quelques modification à faire.
gaugelinhorcentr.png
J'y suis arrivé !!! Effectivement, pas très compliqué, mais je plaçait mon DIV au mauvais endroit. (petit exemple dans l'image ci-dessous;-) )

@Djal94 : Je ne sais pas quoi te dire, car un copier coller fonctionnement directement chez moi :
Image 4.png
Image 4.png (2.97 Kio) Consulté 435 fois
pour mon exemple, j'ai crée un virtuel de test, en info / numérique et affecté le widget à ce virtual. Tiens moi au courant si besoin.

Djal94
Actif
Messages : 1224
Inscription : 09 août 2016, 09:21

Re: Problème de graphique type camembert avec légende

Message par Djal94 » 25 nov. 2018, 12:09

Je vais réessayer,
Tu mets l’ID de la commande à un seul endroit hein?

Merci

Autre question, c’est moi ou on peut pas afficher plus de 1 highchart par design ?
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

Djal94
Actif
Messages : 1224
Inscription : 09 août 2016, 09:21

Re: Problème de graphique type camembert avec légende

Message par Djal94 » 25 nov. 2018, 12:10

Tu peux partager le code du dernier stp?
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

eeBud
Timide
Messages : 381
Inscription : 28 mars 2016, 23:22
Localisation : Nancy

Re: Problème de graphique type camembert avec légende

Message par eeBud » 25 nov. 2018, 12:24

dashboard.info.numeric.eeBud - Info numérique linéaire Horizontal- Highcharts centré

Il est disponible sur le market.
J'espère qu'il n'y a pas de bug!

weado
Timide
Messages : 205
Inscription : 15 janv. 2017, 22:19

Re: Problème de graphique type camembert avec légende

Message par weado » 26 nov. 2018, 22:28

Pour le moment, tout fonctionne bien ! Petite question : Dans la seconde partie de ton code, tu gères des updateplus et updatemoins, c'est la gestion des mises à jour des valeurs sans avoir à recharger la page ?

eeBud
Timide
Messages : 381
Inscription : 28 mars 2016, 23:22
Localisation : Nancy

Re: Problème de graphique type camembert avec légende

Message par eeBud » 27 nov. 2018, 06:37

Updateplus et update moins ce sont les "animations" sur l'affichage de la valeur. Tu as remarqué, elle n'est pas fixe, mais passe de 0 à ta valeur en l'espace d'une seconde.
Par contre je n'ai pas testé le Widget sur des températures... Mais que sur des puissances de chauffage.

calagan57
Timide
Messages : 43
Inscription : 03 févr. 2019, 13:29

Re: Problème de graphique type camembert avec légende

Message par calagan57 » 06 mars 2019, 20:39

Hello à tous!

je m'incruste dans ce topic car je cherche à faire de beau graphique à l'aide de highcharts pour monitorer mes capteurs de consommations d'énergie électriques...

j'essaye tant bien que mal de comprendre où allez chercher mes datas et où ils sont saisis dans le code. Si je prends un des exemples du topic c'est ici qu'il faut renseigner la donnée?On met la valeur de l'ID?

Code : Tout sélectionner

var piscine;
  	jeedom.cmd.execute({ id: '10234',
Moi je suis un peu paumé car je ne sais pas quel ID je dois saisir...? (voir entouré en rouge ) :oops:
Image

Ensuite toujours dans le code ci-dessus la var "piscine" c'est le nom de l'ID (si oui ou se trouve t'elle dans jeedom) ou alors on peut rentrer le nom que la veut?

Désolé pour toute ces questions de noob mais j'suis perdu en programmation...

Merci!

benj29
Actif
Messages : 3936
Inscription : 26 mars 2017, 09:57
Contact :

Re: Problème de graphique type camembert avec légende

Message par benj29 » 06 mars 2019, 21:27

Pour moi, c'est 155.
Le nom c'est la variable propre au code donc tu pourrais mettre "jaimepasjeedom0" c'est le même tarif.
j'avais pris un peu le temps d'expliquer le code sur mon blog dans l'article sur le design (voir signature).

calagan57
Timide
Messages : 43
Inscription : 03 févr. 2019, 13:29

Re: Problème de graphique type camembert avec légende

Message par calagan57 » 07 mars 2019, 08:52

benj29 a écrit :
06 mars 2019, 21:27
Pour moi, c'est 155.
Le nom c'est la variable propre au code donc tu pourrais mettre "jaimepasjeedom0" c'est le même tarif.
j'avais pris un peu le temps d'expliquer le code sur mon blog dans l'article sur le design (voir signature).

Merci à toi pour les infos ;)
Donc tu parles de cet extrait?
Un dernier pour la fin, grâce à un membre du forum, merci à lui. Mettre en forme des graphiques type camembert. Il convient de modifier alors le code “color” (voir lien pour le choix de la couleur plus haut), d’avoir le même champ “Name” (que le var dans le premier bloc) et l’ID Jeedom de l’information que vous voulez grapher :

id consommation-piscine donne id: ‘10234’ ;
variable var piscine correspondante ;
dans la partie data donne name : ‘Piscine’ mais surtout le champ Y qui est la variable var piscine précédente ;
et qui sera affiché avec la couleur #408080.

Code : Tout sélectionner

<div id="container" style="min-width: 150px; height: 150px;"></div>
<script>

    var piscine;
    jeedom.cmd.execute({ id: '10234',
          success:  function(resultat) {   
            piscine = parseFloat(resultat);
        }
  });
    var chauffage;
    jeedom.cmd.execute({ id: '10235',
          success:  function(resultat) {   
            chauffage = parseFloat(resultat);
        }
  });
    var ecs;
    jeedom.cmd.execute({ id: '10236',
          success:  function(resultat) {   
            ecs = parseFloat(resultat);
        }
  });
    var onduleur;
    jeedom.cmd.execute({ id: '10245',
          success:  function(resultat) {   
            onduleur = parseFloat(resultat);
        }
  });
  var autres;
    jeedom.cmd.execute({ id: '10237',
          success:  function(resultat) {   
            autres = parseFloat(resultat);
        }
  });
    
    
    
  setTimeout(graph, 5000); 
  function graph(){
  Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Répartition de la veille'
    },
    tooltip: {
        pointFormat: '{series.name}<b>{point.y}€ soit: {point.percentage:.1f}%</b><b></b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    credits: {
        enabled: false
    },
    navigation: {
        buttonOptions: {
            enabled: false
        }
    },
    
    series: [{
          type: 'pie',
          name: ' ',
          size: '100%',
        data: [{
            name: 'Piscine',
            y: piscine,
            color: '#408080'       
          }, {
            name: 'Chauffage',
            y: chauffage,
            color: '#FF8080'
          }, {
            name: 'Eau Chaude',
            y: ecs,
            color: '#0080FF'
          }, {
            name: 'Onduleur',
            y: onduleur,
            color: '#FFFF80'
          }, {
            name: 'Autres',
            y: autres,
            color: '#FF9900'
          }
        ]
    }]
  });
  
}
      
 
</script>
Je supprime simplement les extraits de code en trop (je ne dois que monitorer production et consommation d'énergie), je change l'ID correspondant aussi biensur. J'ai bon?

Merci à toi (et aux autres)


calagan57
Timide
Messages : 43
Inscription : 03 févr. 2019, 13:29

Re: Problème de graphique type camembert avec légende

Message par calagan57 » 07 mars 2019, 09:11

Merci à toi je pense que je vais encore un peu t'embêter ces prochains jours :oops: j'essaye de décortiquer les programmations js pour faire de beaux graphique... j'y connais rien :oops:

ton blog est une mine d'info merci! :shock:

Un petit don paypal s'impose! :D


calagan57
Timide
Messages : 43
Inscription : 03 févr. 2019, 13:29

Re: Problème de graphique type camembert avec légende

Message par calagan57 » 07 mars 2019, 19:09

Hello!

J'ai "réussi" à simplement rentrer mes données dans le programme donné plus haut:



Pouvez-vous me dire si j'ai à peut près compris/décortiqué le code

Code : Tout sélectionner

<div id="container" style="min-width: 500px; height: 500px;"></div><script>
On crée un "objet" nommé container de taille 500x500px

Code : Tout sélectionner

var puissance;
    jeedom.cmd.execute({ id: '155',
On crée une variable nommée "puissance" que le va chercher avec l'ID est son numéro
Question : c'est une valeur à l'instant où le graphe est généré c'est ça? Pas de rafraichissement possible? pas de valeur issue de l'historique?

Code : Tout sélectionner

 success:  function(resultat) {   
            puissance = parseFloat(resultat);

La j'ai pas vraiment tout compris...si quelqu'un veut bien me traduire? :oops:

Code : Tout sélectionner

setTimeout(graph, 1000); 
On attend 1sec avant génération du graphe

Code : Tout sélectionner

  function graph(){
  Highcharts.chart('container'
On appelle la fonction graph de highcharts dans l'objet container créé précédemment

Code : Tout sélectionner

    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
Ici ce sont les "propriétés" du graph que l'on veut. j'ai bien compris le type "pie"(=camembert) mais le reste je sèche...

Code : Tout sélectionner

title: {
        text: 'Test_premier_camembert'
Le titre du graphe! super j'suis trop fort!

Code : Tout sélectionner

tooltip: {
        pointFormat: '{series.name}<b>{point.y}€ soit: {point.percentage:.1f}%</b><b></b>'
    },
La ça à l'air d'être les propriétés de la fenêtre qui apparait quand on survole une partie du camembert

Code : Tout sélectionner

plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
là je suis un peu perdu ça à l'air d'être les propriétés du graphe.... un peu plus d'explication svp? :oops:

Code : Tout sélectionner

credits: {
        enabled: false
    },
ça n'a pas l'air très important :D

Code : Tout sélectionner

navigation: {
        buttonOptions: {
            enabled: false
là je ne sais pas trop ce que ça veut dire...

Code : Tout sélectionner

 series: [{
          type: 'pie',
          name: ' ',
          size: '100%',
        data: [{
            name: 'puissance',
            y: puissance,
            color: '#408080'     
la ce sont les propriétés des morceaux de camembert, j'ai pas tout compris mais je pense savoir quoi remplir...

Voilà je me donne du mal pour comprendre mais n'ayant AUCUNE connaissance en programmation java ou autre (à part arduino) j'ai beaucoup de mal...

Je n'arrive pas à comprendre quand, où et comment les valeurs vont être actualisées? Commenet lui dire "prends la valeur totale de la veille" par exemple....

Merci à vous pour votre aide!

benj29
Actif
Messages : 3936
Inscription : 26 mars 2017, 09:57
Contact :

Re: Problème de graphique type camembert avec légende

Message par benj29 » 07 mars 2019, 19:39

1) c'est énergie en toute rigueur et non puissance car wh.
Donc c'est une fonction qui calcule ta puissance sur la journée (depuis minuit).
Si tu n'es pas à l'aise en électricité/énergie le plugin Energie ou Suivi conso le fait, sinon je te renvoie à un scénario avec somme de puissance par minutes (calcul de l'aire pour avoir l'énergie) ; ce que je fais. Je n'aurai pas le temps matériel pour t'expliquer tout en détails en ce moment.

2) conversion en float (conversion de type)

3) ce sont des paramètres de la classe chart (un peu de recherche sur le net)

4) idem (on va sauter hein... c'est bien beau de tout vouloir savoir).

5)

Code : Tout sélectionner

series: [{
          type: 'pie',
          name: ' ',
          size: '100%',
        data: [{
            name: 'puissance',
            y: puissance,
            color: '#408080' 
tu fais une série (une zone de données) d'un camembert sans nom, taille 100 avec comme donnée nommée puissance, qui utilise le y (celui défini au début de ton code) puissance (mettre le même nom qu'en haut) et avec la couleur (code hexa).

calagan57
Timide
Messages : 43
Inscription : 03 févr. 2019, 13:29

Re: Problème de graphique type camembert avec légende

Message par calagan57 » 07 mars 2019, 19:49

GRAND merci à toi pour les réponses! ;)

En fait tu vas rire mais je suis électricien :mrgreen: .
Sauf erreur de ma part la valeur que je récupère dans ID155 c'est une puissance active instantanée calculée avec le produit U*I (calcul effectué par l'arduino) ramené en mqtt à jeedom toute les 10s.

Si je comprends la valeur affichée dans le camembert n'est pas simplement la valeur de l'ID mais il y a un calcul qui est appliqué? si oui, on trouve où ce calcul? dans le code?

Enfin si je devais apprendre ce type de codage/programmation il faudrait que je m'oriente sur quel langage? (que je cherche des tuto/formation sur le net)

Encore merci à toi et pour ta patience ;)

benj29
Actif
Messages : 3936
Inscription : 26 mars 2017, 09:57
Contact :

Re: Problème de graphique type camembert avec légende

Message par benj29 » 07 mars 2019, 21:03

Il te faut utiliser suivi conso ou énergie en plugin.
Sinon tu sommes 6 fois par heure en scénario tes points 10min.

Javascript et html.

Envoyé de mon JSN-L21 en utilisant Tapatalk



winhex
Actif
Messages : 3743
Inscription : 23 janv. 2015, 01:41

Re: Problème de graphique type camembert avec légende

Message par winhex » 08 mars 2019, 00:56

highchart à une api
https://api.highcharts.com/highcharts/credits.text
prenons credits
clic sur credits disable
a la place de false dans le code
tu changes par true
tu clic sur run
et tu vois en bas à droite highcharts.com

tu veux faire un camembert ?
ta recherche était plutot sur historique

viewtopic.php?f=50&t=1182&p=578659&hili ... ry#p578659
viewtopic.php?f=50&t=1182&start=1220#p621788

maintenant tu veux voir sur ton design un brut de brut
html dans design et colle (par sécurité fait un backup avant)
jeedom_graph.png
jeedom_graph.png (32.55 Kio) Consulté 227 fois

Code : Tout sélectionner

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
  
Highcharts.chart('container', {
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Average Monthly Temperature and Rainfall in Tokyo'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        crosshair: true
    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}°C',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'Temperature',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // Secondary yAxis
        title: {
            text: 'Rainfall',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} mm',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true
    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 120,
        verticalAlign: 'top',
        y: 100,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    series: [{
        name: 'Rainfall',
        type: 'column',
        yAxis: 1,
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        tooltip: {
            valueSuffix: ' mm'
        }

    }, {
        name: 'Temperature',
        type: 'spline',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
        tooltip: {
            valueSuffix: '°C'
        }
    }]
});
  
</script>
Tu peux partir sur celui là
https://www.highcharts.com/demo/column- ... dark-unica
Et avec codepen en mini -5

Répondre

Revenir vers « Portail web classique (Desktop) »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité