Visualize: Embed report

Visualize: Embed report

by juliia13

HTML

<!--Provide visualize.js from your jasperreport server-->
<script src='http://localhost:8080/jasperserver-pro/client/visualize.js'></script>

<!--Provide container to render your visualization-->
<div id='description'>
  <button id="previousPage">
    Previous Page
  </button>

  <button id="nextPage">
    Next Page
  </button>

  Page range:
  <input type="text" id="pageRange"></input>
  <b id='t'></b>

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

CSS

#container {
  border: 1px solid black;
}

JavaScript

visualize({
  auth: {
    name: "jasperadmin",
    password: "jasperadmin"
  } //this part for user able login 
}, function(v) {


  var _report = v.report({ //this function for embed report into container
    resource: "/public/Samples/Reports/12g.PromotionDetailsReport", //report path
    error: handleError, //function that will executed if we will have any error 
    success: function(data) { //this function will executed if all ok and returned data
      console.log(data);
    },
    events: {
      reportCompleted: function(status) {
         console.log(_report.data().totalPages);
         
         $('#t').empty();
         
           $('#t').append('1 - ' +  _report.data().totalPages );
         
      }
    },
    container: "#container" //css location of container for ember report
   
  });
 
        


  $("#previousPage").click(function() {
    var currentPage = _report.pages() || 1;
    _report
      .pages(--currentPage)
      .run()
      .fail(function(err) {
        alert(err);
      });
  });


  $("#nextPage").click(function() {
    var currentPage = _report.pages() || 1;
    _report
      .pages(++currentPage)
      .run()
      .fail(function(err) {
        alert(err);
      });
  });



  $("#pageRange").change(function() {
    _report
      .pages($(this).val())
      .run()
      .fail(function(err) {
        alert(err);
      });
  });



  // console.log(v.report.chart.types);

  function handleError(err) {
    alert(err.message); //show error in alert
  }

});