Problème de graphique type camembert avec légende

[benj29]

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

Envoyé de mon JSN-L21 en utilisant Tapatalk

[benj29]

Thanks to U .

[eeBud]

Joli ! Dr !

[weado]

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 (5.64 Kio) Consulté 1435 fois

[eeBud]

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

[weado]

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

Envoyé de mon SM-G950F en utilisant Tapatalk

[eeBud]

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 (3.3 Kio) Consulté 1419 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]

Dans le même genre:

SolidGaugeRonde.png (3.04 Kio) Consulté 1412 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]

J'ai aussi fais ça que j'utilise également:

LineaireHorizontal.png (26.01 Kio) Consulté 1411 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]

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]

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]

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]

Les deux c'est encore mieux

Envoyé de mon SM-G950F en utilisant Tapatalk

[benj29]

Envoyé de mon JSN-L21 en utilisant Tapatalk

[weado]

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 (2.79 Kio) Consulté 1370 fois

Trop à gauche :

Capture1.PNG (2.59 Kio) Consulté 1370 fois

Parfait, mais je n'y arrive pas avec HighChart :

Capture3.PNG (2.04 Kio) Consulté 1370 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]

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

[eeBud]

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

[weado]

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

[winhex]

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

[weado]

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