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 :)

Toute la communauté vous remercie

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
benj29
Actif
Messages : 3485
Inscription : 26 mars 2017, 09:57
Contact :

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

Message par benj29 » 08 nov. 2018, 21:06

OK, merci ! Je me doutais que c'était ça !

Envoyé de mon JSN-L21 en utilisant Tapatalk



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

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

Message par eeBud » 08 nov. 2018, 21:58

Joli ! Dr !

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

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

Message par weado » 15 nov. 2018, 15:14

Génial le petit camembert. Je vais vite le mettre à ma sauce et l'adopter.

Sais-tu si on peut supprimer les "options" en haut à droite du graph ?
--> Edit : exporting: {enabled: false}, ;)

Petite question qui me tarode, car j'essaie depuis quelques de faire un cercle du même type, pour afficher ma température extérieur avec des formes plus jolis que la "gauge" de base dans Jeedom avec une variation de couleur comme je le fais déjà avec le "semi circle" d'highchart...

Je me suis appuyer sur un widget, qui ne convient pas forcement, car c'est beaucoup de bidouille pour essayer d'obtenir quelque chose. Penses-tu que l'on peut obtenir quelque chose comme cela en utilisant le modèle de hightchart que tu utilises dans ton camembert ?
Capture.PNG
Capture.PNG (5.64 Kio) Consulté 285 fois

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

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

Message par eeBud » 15 nov. 2018, 18:27

Je vais en faire quelques uns que je vais mettre dans le market widgets. Dont celui là.

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

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

Message par weado » 15 nov. 2018, 19:16

Cool. Merci bien et hâte de voir le résultat !

Envoyé de mon SM-G950F en utilisant Tapatalk


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

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

Message par eeBud » 15 nov. 2018, 19:37

Bon, je n'arrive pas à publier sur le store, il faut s'inscrire et tout, ce que j'ai fais, mais à mon avis, il faut une validation de Jeedom.
Donc, voilà...
Cadeau! ;)

Une petite gauge solide dont la couleur varie en fonction du pourcentage affiché.
Tu peux modifier les couleurs en début de script. J'ai créé les variables qui sont ensuite rappelées dans le code.
SolidGaugeRonde.png
SolidGaugeRonde.png (3.3 Kio) Consulté 269 fois

Code : Tout sélectionner

<div style="min-width:115px;min-height:200px; margin-top : 10px;padding:0px !important;" class="container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="Valeur du #valueDate#, collectée le #collectDate#" >
    <div style="width:115px;height : 200px;" class="gauge cursor #history#" data-cmd_id="#id#" ></div>

    <div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block" class="cmdStats">
        <span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
    </div>
    <script>
      		var Couleur_Fond = 'rgba(232, 131, 88, 0.2)';
		var Couleur_Min = '#55BF3B';
		var Couleur_Moy = '#DDDF0D';
		var Couleur_Max = '#DF5353';

       jeedom.cmd.update['#id#'] = function(_options){
           $('.cmd[data-cmd_uid=#uid#] .gauge').highcharts().series[0].points[0].update(_options.display_value);
       }
       
       if (is_numeric('#state#')) {
       $('.cmd[data-cmd_uid=#uid#] .gauge').empty().highcharts({
            chart: {
                events: {
                    click: function (event) {
                        if (!$.mobile && '#history#' == 'history cursor') {
                            $('#md_modal2').dialog({title: "Historique"});
                            $("#md_modal2").load('index.php?v=d&modal=cmd.history&id=#id#').dialog('open');
                        }
                    }
                },
                type: 'solidgauge',
                height : 200,
                marginTop: 50,
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                backgroundColor: null,
                plotBorderWidth: 0,
                plotShadow: false
                
            },
            title: null,
            pane: {
                startAngle: 0,
                endAngle: 360,
                background: {
                    backgroundColor: Couleur_Fond,
                    innerRadius: '80%',
                    outerRadius: '100%',
                    borderWidth: 0,
        			shape: 'arc'
                }
            },
            tooltip: {
                enabled: false
            },
                yAxis: {
                    stops: [
            			[0.1, Couleur_Min],
            			[0.5, Couleur_Moy],
            			[0.9, Couleur_Max]
        			],
                    lineWidth: 0,
                    minorTickInterval: null,
                    labels : {enabled: false},
                    tickWidth: 0,
                    title: {
                        y: - 70
                    },
                    min: #minValue#,
                    max: #maxValue#,
                    title: {
                        text: '<span style="color: white;font-weight: bold;font-family : Helvetica Neue,Helvetica,Arial,sans-serif;#hideCmdName#">#name_display#</span>',
                        y: -35
                    }
                },
                labels : {enabled: false},
                plotOptions: {
                    solidgauge: {
                        linecap: 'round',
            			stickyTracking: false,
            			rounded: true,
                        innerRadius: '80%', 
                        dataLabels: {
                            y: -10,
                            borderWidth: 0,
                            useHTML: true
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                exporting : {
                    enabled: false
                },
                series: [{
                    //innerSize: '60%',
                    //linecap: 'round',
                    name: '',
                    data: [Math.round(parseFloat('#state#') * 10) / 10],
                    dataLabels: {
                        format: '<span style="font-size:14px;color : white;">{y}</span> <span style="font-size:14px;color:white">#unite#</span>'
                    },
                }]
            });
    } else {
        $('.cmd[data-cmd_uid=#uid#] .gauge').append('<center><span class="label label-danger" style="margin-top : 5px;">#state#</span></center>');
    }
</script>

</div>
Espérant avoir satisfait tes attentes! ;)

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

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

Message par eeBud » 15 nov. 2018, 21:18

Dans le même genre:
SolidGaugeRonde.png
SolidGaugeRonde.png (3.04 Kio) Consulté 262 fois

Code : Tout sélectionner

<div style="min-width:115px;min-height:200px; margin-top : 10px;padding:0px !important;" class="container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="Valeur du #valueDate#, collectée le #collectDate#" >
    <div style="width:115px;height : 200px;" class="gauge cursor #history#" data-cmd_id="#id#" ></div>

    <div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block" class="cmdStats">
        <span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
    </div>
    <script>
      	var Couleur_Fond = 'rgba(232, 131, 88, 0.2)';
		var Couleur_Min = '#55BF3B';
		var Couleur_Moy = '#DDDF0D';
		var Couleur_Max = '#DF5353';

       jeedom.cmd.update['#id#'] = function(_options){
           $('.cmd[data-cmd_uid=#uid#] .gauge').highcharts().series[0].points[0].update(_options.display_value);
       }
       
       if (is_numeric('#state#')) {
       $('.cmd[data-cmd_uid=#uid#] .gauge').empty().highcharts({
            chart: {
                events: {
                    click: function (event) {
                        if (!$.mobile && '#history#' == 'history cursor') {
                            $('#md_modal2').dialog({title: "Historique"});
                            $("#md_modal2").load('index.php?v=d&modal=cmd.history&id=#id#').dialog('open');
                        }
                    }
                },
                type: 'solidgauge',
                height : 200,
                marginTop: 50,
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                backgroundColor: null,
                plotBorderWidth: 0,
                plotShadow: false
                
            },
            title: null,
            pane: {
                startAngle: -140,
                endAngle: 140,
                background: {
                    backgroundColor: Couleur_Fond,
                    innerRadius: '80%',
                    outerRadius: '100%',
                    borderWidth: 0,
        			shape: 'arc'
                }
            },
            tooltip: {
                enabled: false
            },
                yAxis: {
                    stops: [
            			[0.1, Couleur_Min],
            			[0.5, Couleur_Moy],
            			[0.9, Couleur_Max]
        			],
                    lineWidth: 0,
                    minorTickInterval: null,
                    labels : {enabled: false},
                    tickWidth: 0,
                    title: {
                        y: - 70
                    },
                    min: #minValue#,
                    max: #maxValue#,
                    title: {
                        text: '<span style="color: white;font-weight: bold;font-family : Helvetica Neue,Helvetica,Arial,sans-serif;#hideCmdName#">#name_display#</span>',
                        y: -35
                    }
                },
                labels : {enabled: false},
                plotOptions: {
                    solidgauge: {
                        linecap: 'round',
            			stickyTracking: false,
            			rounded: true,
                        innerRadius: '80%', 
                        dataLabels: {
                            y: -10,
                            borderWidth: 0,
                            useHTML: true
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                exporting : {
                    enabled: false
                },
                series: [{
                    //innerSize: '60%',
                    //linecap: 'round',
                    name: '',
                    data: [Math.round(parseFloat('#state#') * 10) / 10],
                    dataLabels: {
                        format: '<span style="font-size:14px;color : white;">{y}</span> <span style="font-size:14px;color:white">#unite#</span>'
                    },
                }]
            });
    } else {
        $('.cmd[data-cmd_uid=#uid#] .gauge').append('<center><span class="label label-danger" style="margin-top : 5px;">#state#</span></center>');
    }
</script>

</div>

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

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

Message par eeBud » 15 nov. 2018, 21:28

J'ai aussi fais ça que j'utilise également:
LineaireHorizontal.png
LineaireHorizontal.png (26.01 Kio) Consulté 261 fois

Code : Tout sélectionner

<div style="width:340px;height:35px;border-radius: 0px;" class="container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="Valeur du #valueDate#, collectée le #collectDate#" >
    
  <div style="position: relative; top : -5px; left : -25px;width:340px;height : 20px;" class="gauge cursor #history#" data-cmd_id="#id#" ></div>
    <div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block" class="cmdStats">
        <span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
    </div>
    <script>
        jeedom.cmd.update['#id#'] = function(_options){
            $('.cmd[data-cmd_uid=#uid#] .gauge').highcharts().series[0].points[0].update(_options.display_value);
        }
       
        if (is_numeric('#state#')) {
            $('.cmd[data-cmd_uid=#uid#] .gauge').empty().highcharts({
                chart: {
                    type: 'bar',
                    height : 50,
                    width : 350,
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    backgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    borderWidth : null
                },
                title: null,
                yAxis: {
                    visible: false,
                  	gridLineWidth: 0,
                    stops: [
                    [0, '#cmdColor#']
                    ],
                    lineWidth: 0,
                    minorTickInterval: null,
                    tickPixelInterval: 40,
                    labels : {enabled: false},
                    tickWidth: 0,
                    min: #minValue#,
                    max: #maxValue#,
                    title: {
                        text: ' ',
                        x: 5
                    }
                },
                
                xAxis: {
                    visible: false,
                  	categories: [
            		''],
                    tickWidth:0,
                    gridLineWidth: 0,
                    title: {
                        text: '',
                        y: 0
                    },
                    labels: {
                        enabled: false
                    }
                },
                credits: {
                    enabled: false
                },
                exporting : {
                    enabled: false
                },
                legend : {
                    enabled: false
                },
                plotOptions: {
            		series: {
                		pointWidth: 70,
                        marker: { 
       						enabled: false, 
       						states: { 
        						hover: { 
         							enabled: false 
        						} 
       						} 
      					} 
            		}
        		},
                colors: [
                	'#01DFD7'
                ],
                tooltip: {
        			pointFormat: '<span style="font-size:14px;color : white;">#name_display#</span>'
    			},                                                    
                series: [{
                    name: ' ',
                    borderRadius: 8,
                    borderColor: false,
                    data: [Math.round(parseFloat('#state#') * 10) / 10],
                    dataLabels: {
                        enabled: true,
                        rotation: 0,
                        color: '#FFFFFF',
                        align: 'center',
                        format: '<span style="font-size:14px;color : white;">#name_display# {y} </span> <span style="font-size:14px;color:white">#unite#</span>',
                        y: 0
                    }
                }]
            });
        } else {
            $('.cmd[data-cmd_uid=#uid#] .gauge').append('<center><span class="label label-danger" style="margin-top : 5px;">#state#</span></center>');
        }
</script>

</div>

Voila pour ce soir!

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

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

Message par benj29 » 15 nov. 2018, 21:40

Pas mal. Mais j'avoue que la vue instantanée des usages n'apporte pas grand chose je trouve.

Envoyé de mon JSN-L21 en utilisant Tapatalk


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

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

Message par weado » 15 nov. 2018, 23:38

Merci bien. Je regarde cela rapidement et au contraire benj29, la vue instantanée permet d'un simple coup d'œil, sans même lire la valeur d'interpréter rapidement l'info. après tout est une histoire de goût et d'envie même si je n'aurais jamais rien a dire sur le super boulot que tu as fait et que tu fais.

Envoyé de mon SM-G950F en utilisant Tapatalk


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

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

Message par benj29 » 15 nov. 2018, 23:40

Peut être car je sais ce que représente des watts que je suis à l'aise avec un chiffre instantané.
Perso je préfère la courbe de charge qui contient toutes les infos de la journée !

Envoyé de mon JSN-L21 en utilisant Tapatalk


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

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

Message par weado » 15 nov. 2018, 23:41

Les deux c'est encore mieux ;-)

Envoyé de mon SM-G950F en utilisant Tapatalk



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

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

Message par weado » 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
Capture.PNG (2.79 Kio) Consulté 220 fois
Trop à gauche :
Capture1.PNG
Capture1.PNG (2.59 Kio) Consulté 220 fois
Parfait, mais je n'y arrive pas avec HighChart :
Capture3.PNG
Capture3.PNG (2.04 Kio) Consulté 220 fois
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.

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

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

Message par eeBud » 20 nov. 2018, 14:09

Je ne comprends pas du tout ce que tu veux faire en fait....

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

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

Message par eeBud » 20 nov. 2018, 14:10

Ah, OK, centrer la valeur... Crées un div ?

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

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

Message par weado » 20 nov. 2018, 14:33

Oui, mais je peux pas ajouter un div sur un graph Highschart... ou je me trompe.

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

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

Message par winhex » 20 nov. 2018, 15:54

avec un style en position relative tu peux le mettre partout
c'est dans les 1er ligne html
ça se mettra par dessus

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

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

Message par weado » 22 nov. 2018, 22:21

Bonsoir,
Je suis désolé, mais avec mon niveau de novice dans le développement, je n'ai pas réussi à avancer pour faire apparaître ma consommation au milieu de mon widget... Si vous avez une petite piste, cela m'aiderai bien.
Merci bien

Répondre

Revenir vers « Portail web classique (Desktop) »

Qui est en ligne ?

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