Problème de graphique type camembert avec légende

[eeBud]

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 (1.73 Kio) Consulté 320 fois

[weado]

Sympa. merci

[Djal94]

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.

[weado]

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 (2.97 Kio) Consulté 295 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]

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 ?

[Djal94]

Tu peux partager le code du dernier stp?

[eeBud]

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]

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]

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]

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 )


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]

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]

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)

[benj29]

Yep!

Envoyé de mon JSN-L21 en utilisant Tapatalk

[calagan57]

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

ton blog est une mine d'info merci!

Un petit don paypal s'impose!

[benj29]

Merci

Envoyé de mon JSN-L21 en utilisant Tapatalk

[calagan57]

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?

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?

Code : Tout sélectionner

credits: {
        enabled: false
    },

ça n'a pas l'air très important

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]

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]

GRAND merci à toi pour les réponses!

En fait tu vas rire mais je suis électricien .
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]

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]

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 (32.55 Kio) Consulté 87 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