Visualize: Report + controls

Visualize: Report + controls

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js?_opt=true"></script>

<div id="filters"></div>
<div id="container"></div>

JavaScript

var reportUri = "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report";

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


   var report = v.report({
     resource: reportUri,
     container: "#container",
     error: function(data) {
       console.log(data);
     },
     events: {

       changeTotalPages: function(totalPages) {
         console.log(totalPages);
       },
       reportCompleted: function(status) {
         console.log(status);
       },
       changePagesState: function(page) {
         console.log(page);
       }
     }
   });

 },function(data) {
       console.log(data);
     });