Comment utiliser Jsonrpc API pour récupérer l'historique d'un capteur et l'utiliser dans un design (texte/html) + créer un highchart avec?

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