Auto scaling container

Print 2 reports and scale to container

by Stas_P

HTML

<script src="https://code.jquery.com/jquery-2.1.0.js">


</script>
<script src="https://underscorejs.org/underscore-min.js"></script>
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

<div id="container1"></div>

CSS

#container1 {
  width: 100%;
  background-color: blue;
  display: block
}

JavaScript

// Visualize: Listen for change page totals

visualize({
  auth: {
    name: "joeuser",
    password: "joeuser",
    organization: "organization_1"
  }
}, function(v) {
  var report1 = v.report({
    resource: "/public/Samples/Reports/14._World_Map",
    container: "#container1",
    scale: "width",
    success: function(error) {
      renderWithUpdatedHeight($("#container1"))
    },
    error: function(error) {
      alert(error);
    }
  });

  $(window).resize(function() {
    renderWithUpdatedHeight($("#container1"));
  });

  function updateHeight($container) {
    var height = $container.find(".jrPage").height();
    var scale = $container.find(".jrPage").css("transform").match(/\d\.(\d)+/)[0];
    $container.height(height * (+scale));
  }
  
  var renderWithUpdatedHeight = _.debounce(updateHeight, 500);

});