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

Ceci est une ancienne révision du document !

Voici un tuto permettant d'afficher un graphique personnalisé dans Jeedom via le plugin htmldisplay, en utilisant la bibliothèque Highcharts. Ce graphique combinera 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 (modifiable).

Ce tuto va permettre de :

Visualiser la répartition HP/HC sous forme de colonnes empilées.
Afficher le prix sur un axe secondaire (à droite).
Récupérer automatiquement les données depuis l’historique Jeedom.

L'installation et la configuration du plugin htmldisplay ne seront pas détaillées ici. Vous devez avoir Highcharts accessible (via CDN ou hébergement local).

—

Vous aurez besoin de :

Plugin htmldisplay installé et activé.
3 commandes Jeedom configurées avec un historique valide :
- Heures Pleines (HP) (ex: cmd_id 1800)
- Heures Creuses (HC) (ex: cmd_id 1801)
- Prix (ex: cmd_id 1832)

—

1. Allez dans **Plugins → Protocole DOM → htmldisplay**.
2. Cliquez sur **"Ajouter un équipement"**.
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“. Remplacez `#id#` par un identifiant unique (ex: `graph_conso_7j`).

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <style>
    .highcharts-title { font-size: 22px !important; }
    .highcharts-xaxis-labels text,
    .highcharts-yaxis-labels text { font-size: 18px !important; }
    .highcharts-axis-title { font-size: 18px !important; }
    .highcharts-tooltip text { font-size: 16px !important; }
    .highcharts-legend-item text { font-size: 16px !important; }
  </style>
</head>
<body>
<div id="container_#id#" style="height:460px;"></div>
 
<script>
// ===== UTILITAIRES =====
function getTodayDate() {
  return new Date().toISOString().split('T')[0];
}
function getDateMinusDays(days) {
  const d = new Date(); d.setDate(d.getDate() - days);
  return d.toISOString().split('T')[0];
}
 
// ===== INITIALISATION =====
setTimeout(() => chargerDonnees_#id#(), 100);
 
function chargerDonnees_#id#() {
  const dateEnd = getTodayDate();
  const dateStart = getDateMinusDays(6); // 7 jours
  let timestamps = [], hp = [], hc = [], prix = [];
  let loaded = 0;
 
  function renderChart() {
    if (loaded < 3) return;
    Highcharts.chart('container_#id#', {
      chart: {
        type: 'column',
        backgroundColor: 'transparent'
      },
      title: {
        text: 'Consommation HP/HC et Prix (7 derniers jours)',
        align: 'left'
      },
      xAxis: {
        type: 'datetime',
        labels: { format: '{value:%e %b}' } // Ex: "11 juil."
      },
      yAxis: [{
        min: 0,
        title: { text: 'Énergie (kWh)' }
      }, {
        min: 0,
        title: { text: 'Prix (€)' },
        opposite: true
      }],
      tooltip: {
        xDateFormat: '%A %e %B %Y', // Ex: "vendredi 11 juillet 2026"
        shared: true
      },
      plotOptions: {
        column: {
          grouping: true,    // Regroupe les colonnes (HP, HC, Prix)
          stacking: 'normal' // Empile HP et HC
        }
      },
      series: [
        {
          name: 'Heures pleines (kWh)',
          data: timestamps.map((t, i) => [t, hp[i]]),
          color: '#0052cc',
          yAxis: 0,
          stack: 'conso'
        },
        {
          name: 'Heures creuses (kWh)',
          data: timestamps.map((t, i) => [t, hc[i]]),
          color: '#66a3ff',
          yAxis: 0,
          stack: 'conso'
        },
        {
          name: 'Prix (€)',
          data: timestamps.map((t, i) => [t, prix[i]]),
          color: '#00aa00',
          yAxis: 1
        }
      ],
      credits: { enabled: false }
    });
  }
 
  // ===== RÉCUPÉRATION DES DONNÉES JEEDOM =====
  // 1) Heures Pleines (kWh)
  jeedom.history.get({
    cmd_id: 1800,
    dateStart: dateStart,
    dateEnd: dateEnd,
    success: function(result) {
      timestamps = result.data.map(d => new Date(d[0]).getTime());
      hp = result.data.map(d => d[1]);
      loaded++;
      renderChart();
    }
  });
 
  // 2) Heures Creuses (kWh)
  jeedom.history.get({
    cmd_id: 1801,
    dateStart: dateStart,
    dateEnd: dateEnd,
    success: function(result) {
      hc = result.data.map(d => d[1]);
      loaded++;
      renderChart();
    }
  });
 
  // 3) Prix (€)
  jeedom.history.get({
    cmd_id: 1832,
    dateStart: dateStart,
    dateEnd: dateEnd,
    success: function(result) {
      prix = result.data.map(d => d[1]);
      loaded++;
      renderChart();
    }
  });
}
</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