plot co2e and energy in one plot with two axis

Author: mirpedrol

plugins/nf-co2footprint/src/resources/CO2FootprintReportTemplate.html

@@ -235,40 +235,19 @@ <h3 class="mt-5">Total CO<sub>2</sub>e footprint measures</h3>
   <div class="container">
     <h2 id="resources" style="padding-top: 80px;">CO2e Footprint Measures</h2>
 
-    <h4>CO2e</h4>
+    <h4>CO2e - Energy consumption</h4>
     <ul class="nav nav-tabs" id="co2eplot_tabs" role="tablist">
       <li class="nav-item">
         <a class="nav-link active" id="co2eplot_tablink" data-toggle="tab" href="#co2eplot_tabpanel" role="tab" aria-controls="co2eplot_tabpanel" aria-expanded="false">
-          Raw Emissions
+          Raw Emissions - Consumption
         </a>
       </li>
     </ul>
     <div class="tab-content" id="co2eplot_tabcontent">
       <div class="tab-pane fade show active" id="co2eplot_tabpanel" role="tabpanel">
         <div id="co2eplot"></div>
       </div>
-      <div class="tab-pane fade" id="pctco2eplot_tabpanel" role="tabpanel">
-        <div id="pctco2eplot"></div>
-      </div>
-    </div>
-
-    <h4>Energy consumption</h4>
-    <ul class="nav nav-tabs" id="energyplot_tabs" role="tablist">
-      <li class="nav-item">
-        <a class="nav-link active" id="energyplot_tablink" data-toggle="tab" href="#energyplot_tabpanel" role="tab" aria-controls="energyplot_tabpanel" aria-expanded="false">
-          Raw Consumption
-        </a>
-      </li>
-    </ul>
-    <div class="tab-content" id="energyplot_tabcontent">
-      <div class="tab-pane fade show active" id="energyplot_tabpanel" role="tabpanel">
-        <div id="energyplot"></div>
-      </div>
-      <div class="tab-pane fade" id="pctenergyplot_tabpanel" role="tabpanel">
-        <div id="pctenergyplot"></div>
-      </div>
     </div>
-  </div>
 
 
   <div class="container">

plugins/nf-co2footprint/src/resources/assets/CO2FootprintReportTemplate.js

@@ -72,38 +72,56 @@ $(function() {
     if( !window.data_byprocess.hasOwnProperty(pname) )
         continue;
     var smry = window.data_byprocess[pname];
-    co2e_data.push({y: norm_units(smry.co2e), name: pname, type:'box', boxmean: true, boxpoints: false});
-    energy_data.push({y: norm_units(smry.energy), name: pname, type:'box', boxmean: true, boxpoints: false});
+    co2e_data.push({x:pname, y: norm_units(smry.co2e), name: pname, type:'box', boxmean: true, boxpoints: false});
+    energy_data.push({x:pname, y: norm_units(smry.energy), name: pname, type:'box', boxmean: true, boxpoints: false});
   }
 
   // Decide yaxis tickformat
+  var max_co2e = 0;
   co2e_data.forEach(function (p) {
-    max = 0;
+    max_co2e = 0;
     if (p != null) {
       if (Array.isArray(p.y)) {
-        max = Math.max(max, ...p.y);
+        max_co2e = Math.max(max_co2e, ...p.y);
       } else {
-        max = Math.max(max, p.y);
+        max_co2e = Math.max(max_co2e, p.y);
       }
-      
     }
   });
-  var co2e_tickformat = (max <= 4) ? ('.2f') : ('.3s');
+  var co2e_tickformat = (max_co2e <= 4) ? ('.2f') : ('.3s');
   energy_data.forEach(function (p) {
-    max = 0;
+    max_energy = 0;
     if (p != null) {
       if (Array.isArray(p.y)) {
-        max = Math.max(max, ...p.y);
+        max_energy = Math.max(max_energy, ...p.y);
       } else {
-        max = Math.max(max, p.y);
+        max_energy = Math.max(max_energy, p.y);
       }
     }
   });
-  var energy_tickformat = (max <= 4) ? ('.2f') : ('.3s');
+  var energy_tickformat = (max_energy <= 4) ? ('.2f') : ('.3s');
 
-
-  Plotly.newPlot('co2eplot', co2e_data, { title: 'CO2e emission', yaxis: {title: 'CO2e emission (g)', tickformat: co2e_tickformat, rangemode: 'tozero'} });
-  Plotly.newPlot('energyplot', energy_data, { title: 'Energy consumption', yaxis: {title: 'Energy consumption (Wh)', tickformat: energy_tickformat, rangemode: 'tozero'} });
+  var layout = {
+    title: 'CO2e emission & energy consumption',
+    xaxis: {domain: [0.3, 0.7]},
+    yaxis: {title: 'CO2e emission (g)',
+            tickformat: co2e_tickformat, 
+            range: [0, max_co2e + 1]
+    },
+    yaxis2: {
+      title: 'Energy consumption (Wh)',
+      tickformat: energy_tickformat, 
+      range: [0, max_energy + 1],
+      overlaying: 'y',
+      side: 'left',
+      anchor: 'free',
+      position: 0.15
+    }
+  };
+  
+  var data = co2e_data;
+  data.push({yaxis:'y2'});
+  Plotly.newPlot('co2eplot', data, layout);
 
   // Convert to readable units
   function readable_units(value, unit_index) {