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>
  <br>
  <br>
  <b id='error'>
  
  </b>
  <button id="ok" style="display:none">OK

  </button>

  <button id="firstPage">First Page

  </button>
  <button id="lastPage">Last Page

  </button>

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

CSS

#container {
  border: 1px solid black;
}

#error {
  color: red;
}

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"


  });

  $("#firstPage").click(function() {
    _report
      .pages(1)
      .run()
      .fail(function(err) {

        console.log(err.message);

      });

  })


  $("#lastPage").click(function() {
    _report
      .pages(_report.data().totalPages)
      .run()
      .fail(function(err) {

        console.log(err.message);

      });

  })


  $("#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) {
        $('#error').append(err.message);
        $('#ok').show();
        console.log(err.message);

      });
  });

  $('#ok').on('click', function() {
    $("#error").empty();
    $('#ok').hide();


  })


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

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

});