Créer un graphique HP/HC + Prix avec htmldisplay dans Jeedom [Memo du geek]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Créer un graphique HP/HC + Prix avec htmldisplay dans Jeedom ======

J'avais besoin d'ajouter un graphique de ma conso électrique sur mon design Jeedom. J'ai utilisé le plugin **htmldisplay** pour créer mon graphique. Ce graphique combine la consommation en **Heures Pleines (HP)** et **Heures Creuses (HC)** en kWh, ainsi que le **prix associé** en €, sur une période de 7 jours.
Je récupère ces information via l'excellent plugin **Suivi Conso**.

===== 1) Prérequis =====

Vous aurez besoin de :
  * Plugin **htmldisplay** installé et activé.
  * Plugin **Suivi Conso** installé et activé pour récupérer
    * **Heures Pleines (HP)** (ex: cmd_id **1800**)
    * **Heures Creuses (HC)** (ex: cmd_id **1801**)
    * **Prix** (ex: cmd_id **1832**)

Pour ces 3 commandes, vous devez configurer l'historique comme suit : 

{{.:pasted:20260711-115625.png}}

Si vous voulez faire un graphique sur une période différente, la consommation hebdomadaire par exemple, il faudra configurer le paramètre d'affichage sur **Maximum par semaine**. Même principe si vous voulez créer un graphique de la consommation mensuelle ou annuelle.

===== 2) Création de l’équipement htmldisplay =====

==== Étape 1 : Ajouter un équipement ====
  1. Allez dans **Plugins → Programmation → htmldisplay**.
  2. Cliquez sur **Ajouter**.
  3. Donnez-lui un nom explicite (ex: **"Graphique Conso HP/HC"**).
  4. Associez-le à un objet parent (ex: **"Énergie"**).

==== Étape 2 : Configurer le code HTML ====
Dans l’onglet **"Affichage"**, collez le code ci-dessous dans le champ **"Code HTML"**. C'est une IA qui a pondu le code.
**Remplacez les numéros de commande après **cmd_id** pour coller aux vôtres.

<code html>
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
</head>

<body>

<div id="container_#id#" style="height:460px;"></div>

<style>
.highcharts-title {
    font-size: 22px !important;
}
.highcharts-xaxis-labels text,
.highcharts-yaxis-labels text {
    font-size: 20px !important;
}
.highcharts-axis-title {
    font-size: 20px !important;
}
.highcharts-tooltip text {
    font-size: 20px !important;
}
.highcharts-legend-item text {
    font-size: 20px !important;
}
</style>

<script>
// Date du jour au format YYYY-MM-DD
function getTodayDate() {
  const d = new Date();
  return d.toISOString().split('T')[0];
}

// Date X jours avant aujourd'hui
function getDateMinusDays(days) {
  const d = new Date();
  d.setDate(d.getDate() - days);
  return d.toISOString().split('T')[0];
}

// Initialisation auto
setTimeout(() => {
  chargerDonnees_#id#();
}, 100);

function chargerDonnees_#id#() {
  console.log("Chargement des données…");

  const dateEndStr = getTodayDate();
  const dateStartStr = getDateMinusDays(6);

  let timestamps = [];
  let hp_jour = [];     // Heures Pleines (kWh)
  let hc_jour = [];     // Heures Creuses (kWh)
  let price_jour = [];  // Prix (€)
  let chargements = 0;

  function essayerAfficherGraphique_#id#() {
    if (chargements < 3) return;

    // On suppose que les séries partagent les mêmes dates et le même ordre
    const hp_series   = timestamps.map((ts, i) => [ts, hp_jour[i]]);
    const hc_series   = timestamps.map((ts, i) => [ts, hc_jour[i]]);
    const price_series= timestamps.map((ts, i) => [ts, price_jour[i]]);

    Highcharts.chart('container_#id#', {
      chart: { type: 'column' },
      title: { text: 'Consommation HP/HC et prix (7 derniers jours)', align: 'left' },

      xAxis: {
        type: 'datetime',
        labels: { format: '{value:%e %b}' }
      },

      yAxis: [{
        // Axe gauche : kWh
        min: 0,
        title: { text: 'Énergie (kWh)' }
      }, {
        // Axe droit : € (le prix reste en colonne comme avant)
        min: 0,
        title: { text: 'Prix (€)' },
        opposite: true
      }],

      tooltip: {
        xDateFormat: '%A %e %B %Y',
        shared: true
      },

      plotOptions: {
        column: {
          grouping: true,      // conserve la barre prix à côté
          stacking: 'normal'   // HP + HC empilés
        }
      },

      series: [
        {
          name: 'Heures pleines (kWh)',
          data: hp_series,
          color: '#0052cc', // bleu soutenu
          yAxis: 0,
          stack: 'conso'    // même pile que HC
        },
        {
          name: 'Heures creuses (kWh)',
          data: hc_series,
          color: '#66a3ff', // bleu clair
          yAxis: 0,
          stack: 'conso'
        },
        {
          name: 'Prix (€)',
          data: price_series,
          color: '#00aa00',
          yAxis: 1
          // type laissé à 'column' via chart.type pour rester conforme à "comme actuellement"
        }
      ]
    });
  }

  // 1) Heures pleines kWh (cmd 1800)
  jeedom.history.get({
    cmd_id: 1800,
    dateStart: dateStartStr,
    dateEnd: dateEndStr,
    success: function (result) {
      console.log("HP Jeedom :", result.data);

      timestamps = [];
      hp_jour = [];

      for (let i = 0; i < result.data.length; i++) {
        const d = new Date(result.data[i][0]);
        timestamps.push(d.getTime());
        hp_jour.push(result.data[i][1]); // kWh
      }

      chargements++;
      essayerAfficherGraphique_#id#();
    }
  });

  // 2) Heures creuses kWh (cmd 1801)
  jeedom.history.get({
    cmd_id: 1801,
    dateStart: dateStartStr,
    dateEnd: dateEndStr,
    success: function (result) {
      console.log("HC Jeedom :", result.data);

      hc_jour = [];

      for (let i = 0; i < result.data.length; i++) {
        hc_jour.push(result.data[i][1]); // kWh
      }

      chargements++;
      essayerAfficherGraphique_#id#();
    }
  });

  // 3) Prix € (cmd 1832)
  jeedom.history.get({
    cmd_id: 1832,
    dateStart: dateStartStr,
    dateEnd: dateEndStr,
    success: function (result) {
      console.log("Prix Jeedom :", result.data);

      price_jour = [];

      for (let i = 0; i < result.data.length; i++) {
        price_jour.push(result.data[i][1]); // €
      }

      chargements++;
      essayerAfficherGraphique_#id#();
    }
  });
}
</script>

</body>
</html>
</code>