<%= content_for :css do %>
/* Need separate style for each instance of svg div because javascript will manipulate the properties. */
#<%= divId %> {
 padding-left: 3px;
 overflow: auto;
 border: solid;
 border-width: 1px;
 border-color: gray;
 position: absolute;
 left: 1px;
 right: 1px;
}
path:hover {
stroke-width: 5;
}
path {
stroke-linecap: round;
}
<% end %>

<%= content_for :js do %>
    $(window).on('load', function() {
      $(window).on('load resize scroll', function () { graph_zoom("<%= divId %>","<%=svgId %>", 1) } );
    });
<% end %>

<div id="_<%= divId %>_container" style="padding-top: 41px; margin-top: -41px">
  <div style="text-align: right">
    <a style="cursor: pointer"><span class="glyphicon glyphicon-zoom-out" onclick="graph_zoom('<%= divId %>', '<%= svgId %>', .9)"></span></a>
    <a style="cursor: pointer"><span class="glyphicon glyphicon-zoom-in" onclick="graph_zoom('<%= divId %>', '<%= svgId %>', 1./.9)"></span></a>
  </div>

  <div id="<%= divId %>" class="smart-scroll">
    <span id="_<%= divId %>_center" style="padding-left: 0px"></span>
    <%= raw(svg) %>
  </div>
  <div id="_<%= divId %>_padding" style="padding-bottom: 1em"></div>
</div>