Problème de graphique type camembert avec légende
Re: Problème de graphique type camembert avec légende
OK, merci ! Je me doutais que c'était ça !
Envoyé de mon JSN-L21 en utilisant Tapatalk
Envoyé de mon JSN-L21 en utilisant Tapatalk
Re: Problème de graphique type camembert avec légende
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 ?
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 ?
Re: Problème de graphique type camembert avec légende
Je vais en faire quelques uns que je vais mettre dans le market widgets. Dont celui là.
Re: Problème de graphique type camembert avec légende
Cool. Merci bien et hâte de voir le résultat !
Envoyé de mon SM-G950F en utilisant Tapatalk
Envoyé de mon SM-G950F en utilisant Tapatalk
Re: Problème de graphique type camembert avec légende
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.
Espérant avoir satisfait tes attentes!
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.
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>
Re: Problème de graphique type camembert avec légende
Dans le même genre:
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>
Re: Problème de graphique type camembert avec légende
J'ai aussi fais ça que j'utilise également:
Voila pour ce soir!
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>
Re: Problème de graphique type camembert avec légende
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
Envoyé de mon JSN-L21 en utilisant Tapatalk
Re: Problème de graphique type camembert avec légende
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
Envoyé de mon SM-G950F en utilisant Tapatalk
Re: Problème de graphique type camembert avec légende
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
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
Re: Problème de graphique type camembert avec légende
Les deux c'est encore mieux
Envoyé de mon SM-G950F en utilisant Tapatalk
Envoyé de mon SM-G950F en utilisant Tapatalk
Re: Problème de graphique type camembert avec légende
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 : Trop à gauche : Parfait, mais je n'y arrive pas avec HighChart : 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.
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 : Trop à gauche : Parfait, mais je n'y arrive pas avec HighChart : 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.
Re: Problème de graphique type camembert avec légende
Je ne comprends pas du tout ce que tu veux faire en fait....
Re: Problème de graphique type camembert avec légende
Ah, OK, centrer la valeur... Crées un div ?
Re: Problème de graphique type camembert avec légende
Oui, mais je peux pas ajouter un div sur un graph Highschart... ou je me trompe.
Re: Problème de graphique type camembert avec légende
avec un style en position relative tu peux le mettre partout
c'est dans les 1er ligne html
ça se mettra par dessus
c'est dans les 1er ligne html
ça se mettra par dessus
Re: Problème de graphique type camembert avec légende
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
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
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité