domotique:creer_un_graphique_personnalise_avec_le_plugin_htmldisplay

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

domotique:creer_un_graphique_personnalise_avec_le_plugin_htmldisplay [2026/07/11 11:44] – créée fatedomotique:creer_un_graphique_personnalise_avec_le_plugin_htmldisplay [2026/07/11 12:06] (Version actuelle) – fate
Ligne 1: Ligne 1:
 ====== Créer un graphique HP/HC + Prix avec htmldisplay dans Jeedom ====== ====== Créer un graphique HP/HC + Prix avec htmldisplay dans Jeedom ======
  
-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). +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**.
-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). +
- +
----+
  
 ===== 1) Prérequis ===== ===== 1) Prérequis =====
Ligne 16: Ligne 8:
 Vous aurez besoin de : Vous aurez besoin de :
   * Plugin **htmldisplay** installé et activé.   * Plugin **htmldisplay** installé et activé.
-  * **3 commandes Jeedom** configurées avec un historique valide :+  * Plugin **Suivi Conso** installé et activé pour récupérer
     * **Heures Pleines (HP)** (ex: cmd_id **1800**)     * **Heures Pleines (HP)** (ex: cmd_id **1800**)
     * **Heures Creuses (HC)** (ex: cmd_id **1801**)     * **Heures Creuses (HC)** (ex: cmd_id **1801**)
     * **Prix** (ex: cmd_id **1832**)     * **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 ===== ===== 2) Création de l’équipement htmldisplay =====
  
 ==== Étape 1 : Ajouter un équipement ==== ==== Étape 1 : Ajouter un équipement ====
-  1. Allez dans **Plugins → Protocole DOM → htmldisplay**. +  1. Allez dans **Plugins → Programmation → htmldisplay**. 
-  2. Cliquez sur **"Ajouter un équipement"**.+  2. Cliquez sur **Ajouter**.
   3. Donnez-lui un nom explicite (ex: **"Graphique Conso HP/HC"**).   3. Donnez-lui un nom explicite (ex: **"Graphique Conso HP/HC"**).
   4. Associez-le à un objet parent (ex: **"Énergie"**).   4. Associez-le à un objet parent (ex: **"Énergie"**).
  
 ==== Étape 2 : Configurer le code HTML ==== ==== Étape 2 : Configurer le code HTML ====
-Dans l’onglet **"Affichage"**, collez le code ci-dessous dans le champ **"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 `#id#`** par un identifiant unique (ex: `graph_conso_7j`).+**Remplacez les numéros de commande après **cmd_id** pour coller aux vôtres.
  
 <code html> <code html>
Ligne 39: Ligne 35:
 <html lang="fr"> <html lang="fr">
 <head> <head>
-  <meta charset="UTF-8"> +  <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> </head>
 +
 <body> <body>
 +
 <div id="container_#id#" style="height:460px;"></div> <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> <script>
-// ===== UTILITAIRES =====+// Date du jour au format YYYY-MM-DD
 function getTodayDate() { function getTodayDate() {
-  return new Date().toISOString().split('T')[0];+  const d = new Date(); 
 +  return d.toISOString().split('T')[0];
 } }
 +
 +// Date X jours avant aujourd'hui
 function getDateMinusDays(days) { function getDateMinusDays(days) {
-  const d = new Date(); d.setDate(d.getDate() - days);+  const d = new Date(); 
 +  d.setDate(d.getDate() - days);
   return d.toISOString().split('T')[0];   return d.toISOString().split('T')[0];
 } }
  
-// ===== INITIALISATION ===== +// Initialisation auto 
-setTimeout(() => chargerDonnees_#id#(), 100);+setTimeout(() => { 
 +  chargerDonnees_#id#(); 
 +}, 100);
  
 function chargerDonnees_#id#() { function chargerDonnees_#id#() {
-  const dateEnd = getTodayDate(); +  console.log("Chargement des données…"); 
-  const dateStart = getDateMinusDays(6); // 7 jours + 
-  let timestamps = [], hp = [], hc = [], prix = []; +  const dateEndStr = getTodayDate(); 
-  let loaded = 0;+  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]]);
  
-  function renderChart() { 
-    if (loaded < 3) return; 
     Highcharts.chart('container_#id#', {     Highcharts.chart('container_#id#', {
-      chart: { +      chart: { type: 'column' }, 
-        type: 'column', +      title: { text: 'Consommation HP/HC et prix (7 derniers jours)', align: 'left' }, 
-        backgroundColor: 'transparent' +
-      }, +
-      title: { +
-        text: 'Consommation HP/HC et Prix (7 derniers jours)', +
-        align: 'left' +
-      },+
       xAxis: {       xAxis: {
         type: 'datetime',         type: 'datetime',
-        labels: { format: '{value:%e %b}' } // Ex: "11 juil."+        labels: { format: '{value:%e %b}' }
       },       },
 +
       yAxis: [{       yAxis: [{
 +        // Axe gauche : kWh
         min: 0,         min: 0,
         title: { text: 'Énergie (kWh)' }         title: { text: 'Énergie (kWh)' }
       }, {       }, {
 +        // Axe droit : € (le prix reste en colonne comme avant)
         min: 0,         min: 0,
         title: { text: 'Prix (€)' },         title: { text: 'Prix (€)' },
         opposite: true         opposite: true
       }],       }],
 +
       tooltip: {       tooltip: {
-        xDateFormat: '%A %e %B %Y', // Ex: "vendredi 11 juillet 2026"+        xDateFormat: '%A %e %B %Y',
         shared: true         shared: true
       },       },
 +
       plotOptions: {       plotOptions: {
         column: {         column: {
-          grouping: true,    // Regroupe les colonnes (HP, HC, Prix) +          grouping: true,      // conserve la barre prix à côté 
-          stacking: 'normal' // Empile HP et HC+          stacking: 'normal'   // HP + HC empilés
         }         }
       },       },
 +
       series: [       series: [
         {         {
           name: 'Heures pleines (kWh)',           name: 'Heures pleines (kWh)',
-          data: timestamps.map((t, i) => [t, hp[i]]), +          data: hp_series, 
-          color: '#0052cc',+          color: '#0052cc', // bleu soutenu
           yAxis: 0,           yAxis: 0,
-          stack: 'conso'+          stack: 'conso'    // même pile que HC
         },         },
         {         {
           name: 'Heures creuses (kWh)',           name: 'Heures creuses (kWh)',
-          data: timestamps.map((t, i) => [t, hc[i]]), +          data: hc_series, 
-          color: '#66a3ff',+          color: '#66a3ff', // bleu clair
           yAxis: 0,           yAxis: 0,
           stack: 'conso'           stack: 'conso'
Ligne 122: Ligne 149:
         {         {
           name: 'Prix (€)',           name: 'Prix (€)',
-          data: timestamps.map((t, i) => [t, prix[i]]),+          data: price_series,
           color: '#00aa00',           color: '#00aa00',
           yAxis: 1           yAxis: 1
 +          // type laissé à 'column' via chart.type pour rester conforme à "comme actuellement"
         }         }
-      ], +      ]
-      credits: { enabled: false }+
     });     });
   }   }
  
-  // ===== RÉCUPÉRATION DES DONNÉES JEEDOM ===== +  // 1) Heures pleines kWh (cmd 1800)
-  // 1) Heures Pleines (kWh)+
   jeedom.history.get({   jeedom.history.get({
     cmd_id: 1800,     cmd_id: 1800,
-    dateStart: dateStart, +    dateStart: dateStartStr, 
-    dateEnd: dateEnd, +    dateEnd: dateEndStr, 
-    success: function(result) { +    success: function (result) { 
-      timestamps = result.data.map(d => new Date(d[0]).getTime()); +      console.log("HP Jeedom :", result.data); 
-      hp = result.data.map(d => d[1]); + 
-      loaded++; +      timestamps = []; 
-      renderChart();+      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)+  // 2) Heures creuses kWh (cmd 1801)
   jeedom.history.get({   jeedom.history.get({
     cmd_id: 1801,     cmd_id: 1801,
-    dateStart: dateStart, +    dateStart: dateStartStr, 
-    dateEnd: dateEnd, +    dateEnd: dateEndStr, 
-    success: function(result) { +    success: function (result) { 
-      hc = result.data.map(d => d[1]); +      console.log("HC Jeedom :", result.data); 
-      loaded++; + 
-      renderChart();+      hc_jour = []; 
 + 
 +      for (let i = 0; i < result.data.length; i++) { 
 +        hc_jour.push(result.data[i][1]); // kWh 
 +      } 
 + 
 +      chargements++; 
 +      essayerAfficherGraphique_#id#();
     }     }
   });   });
  
-  // 3) Prix (€)+  // 3) Prix € (cmd 1832)
   jeedom.history.get({   jeedom.history.get({
     cmd_id: 1832,     cmd_id: 1832,
-    dateStart: dateStart, +    dateStart: dateStartStr, 
-    dateEnd: dateEnd, +    dateEnd: dateEndStr, 
-    success: function(result) { +    success: function (result) { 
-      prix = result.data.map(d => d[1]); +      console.log("Prix Jeedom :", result.data); 
-      loaded++; + 
-      renderChart();+      price_jour = []; 
 + 
 +      for (let i = 0; i < result.data.length; i++) { 
 +        price_jour.push(result.data[i][1]); // € 
 +      } 
 + 
 +      chargements++; 
 +      essayerAfficherGraphique_#id#();
     }     }
   });   });
 } }
 </script> </script>
 +
 </body> </body>
 </html> </html>
 </code> </code>
  
  • domotique/creer_un_graphique_personnalise_avec_le_plugin_htmldisplay.txt
  • Dernière modification : 2026/07/11 12:06
  • de fate