J’ai réussi à faire ce que je voulais, pour le moment c’est un graphique assez basique mais je vais le mettre à jours au fur et à mesure de mon travaille ![]()
Maintenant il ne me reste plus qu’à personnaliser le HighCharts
(Si vous voyez des amélioration possible nécessité pas )
Et voici mon code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="“UTF-8”" />
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script>
var date=[]; // Liste des catégories qui sont ici des dates
var dateFin = new Date(); // Date d'aujourd'hui non formaté
var dateDebut = formattedDateForCode(new Date(new Date().setDate(dateFin.getDate()-30))); // Date d'il y a 30 jours
dateFin = formattedDateForCode(dateFin); // // Date d'aujourd'hui formaté
function formattedDate(d = new Date) { // formate une date pour son affichage
let hours = String(d.getHours());
let minutes = String(d.getMinutes());
let month = String(d.getMonth() + 1);
let day = String(d.getDate());
let year = String(d.getFullYear());
if (minutes.length < 2) minutes = '0' + minutes;
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return `${hours}h ${minutes} - ${day}/${month}/${year}`;
}
function formattedDateForCode(d = new Date) { // formate une date pour l'utiliser dans "jeedom.history.get"
let month = String(d.getMonth() + 1);
let day = String(d.getDate());
let year = String(d.getFullYear());
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return `${year}-${month}-${day}`;
}
var chart = new Highcharts.chart('container', {
chart: {
zoomType: 'x' // Permet de zommer sur le graphique
},
title: {
text: 'Température du frigo'
},
subtitle: {
text: '30 derniers jours'
},
yAxis: {
title: {
text: " Température en °C"
}
},
xAxis: {
accessibility: {
categories: date,
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
//pointStart: 2020
}
},
series: [
{
name: "Temperature",
data: [], //On ajoute à cette liste les données du capteur de température
tooltip: {
valueSuffix: ' °C'
}
}
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
console.log("ajout des données ..");
jeedom.history.get ({
cmd_id: 1434, //id de la commande historisé (capteur de température)
dateStart: dateDebut,
dateEnd: dateFin,
success: function(result) {
for(let i = 0; i<result.data.length; i++){
chart.series[0].addPoint(result.data[i][1], false) // false permet de ne pas redesiner chart à chaque fois qu'on rajoute un point, et donc gagner enormement en performance
date.push(formattedDate(new Date(result.data[i][0])))
}
chart.redraw(); // On dessine les donnée une fois les avoirs ajouté
chart.xAxis[0].setCategories(date); // Et on ajoute les catégorie (ici des dates)
}
})
</script>
</body>
</html>
