Visualize: render report and input controls

Test plugins

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://localhost:8710/jasperserver-pro/client/visualize.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <div id="report-container"></div>
    </div>
    <div class="col-lg-6">
      <div id="inputcontrols-container"></div>
    </div>
  </div>
</div>

CSS

#inputcontrols-container {
  padding-left: 100px;
}

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {

		var resourceUri = "/public/Cases/01618764/SUPPORT_CascadingFilter";
    
    var report = v.report({
    		resource: resourceUri, 
        container: "#report-container" 
    });
    
     var inputControls = v.inputControls({
    		resource: resourceUri,
    		container: "#inputcontrols-container",
        events: {
        	change: function(params, error){
          	if (!error){
            	report.params(params).run();  
            } 
          }
        }
    });
    
});