openstudio-workflow 0.0.1

data/lib/openstudio/workflow/jobs/run_postprocess/packaged_measures/README.md

@@ -0,0 +1,5 @@
+# Packaged Measure Folder
+
+This folder is used to ship packaged measures with the AMIs.
+
+Current the only packaged measure is the StandardReports because it is run every simulation.  This folder will be copied into each data_point folder for now, but will eventually be part of the standard upload of the project and live in the scripts

data/lib/openstudio/workflow/jobs/run_postprocess/packaged_measures/StandardReports/measure.rb

@@ -0,0 +1,212 @@
+require 'erb'
+
+#start the measure
+class StandardReports < OpenStudio::Ruleset::ReportingUserScript
+
+  #define the name that a user will see, this method may be deprecated as
+  #the display name in PAT comes from the name field in measure.xml
+  def name
+    return "Standard Reports"
+  end
+
+  #define the arguments that the user will input
+  def arguments()
+    args = OpenStudio::Ruleset::OSArgumentVector.new
+
+    return args
+  end #end the arguments method
+
+  #sql_query method
+  def sql_query(sql, report_name, query)
+    val = 10e9
+    result = sql.execAndReturnFirstDouble("SELECT Value FROM TabularDataWithStrings WHERE ReportName='#{report_name}' AND #{query}")
+    if not result.empty?
+      val = result.get
+    end
+    return val
+  end
+
+  #define what happens when the measure is run
+  def run(runner, user_arguments)
+    super(runner, user_arguments)
+
+    #use the built-in error checking
+    if not runner.validateUserArguments(arguments(), user_arguments)
+      return false
+    end
+    
+    os_version = OpenStudio::VersionString.new(OpenStudio::openStudioVersion())
+    min_version_feature1 = OpenStudio::VersionString.new("1.2.3")
+
+    # get the last model and sql file
+
+    model = runner.lastOpenStudioModel
+    if model.empty?
+      runner.registerError("Cannot find last model.")
+      return false
+    end
+    model = model.get
+
+    sqlFile = runner.lastEnergyPlusSqlFile
+    if sqlFile.empty?
+      runner.registerError("Cannot find last sql file.")
+      return false
+    end
+    sqlFile = sqlFile.get
+    model.setSqlFile(sqlFile)
+
+    # put data into variables, these are available in the local scope binding
+    #building_name = model.getBuilding.name.get
+
+    web_asset_path = OpenStudio::getSharedResourcesPath() / OpenStudio::Path.new("web_assets")
+
+    energy = "var consumption = {\n"
+    fuel_type = ""
+    units = ""
+
+    site_energy_use = 0.0
+    OpenStudio::EndUseFuelType::getValues.each do |fuel_type|
+      energy << "\t\""
+      fuel_type = OpenStudio::EndUseFuelType.new(fuel_type).valueDescription
+      energy << OpenStudio::EndUseFuelType.new(fuel_type).valueDescription # append this to remove whitespace between words ".delete(' ')"
+      energy << " Consumption\":{\n\t\t\"units\":"
+      if fuel_type == "Electricity"
+        units = "\"kWh\""
+        unit_str = "kWh"
+      else
+        units = "\"Million Btu\""
+        unit_str = "MBtu"
+      end
+      fuel_type_aggregation = 0.0
+      energy << units
+      energy << ",\n\t\t\"data\":{\n\t\t\t\""
+      OpenStudio::EndUseCategoryType::getValues.each do |category_type|
+        fuel_and_category_aggregation = 0.0
+        category_str = OpenStudio::EndUseCategoryType.new(category_type).valueDescription
+        energy << category_str # append this to remove whitespace between words ".delete(' ')"
+        energy << "\":["
+        OpenStudio::MonthOfYear::getValues.each do |month|
+          if month >= 1 and month <= 12
+            if not sqlFile.energyConsumptionByMonth(OpenStudio::EndUseFuelType.new(fuel_type),
+                                                    OpenStudio::EndUseCategoryType.new(category_type),
+                                                    OpenStudio::MonthOfYear.new(month)).empty?
+              valInJ = sqlFile.energyConsumptionByMonth(OpenStudio::EndUseFuelType.new(fuel_type),
+                                                        OpenStudio::EndUseCategoryType.new(category_type),
+                                                        OpenStudio::MonthOfYear.new(month)).get
+              fuel_and_category_aggregation += valInJ
+              valInUnits = OpenStudio::convert(valInJ,"J",unit_str).get()
+              temp = sprintf "%.3f", valInUnits
+              energy << temp.to_s
+              energy << ","
+              if os_version >= min_version_feature1
+                month_str = OpenStudio::MonthOfYear.new(month).valueDescription
+                prefix_str = OpenStudio::toUnderscoreCase("#{fuel_type}_#{category_str}_#{month_str}")
+                runner.registerValue("#{prefix_str}_si",valInJ,"J")
+                runner.registerValue("#{prefix_str}_ip",valInUnits,unit_str)
+              end
+            else
+              energy << "0,"
+            end
+          end
+        end
+        energy = energy[0..-2]
+        energy << "],\n\t\t\t\""
+        if (os_version >= min_version_feature1) 
+          prefix_str = OpenStudio::toUnderscoreCase("#{fuel_type}_#{category_str}")
+          runner.registerValue("#{prefix_str}_si",fuel_and_category_aggregation,"J")
+          runner.registerValue("#{prefix_str}_ip",OpenStudio::convert(fuel_and_category_aggregation,"J",unit_str).get,unit_str)
+        end
+        fuel_type_aggregation += fuel_and_category_aggregation
+      end
+      energy = energy[0..-7]
+      energy << "\n\t\t}\n\t},\n"
+      if (os_version >= min_version_feature1)
+        runner.registerValue(OpenStudio::toUnderscoreCase("#{fuel_type}_si"),fuel_type_aggregation,"J")
+        runner.registerValue(OpenStudio::toUnderscoreCase("#{fuel_type}_ip"),
+                             OpenStudio::convert(fuel_type_aggregation,"J",unit_str).get,
+                             unit_str)
+      end
+      site_energy_use += fuel_type_aggregation
+    end
+    energy = energy[0..-3]
+    energy << "\n};\n"
+    if (os_version >= min_version_feature1)
+      runner.registerValue("site_energy_use_si",OpenStudio::convert(site_energy_use,"J","GJ").get,"GJ")
+      runner.registerValue("site_energy_use_ip",OpenStudio::convert(site_energy_use,"J","MBtu").get,"MBtu")
+      
+      # queries that don't have API methods yet 
+      total_building_area = sql_query(sqlFile, 'AnnualBuildingUtilityPerformanceSummary', "TableName='Building Area' AND RowName='Total Building Area' AND ColumnName='Area'")
+      runner.registerValue("total_building_area",total_building_area,"m2")
+      
+      net_conditioned_building_area = sql_query(sqlFile, 'AnnualBuildingUtilityPerformanceSummary', "TableName='Building Area' AND RowName='Net Conditioned Building Area' AND ColumnName='Area'")
+      runner.registerValue("net_conditioned_building_area",net_conditioned_building_area,"m2")
+      
+      unconditioned_building_area = sql_query(sqlFile, 'AnnualBuildingUtilityPerformanceSummary', "TableName='Building Area' AND RowName='Unconditioned Building Area' AND ColumnName='Area'")
+      runner.registerValue("unconditioned_building_area",unconditioned_building_area,"m2")
+      
+      total_site_energy_eui = sql_query(sqlFile, 'AnnualBuildingUtilityPerformanceSummary', "TableName='Site and Source Energy' AND RowName='Total Site Energy' AND ColumnName='Energy Per Conditioned Building Area'")
+      runner.registerValue("total_site_energy_eui",total_site_energy_eui,"MJ/m2")
+
+      total_source_energy_eui = sql_query(sqlFile, 'AnnualBuildingUtilityPerformanceSummary', "TableName='Site and Source Energy' AND RowName='Total Source Energy' AND ColumnName='Energy Per Conditioned Building Area'")
+      runner.registerValue("total_source_energy_eui",total_source_energy_eui,"MJ/m2")
+      
+      time_setpoint_not_met_during_occupied_heating = sql_query(sqlFile, 'AnnualBuildingUtilityPerformanceSummary', "TableName='Comfort and Setpoint Not Met Summary' AND RowName='Time Setpoint Not Met During Occupied Heating' AND ColumnName='Facility'")
+      runner.registerValue("time_setpoint_not_met_during_occupied_heating",time_setpoint_not_met_during_occupied_heating,"hr")
+
+      time_setpoint_not_met_during_occupied_cooling = sql_query(sqlFile, 'AnnualBuildingUtilityPerformanceSummary', "TableName='Comfort and Setpoint Not Met Summary' AND RowName='Time Setpoint Not Met During Occupied Cooling' AND ColumnName='Facility'")
+      runner.registerValue("time_setpoint_not_met_during_occupied_cooling",time_setpoint_not_met_during_occupied_cooling,"hr")
+      
+      time_setpoint_not_met_during_occupied_hours = time_setpoint_not_met_during_occupied_heating + time_setpoint_not_met_during_occupied_cooling
+      runner.registerValue("time_setpoint_not_met_during_occupied_hours",time_setpoint_not_met_during_occupied_hours,"hr")
+  
+      total_life_cycle_cost = sql_query(sqlFile, 'Life-Cycle Cost Report', "TableName='Present Value by Category' AND RowName='Grand Total' AND ColumnName='Present Value'")
+      runner.registerValue("total_life_cycle_cost",total_life_cycle_cost,"$")
+  
+    end
+
+    # echo out our values
+    #runner.registerInfo("This building is named #{building_name}.")
+
+    # read in template
+    html_in_path = "#{File.dirname(__FILE__)}/resources/report.html.in"
+    if File.exist?(html_in_path)
+        html_in_path = html_in_path
+    else
+        html_in_path = "#{File.dirname(__FILE__)}/report.html.in"
+    end
+    html_in = ""
+    File.open(html_in_path, 'r') do |file|
+      html_in = file.read
+    end
+
+    # configure template with variable values
+    renderer = ERB.new(html_in)
+    html_out = renderer.result(binding)
+
+    # write html file
+    html_out_path = 'report.html'
+    File.open(html_out_path, 'w') do |file|
+      file << html_out
+      
+      # make sure data is written to the disk one way or the other      
+      begin
+        file.fsync
+      rescue
+        file.flush
+      end
+    end
+
+    #closing the sql file
+    sqlFile.close
+
+    #reporting final condition
+    runner.registerFinalCondition("Standard Report generated successfully.")
+
+    return true
+
+  end #end the run method
+
+end #end the measure
+
+#this allows the measure to be use by the application
+StandardReports.new.registerWithApplication

data/lib/openstudio/workflow/jobs/run_postprocess/packaged_measures/StandardReports/measure.xml

@@ -0,0 +1,53 @@
+<measure>
+  <name>Standard Reports</name>
+  <uid>fc337100-8634-404e-8966-01243d292a79</uid>
+  <version_id>4f1230e3-0954-43ab-a772-c345030ab14b</version_id>
+  <description>Change me</description>
+  <modeler_description>Change me</modeler_description>
+  <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>ExampleModel.osm</filename>
+      <filetype>osm</filetype>
+      <usage_type>test</usage_type>
+      <checksum>0D4162D2</checksum>
+    </file>
+    <file>
+      <filename>report.html.in</filename>
+      <filetype>in</filetype>
+      <usage_type>resource</usage_type>
+      <checksum>093FE760</checksum>
+    </file>
+    <file>
+      <filename>StandardReports_Test.rb</filename>
+      <filetype>rb</filetype>
+      <usage_type>test</usage_type>
+      <checksum>6790E2F5</checksum>
+    </file>
+    <file>
+      <version>
+        <software_program>OpenStudio</software_program>
+        <identifier>1.1.2</identifier>
+      </version>
+      <filename>measure.rb</filename>
+      <filetype>rb</filetype>
+      <usage_type>script</usage_type>
+      <checksum>4263B498</checksum>
+    </file>
+  </files>
+</measure>

data/lib/openstudio/workflow/jobs/run_postprocess/packaged_measures/StandardReports/resources/report.html.in

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Results | OpenStudio</title>
+<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
+<link href="file:///<%= web_asset_path %>/bootstrap.min.css" rel="stylesheet">
+<style type="text/css">
+body {
+    font: 10px sans-serif;
+    min-width: 1280px;
+}
+table {
+    max-width:800px;
+}
+.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;
+}
+</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:///<%= web_asset_path %>/jquery.min.js"></script>
+<script type="text/javascript" src="file:///<%= web_asset_path %>/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 class="row-fluid">
+  <div class="span5">
+    <h4 id="title-0"></h4>
+    <div id="chart-0"></div>
+  </div>
+  <div class="span7">
+    <h4 id="title-1"></h4>
+    <div id="chart-1"></div>
+  </div>
+</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] : "");
+    }
+
+    var months = [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec"];
+
+<%= energy %>
+
+    function outputTable(name, units, obj) {
+        if (name == "Electricity Consumption" | name == "Natural Gas Consumption" | name == "District Cooling Consumption" | name == "District Heating Consumption") {
+            $('<h4>').text(name + " (" + units + ")").appendTo('body');
+            var $table = $('<table id="' + name.toLowerCase().replace(/ /g, '-') + '">').addClass("table table-striped table-bordered table-condensed");
+            $table.append('<thead>').children('thead').append('<tr />').children('tr').append('<th>&nbsp;</th><th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th><th>Jul</th><th>Aug</th><th>Sep</th><th>Oct</th><th>Nov</th><th>Dec</th><th>Total</th>');
+            var $tbody = $table.append('<tbody />').children('tbody');
+            var key;
+            var totalTotal = 0;
+            var columnTotal = [];
+            for (key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    var $row = $tbody.append('<tr />').children('tr:last');
+                    $row.append("<td>" + key + "</td>");
+                    var total = 0;
+                    for (i = 0; i < obj[key].length; i++) {
+                        if (columnTotal[i] === undefined) columnTotal[i] = 0;
+                        $row.append("<td>" + (obj[key][i] === 0 ? "&mdash;" : numFormat(obj[key][i])) + "</td>");
+                        total += obj[key][i];
+                        columnTotal[i] += obj[key][i];
+                    }
+                    totalTotal += total;
+                    $row.append("<td>" + (total === 0 ? "&mdash;" : numFormat(total.toFixed(3))) + "</td>");
+                }
+            }
+            // Append column totals as new, last row of table
+            if (columnTotal[columnTotal.length] === undefined) columnTotal[columnTotal.length] = 0;
+            columnTotal[columnTotal.length - 1] = totalTotal;
+            var $row = $tbody.append('<tr />').children('tr:last');
+            $row.append("<td>Total</td>");
+            for (i = 0; i < columnTotal.length; i++) {
+                $row.append("<td>" + (columnTotal[i] === 0 ? "&mdash;" : numFormat(columnTotal[i].toFixed(3))) + "</td>");
+            }
+            $table.appendTo('body');
+        }
+    }
+
+    $.each(consumption, function (key, obj) {
+        outputTable(key, obj.units, obj.data);
+    });
+
+    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 x = d3.scale.ordinal()
+        .rangeRoundBands([0, width], 0.1);
+
+    var y = d3.scale.linear()
+        .rangeRound([height, 0]);
+
+    var color = d3.scale.ordinal()
+        .range(["#EF1C21", "#0071BD", "#F7DF10", "#DEC310", "#4A4D4A", "#B5B2B5", "#FF79AD", "#632C94", "#F75921", "#293094", "#CE5921", "#FFB239", "#29AAE7", "#8CC739"]);
+
+    var xAxis = d3.svg.axis()
+        .scale(x)
+        .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>" + d.name + ":</strong> <span style='color:red'>" + (d.y1 - d.y0).toFixed(2) + "</span>";
+    });
+
+    var charts = ["Electricity Consumption", "Natural Gas Consumption"];
+
+    for (var c in charts) {
+
+        if (c == charts.length - 1) {
+            margin.right = 125;
+        }
+
+        $('#title-' + c).text(charts[c]);
+
+        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) {
+            var enduse_data = consumption[charts[c]].data[enduse];
+            for (var month = 0; month < months.length; month++) {
+                if (data.length < months.length) {
+                    var temp = {
+                        "Month": months[month]
+                    };
+                    temp[enduse] = enduse_data[month];
+                    data.push(temp);
+                } else {
+                    data[month][enduse] = enduse_data[month];
+                }
+            }
+        }
+        color.domain(d3.keys(data[0]).filter(function (key) {
+            return key !== "Month";
+        }));
+
+        data.forEach(function (d) {
+            var y0 = 0;
+            d.consumption = color.domain().map(function (name) {
+                return {
+                    name: name,
+                    y0: y0,
+                    y1: y0 += +d[name]
+                };
+            });
+            d.total = d.consumption[d.consumption.length - 1].y1;
+        });
+
+        //data.sort(function(a, b) { return b.total - a.total; });
+
+        x.domain(data.map(function (d) {
+            return d.Month;
+        }));
+        y.domain([0, d3.max(data, function (d) {
+            return d.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")
+            .attr("transform", function (d) {
+            return "translate(" + x(d.Month) + ",0)";
+        });
+
+        month.selectAll("rect")
+            .data(function (d) {
+            return d.consumption;
+        })
+            .enter().append("rect")
+            .attr("width", x.rangeBand())
+            .attr("y", function (d) {
+            return y(d.y1);
+        })
+            .attr("height", function (d) {
+            return y(d.y0) - y(d.y1);
+        })
+            .style("fill", function (d) {
+            return color(d.name);
+        })
+            .on('mouseover', tip.show)
+            .on('mouseout', tip.hide);
+
+        if (c == charts.length - 1) {
+            var legend = svg.selectAll(".legend")
+                .data(color.domain().slice())
+                .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")
+            .attr("stroke-width", "1");
+    }
+</script>
+</body>
+</html>