openstudio-calibration 0.1.2

data/lib/measures/CalibrationReportsEnhanced21/measure.xml

@@ -0,0 +1,269 @@
+<measure>
+  <schema_version>3.0</schema_version>
+  <name>calibration_reports_enhanced_21</name>
+  <uid>e6642d40-7366-4647-8724-53a37991d669</uid>
+  <version_id>45858510-0de6-47ae-98b7-a90ed01654f7</version_id>
+  <version_modified>20200325T030943Z</version_modified>
+  <xml_checksum>2C8A3EEF</xml_checksum>
+  <class_name>CalibrationReportsEnhanced21</class_name>
+  <display_name>Calibration Reports Enhanced</display_name>
+  <description>This measure is intended for calibibration of modeled results against user entered utility bill.</description>
+  <modeler_description>Measure looks at consumption for electricity and natural gas, and demand for electricity. It is inteneded to be used with no more than one gas an electric bills. Each bill can have multiple billing periods. Make sure ot use an AMY matching the utility data time frame.</modeler_description>
+  <arguments>
+    <argument>
+      <name>electric_nmbe_limit</name>
+      <display_name>Electric NMBE limit (%)</display_name>
+      <type>Double</type>
+      <required>true</required>
+      <model_dependent>false</model_dependent>
+      <default_value>5</default_value>
+    </argument>
+    <argument>
+      <name>electric_cvrmse_limit</name>
+      <display_name>Electric CVRMSE limit (%)</display_name>
+      <type>Double</type>
+      <required>true</required>
+      <model_dependent>false</model_dependent>
+      <default_value>15</default_value>
+    </argument>
+    <argument>
+      <name>gas_nmbe_limit</name>
+      <display_name>Gas NMBE limit (%)</display_name>
+      <type>Double</type>
+      <required>true</required>
+      <model_dependent>false</model_dependent>
+      <default_value>5</default_value>
+    </argument>
+    <argument>
+      <name>gas_cvrmse_limit</name>
+      <display_name>Gas CVRMSE limit (%)</display_name>
+      <type>Double</type>
+      <required>true</required>
+      <model_dependent>false</model_dependent>
+      <default_value>15</default_value>
+    </argument>
+  </arguments>
+  <outputs>
+    <output>
+      <name>electricity_consumption_actual</name>
+      <display_name>electricity_consumption_actual</display_name>
+      <short_name>electricity_consumption_actual</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>electricity_consumption_modeled</name>
+      <display_name>electricity_consumption_modeled</display_name>
+      <short_name>electricity_consumption_modeled</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>electricity_consumption_cvrmse</name>
+      <display_name>electricity_consumption_cvrmse</display_name>
+      <short_name>electricity_consumption_cvrmse</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>electricity_consumption_nmbe</name>
+      <display_name>electricity_consumption_nmbe</display_name>
+      <short_name>electricity_consumption_nmbe</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>electricity_sum_of_squares</name>
+      <display_name>electricity_sum_of_squares</display_name>
+      <short_name>electricity_sum_of_squares</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>electricity_dof</name>
+      <display_name>electricity_dof</display_name>
+      <short_name>electricity_dof</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>electricity_rmse</name>
+      <display_name>electricity_rmse</display_name>
+      <short_name>electricity_rmse</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>electricity_peak_demand_nmbe</name>
+      <display_name>electricity_peak_demand_nmbe</display_name>
+      <short_name>electricity_peak_demand_nmbe</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>electricity_peak_demand_actual</name>
+      <display_name>electricity_peak_demand_actual</display_name>
+      <short_name>electricity_peak_demand_actual</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>electricity_peak_demand_modeled</name>
+      <display_name>electricity_peak_demand_modeled</display_name>
+      <short_name>electricity_peak_demand_modeled</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>natural_gas_consumption_actual</name>
+      <display_name>natural_gas_consumption_actual</display_name>
+      <short_name>natural_gas_consumption_actual</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>natural_gas_consumption_modeled</name>
+      <display_name>natural_gas_consumption_modeled</display_name>
+      <short_name>natural_gas_consumption_modeled</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>natural_gas_consumption_cvrmse</name>
+      <display_name>natural_gas_consumption_cvrmse</display_name>
+      <short_name>natural_gas_consumption_cvrmse</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>natural_gas_consumption_nmbe</name>
+      <display_name>natural_gas_consumption_nmbe</display_name>
+      <short_name>natural_gas_consumption_nmbe</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>natural_gas_sum_of_squares</name>
+      <display_name>natural_gas_sum_of_squares</display_name>
+      <short_name>natural_gas_sum_of_squares</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>natural_gas_dof</name>
+      <display_name>natural_gas_dof</display_name>
+      <short_name>natural_gas_dof</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>natural_gas_rmse</name>
+      <display_name>natural_gas_rmse</display_name>
+      <short_name>natural_gas_rmse</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>total_sum_of_squares</name>
+      <display_name>total_sum_of_squares</display_name>
+      <short_name>total_sum_of_squares</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>total_dof</name>
+      <display_name>total_dof</display_name>
+      <short_name>total_dof</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>total_rmse</name>
+      <display_name>total_rmse</display_name>
+      <short_name>total_rmse</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>electricity_cvrmse_within_limit</name>
+      <display_name>electricity_cvrmse_within_limit</display_name>
+      <short_name>electricity_cvrmse_within_limit</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>electricity_nmbe_within_limit</name>
+      <display_name>electricity_nmbe_within_limit</display_name>
+      <short_name>electricity_nmbe_within_limit</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>natural_gas_cvrmse_within_limit</name>
+      <display_name>natural_gas_cvrmse_within_limit</display_name>
+      <short_name>natural_gas_cvrmse_within_limit</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+    <output>
+      <name>natural_gas_nmbe_within_limit</name>
+      <display_name>natural_gas_nmbe_within_limit</display_name>
+      <short_name>natural_gas_nmbe_within_limit</short_name>
+      <type>Double</type>
+      <model_dependent>false</model_dependent>
+    </output>
+  </outputs>
+  <provenances/>
+  <tags>
+    <tag>Reporting.QAQC</tag>
+  </tags>
+  <attributes>
+    <attribute>
+      <name>Measure Type</name>
+      <value>ReportingMeasure</value>
+      <datatype>string</datatype>
+    </attribute>
+    <attribute>
+      <name>Uses SketchUp API</name>
+      <value>false</value>
+      <datatype>boolean</datatype>
+    </attribute>
+  </attributes>
+  <files>
+    <file>
+      <filename>report.html.in</filename>
+      <filetype>in</filetype>
+      <usage_type>resource</usage_type>
+      <checksum>22F45739</checksum>
+    </file>
+    <file>
+      <filename>LICENSE.md</filename>
+      <filetype>md</filetype>
+      <usage_type>license</usage_type>
+      <checksum>E0468DD6</checksum>
+    </file>
+    <file>
+      <filename>README.md.erb</filename>
+      <filetype>erb</filetype>
+      <usage_type>readmeerb</usage_type>
+      <checksum>703C9964</checksum>
+    </file>
+    <file>
+      <filename>README.md</filename>
+      <filetype>md</filetype>
+      <usage_type>readme</usage_type>
+      <checksum>6EC9831E</checksum>
+    </file>
+    <file>
+      <version>
+        <software_program>OpenStudio</software_program>
+        <identifier>1.11.0</identifier>
+        <min_compatible>1.11.0</min_compatible>
+      </version>
+      <filename>measure.rb</filename>
+      <filetype>rb</filetype>
+      <usage_type>script</usage_type>
+      <checksum>ACDD9C17</checksum>
+    </file>
+  </files>
+</measure>

data/lib/measures/CalibrationReportsEnhanced21/resources/report.html.in

@@ -0,0 +1,380 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Calibration | OpenStudio</title>
+<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
+<link href="file:///C:/openstudio_git/OpenStudio/openstudiocore/resources/web_assets/bootstrap.min.css" rel="stylesheet">
+<style type="text/css">
+body {
+    font: 10px sans-serif;
+    min-width: 750px;
+}
+table {
+    max-width:700px;
+}
+.axis path, .axis line {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges;
+}
+.bar {
+    fill: steelblue;
+}
+.x.axis path {
+    display: none;
+}
+.d3-tip {
+    line-height: 1;
+    font-weight: bold;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    border-radius: 2px;
+}
+/* Creates a small triangle extender for the tooltip */
+.d3-tip:after {
+    box-sizing: border-box;
+    display: inline;
+    font-size: 10px;
+    width: 100%;
+    line-height: 1;
+    color: rgba(0, 0, 0, 0.8);
+    content:"\25BC";
+    position: absolute;
+    text-align: center;
+}
+/* Style northward tooltips differently */
+.d3-tip.n:after {
+    margin: -1px 0 0 0;
+    top: 100%;
+    left: 0;
+}
+.chartInfo h6 {
+    display: inline;
+}
+</style>
+<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js"></script>
+<script type="text/javascript" src="file:///C:/openstudio_git/OpenStudio/openstudiocore/resources/web_assets/jquery.min.js"></script>
+<script type="text/javascript" src="file:///C:/openstudio_git/OpenStudio/openstudiocore/resources/web_assets/d3.min.js"></script>
+<script type="text/javascript">
+// http://labratrevenge.com/d3-tip/javascripts/d3.tip.min.js
+d3.tip=function(){function t(t){v=m(t),w=v.createSVGPoint(),document.body.appendChild(x)}function e(){return"n"}function n(){return[0,0]}function r(){return" "}function o(){var t=p();return{top:t.n.y-x.offsetHeight,left:t.n.x-x.offsetWidth/2}}function s(){var t=p();return{top:t.s.y,left:t.s.x-x.offsetWidth/2}}function l(){var t=p();return{top:t.e.y-x.offsetHeight/2,left:t.e.x}}function u(){var t=p();return{top:t.w.y-x.offsetHeight/2,left:t.w.x-x.offsetWidth}}function f(){var t=p();return{top:t.nw.y-x.offsetHeight,left:t.nw.x-x.offsetWidth}}function i(){var t=p();return{top:t.ne.y-x.offsetHeight,left:t.ne.x}}function a(){var t=p();return{top:t.sw.y,left:t.sw.x-x.offsetWidth}}function c(){var t=p();return{top:t.se.y,left:t.e.x}}function d(){var t=d3.select(document.createElement("div"));return t.style({position:"absolute",opacity:0,pointerEvents:"none",boxSizing:"border-box"}),t.node()}function m(t){return t=t.node(),"svg"==t.tagName.toLowerCase()?t:t.ownerSVGElement}function p(){var t=d3.event.target,e={},n=t.getScreenCTM(),r=t.getBBox(),o=r.width,s=r.height,l=r.x,u=r.y,f=document.body.scrollTop,i=document.body.scrollLeft;return document.documentElement&&document.documentElement.scrollTop&&(f=document.documentElement.scrollTop,i=document.documentElement.scrollLeft),w.x=l+i,w.y=u+f,e.nw=w.matrixTransform(n),w.x+=o,e.ne=w.matrixTransform(n),w.y+=s,e.se=w.matrixTransform(n),w.x-=o,e.sw=w.matrixTransform(n),w.y-=s/2,e.w=w.matrixTransform(n),w.x+=o,e.e=w.matrixTransform(n),w.x-=o/2,w.y-=s/2,e.n=w.matrixTransform(n),w.y+=s,e.s=w.matrixTransform(n),e}var y=e,g=n,h=r,x=d(),v=null,w=null;t.show=function(){var e,n=h.apply(this,arguments),r=g.apply(this,arguments),o=y.apply(this,arguments),s=d3.select(x),l=0;for(s.html(n).style({opacity:1,pointerEvents:"all"});l--;)s.classed(E[l],!1);return e=T.get(o).apply(this),s.classed(o,!0).style({top:e.top+r[0]+"px",left:e.left+r[1]+"px"}),t},t.hide=function(){return nodel=d3.select(x),nodel.style({opacity:0,pointerEvents:"none"}),t},t.attr=function(e){if(2>arguments.length&&"string"==typeof e)return d3.select(x).attr(e);var n=Array.prototype.slice.call(arguments);return d3.selection.prototype.attr.apply(d3.select(x),n),t},t.style=function(e){if(2>arguments.length&&"string"==typeof e)return d3.select(x).style(e);var n=Array.prototype.slice.call(arguments);return d3.selection.prototype.style.apply(d3.select(x),n),t},t.direction=function(e){return arguments.length?(y=null==e?e:d3.functor(e),t):y},t.offset=function(e){return arguments.length?(g=null==e?e:d3.functor(e),t):g},t.html=function(e){return arguments.length?(h=null==e?e:d3.functor(e),t):h};var T=d3.map({n:o,s:s,e:l,w:u,nw:f,ne:i,sw:a,se:c}),E=T.keys();return t};
+</script>
+</head>
+<body>
+<div style="width:250px;display:inline-block;">
+  <label>Calibration Method</label>
+  <select id="calibrationMethodSelect">
+  </select>
+</div>
+<div style="width:400px;display:inline-block;">
+  <h6 id="calibrationString"></h6>
+</div>
+<div id="consumptionString-0" class="chartInfo"></div>
+<div id="chart-0"></div>
+<div id="table-0" ></div>
+<div id="consumptionString-1" class="chartInfo"></div>
+<div id="chart-1"></div>
+<div id="table-1" ></div>
+<div id="consumptionString-2" class="chartInfo"></div>
+<div id="chart-2"></div>
+<div id="table-2" ></div>
+<script type="text/javascript">
+    function numFormat(n) {
+        var parts = n.toString().split(".");
+        return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
+    }
+
+<%= energy %>
+
+    $.each(calibrationGuidelines, function (index, value) {
+        $('#calibrationMethodSelect')
+            .append($("<option></option>")
+            .attr("value", index)
+            .text(value));
+    });
+
+    $("#calibrationMethodSelect").change(onMethodChange);
+
+    var maxNMBE = 0;
+    var maxCVRMSE = 0;
+
+    function onMethodChange() {
+        if ($('#calibrationMethodSelect').val() == "0") {
+            maxNMBE = ashraeMaxNMBE;
+            maxCVRMSE = ashraeMaxCVRMSE;
+        } else {
+            maxNMBE = fempMaxNMBE;
+            maxCVRMSE = fempMaxCVRMSE;
+        }
+        $('#calibrationString').text("NMBE of " + maxNMBE + "% or less and CV(RMSE) of " + maxCVRMSE + "% relative to monthly data.  Must contain all utility data for one year and real weather data.  Check the guideline for additional requirements.");
+
+        $('.table').each(function(i) {
+            $(this).find('tr:last td:not(:first)').each(function(j) {
+                var value = $(this).text().replace(/%/g, '');
+                if (value != "&mdash;") {
+                    var num = parseFloat(value);
+                    if (Math.abs(num) > maxNMBE) {
+                        num = "<font color=\"red\">" + num;
+                    }
+                    num = num + "%";
+                    $(this).html(num);
+                }
+            });
+        })
+
+        for (var c in charts) {
+        
+        if(consumption[charts[c]]){
+            cvrmseString = "<h6>CV(RMSE) = </h6>"
+            num = consumption[charts[c]].cvrsme;
+            if (Math.abs(num) > maxCVRMSE) {
+                num = "<font color=\"red\">" + num + "<font color=\"black\">";
+            }
+            cvrmseString = cvrmseString + num;
+
+            nmbeString = "<h6>NMBE = </h6>"
+            num = consumption[charts[c]].nmbe;
+            if (Math.abs(num) > maxNMBE) {
+                num = "<font color=\"red\">" + num;
+            }
+            nmbeString = nmbeString + num;
+
+            string = "<h4 style=\"margin-bottom:-10px;\">" + charts[c] + " (" + consumption[charts[c]].units + ")</h4>";
+            if(charts[c] != "Electricity Demand"){
+                string = string + "<br>" + cvrmseString + "<br>" + nmbeString;
+            }
+            $('#consumptionString-' + c).html(string);
+        }
+
+        }
+
+    }
+
+    onMethodChange();
+
+    function outputTable(name, units, obj, id) {
+        var $table = $('<table id="' + name.toLowerCase().replace(/ /g, '-') + '">').addClass("table table-striped table-bordered table-condensed");
+        var headers = '';
+        for (var i = 1; i <= obj.Start.length; i++) headers += '<th>' + i + '</th>';
+        $table.append('<thead>').children('thead').append('<tr />').children('tr').append('<th>&nbsp;</th>').append(headers);
+        var $tbody = $table.append('<tbody />').children('tbody');
+        var key;
+        for (key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                if (key == "Start" | key == "End" | key == "Actual" | key == "Model" | key == "NMBE") {
+                    var $row = $tbody.append('<tr />').children('tr:last');
+                    $row.append("<td>" + key + "</td>");
+                    for (i = 0; i < obj.Start.length; i++) {
+                        var num = obj[key][i] === 0 ? "&mdash;" : numFormat(obj[key][i]);
+
+                        if (num != "&mdash;") {
+                            if (key == "NMBE") {
+                                if (Math.abs(num) > maxNMBE) {
+                                    num = "<font color=\"red\">" + num;
+                                }
+                                num = num + "%";
+                            }
+                        }
+
+                        $row.append("<td>" + num + "</td>");
+                    }
+                }
+            }
+        }
+        $table.appendTo('#' + id);
+    }
+
+    var margin = {
+        top: 20.5,
+        right: 20,
+        bottom: 30,
+        left: 40.5
+    },
+    width = 560 - margin.left - margin.right,
+        height = 300 - margin.top - margin.bottom;
+
+    var x0 = d3.scale.ordinal()
+        .rangeRoundBands([0, width], 0.1);
+
+    var x1 = d3.scale.ordinal();
+
+    var y = d3.scale.linear()
+        .range([height, 0]);
+
+    var color = d3.scale.ordinal()
+        .range(["#8CC739", "#29AAE7"]);
+
+    var xAxis = d3.svg.axis()
+        .scale(x0)
+        .orient("bottom");
+
+    var yAxis = d3.svg.axis()
+        .scale(y)
+        .orient("left")
+        .tickFormat(d3.format(".2s"));
+
+    var tip = d3.tip()
+        .attr('class', 'd3-tip')
+        .offset([-10, 0])
+        .html(function (d) {
+        return "<strong>" + d3.event.target.__data__.name + ":</strong> <span style='color:red'>" + d3.event.target.__data__.value + "</span>";
+    });
+
+    var charts = ["Electricity Consumption", "Electricity Demand", "Natural Gas Consumption"];
+
+    for (var c in charts) {
+
+    if(consumption[charts[c]]){
+    
+        if (c == 0) {
+            margin.right = 125;
+        }
+
+        cvrmseString = "<h6>CV(RMSE) = </h6>"
+        num = consumption[charts[c]].cvrsme;
+        if (Math.abs(num) > maxCVRMSE) {
+            num = "<font color=\"red\">" + num + "<font color=\"black\">";
+        }
+        cvrmseString = cvrmseString + num;
+
+        nmbeString = "<h6>NMBE = </h6>"
+        num = consumption[charts[c]].nmbe;
+        if (Math.abs(num) > maxNMBE) {
+            num = "<font color=\"red\">" + num;
+        }
+        nmbeString = nmbeString + num;
+
+        string = "<h4 style=\"margin-bottom:-10px;\">" + charts[c] + " (" + consumption[charts[c]].units + ")</h4>";
+        if(charts[c] != "Electricity Demand"){
+            string = string + "<br>" + cvrmseString + "<br>" + nmbeString;
+        }
+        $('#consumptionString-' + c).html(string);
+
+        var svg = d3.select("#chart-" + c).append("svg")
+            .attr("width", width + margin.left + margin.right)
+            .attr("height", height + margin.top + margin.bottom)
+            .append("g")
+            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+        svg.call(tip);
+
+        data = [];
+        for (var enduse in consumption[charts[c]].data) {
+            if (enduse == "Actual" | enduse == "Model") {
+                var enduse_data = consumption[charts[c]].data[enduse];
+                for (var i = 1; i <= enduse_data.length; i++) {
+                    if (data.length < enduse_data.length) {
+                        var temp = {
+                            "Month": i
+                        };
+                        temp[enduse] = enduse_data[i - 1];
+                        data.push(temp);
+                    } else {
+                        data[i - 1][enduse] = enduse_data[i - 1];
+                    }
+                }
+            }
+        }
+        var comparison = d3.keys(data[0]).filter(function (key) {
+            return key !== "Month";
+        });
+
+        data.forEach(function (d) {
+            d.consumption = comparison.map(function (name) {
+                return {
+                    name: name,
+                    value: +d[name]
+                };
+            });
+        });
+
+        x0.domain(data.map(function (d) {
+            return d.Month;
+        }));
+        x1.domain(comparison).rangeRoundBands([0, x0.rangeBand()]);
+        y.domain([0, d3.max(data, function (d) {
+            return d3.max(d.consumption, function (d) {
+                return d.value;
+            });
+        })]);
+
+        //data.sort(function(a, b) { return b.total - a.total; });
+
+        svg.append("g")
+            .attr("class", "x axis")
+            .attr("transform", "translate(0," + height + ")")
+            .call(xAxis);
+
+        svg.append("g")
+            .attr("class", "y axis")
+            .call(yAxis)
+            .append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("y", -36)
+            .attr("dy", ".71em")
+            .style("text-anchor", "end")
+            .text(consumption[charts[c]].units);
+
+        var month = svg.selectAll(".month")
+            .data(data)
+            .enter().append("g")
+            .attr("class", "g")
+            .on('mouseover', tip.show)
+            .on('mouseout', tip.hide)
+            .attr("transform", function (d) {
+            return "translate(" + x0(d.Month) + ",0)";
+        });
+
+        month.selectAll("rect")
+            .data(function (d) {
+            return d.consumption;
+        })
+            .enter().append("rect")
+            .attr("width", x1.rangeBand())
+            .attr("x", function (d) {
+            return x1(d.name);
+        })
+            .attr("y", function (d) {
+            return y(d.value);
+        })
+            .attr("height", function (d) {
+            return height - y(d.value);
+        })
+            .style("fill", function (d) {
+            return color(d.name);
+        });
+
+        var legend = svg.selectAll(".legend")
+            .data(comparison.slice().reverse())
+            .enter().append("g")
+            .attr("class", "legend")
+            .attr("transform", function (d, i) {
+            return "translate(0," + i * 20 + ")";
+        });
+
+        legend.append("rect")
+            .attr("x", width + 105)
+            .attr("width", 18)
+            .attr("height", 18)
+            .style("fill", color);
+
+        legend.append("text")
+            .attr("x", width + 105 - 3)
+            .attr("y", 9)
+            .attr("dy", ".35em")
+            .style("text-anchor", "end")
+            .text(function (d) {
+            return d;
+        });
+
+        svg.selectAll(".g").attr("stroke", "black");
+
+        outputTable(charts[c], consumption[charts[c]].units, consumption[charts[c]].data, "table-" + c);
+    }
+    
+    }
+</script>
+</body>
+</html>