Table des matières

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 :

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

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. 

<!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>