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 : 2459
Inscription : 26 mars 2017, 09:57

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 : 339
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 : 142
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é 52 fois

eeBud
Timide
Messages : 339
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 : 142
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 : 339
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é 36 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 : 339
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é 29 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 : 339
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é 28 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 : 2459
Inscription : 26 mars 2017, 09:57

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 : 142
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 : 2459
Inscription : 26 mars 2017, 09:57

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


benj29
Actif
Messages : 2459
Inscription : 26 mars 2017, 09:57

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

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



Envoyé de mon JSN-L21 en utilisant Tapatalk


Répondre

Revenir vers « Portail web classique (Desktop) »

Qui est en ligne ?

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