si si, si tu veut celui-ci est assez simple comme point de départ :
CODE
<div class="Doc-#id# cmd tooltips cmd-widget #history# widget-JaugeAz " title="" data-type="info" data-subtype="numeric" data-template="JaugeHAz" data-cmd_id="#id#" >
<div id="JaugeAz#id#" style="width: 150px; height: 150px;"></div>
<script>
// file : /data/customTemplates/dashboard/cmd.info.numeric.JaugeAz.html
// Olive 2020-02-06
// OPTIONS :
// aiguille couleur
// centre couleur
var chart#id#;
chart#id# = new Highcharts.Chart({
chart: {
renderTo: 'JaugeAz#id#',
type: 'gauge',
backgroundColor: 'transparent',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
spacingBottom: 0
},
title: {
text: null
},
credits: {
enabled: false
},
pane: {
startAngle: 0,
endAngle: 360,
background: null
},
exporting : {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: false
}
},
gauge: {
dial: {
backgroundColor: '#aiguille#'
},
pivot: {
backgroundColor: '#centre#'
}
}
},
yAxis: {
min: 0,
max: 360,
tickWidth: 2,
tickLength: 10,
tickInterval: 45,
lineWidth: 1,
labels: {
distance: -16,
formatter: function () {
if (this.value == 360) {
return '<span style="font-weight:bold;">Nord</span>';
} else if (this.value == 90) {
return '<span style="font-weight:bold;">E</span>';
} else if (this.value == 180) {
return '<span style="font-weight:bold;">S</span>';
} else if (this.value == 270) {
return '<span style="font-weight:bold;">O</span>';
}
}
},
title: {
text: '#unite#'
}
},
series: [{
name: '',
data: [0]
}]
});
jeedom.cmd.update['#id#'] = function(_options){
var valeur = parseFloat(_options.display_value);
var valeur2 = _options.collectDate;
chart#id#.series[0].data[0].update(valeur);
chart#id#.setTitle({ text: valeur, style: {
color: 'green',
fontSize: '12px'
}, y:80});
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});
</script>
</div>
