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.

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 :

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.

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"**).

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>

Vous pourriez laisser un commentaire si vous étiez connecté.

Créer un graphique HP/HC + Prix avec htmldisplay dans Jeedom

1) Prérequis

2) Création de l’équipement htmldisplay

Étape 1 : Ajouter un équipement

Étape 2 : Configurer le code HTML

Memo du geek