JSFiddle - React, Tailwind, and code Playground

HTML

<script type='text/javascript' src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js?_opt=true"></script>


<button class="destroy">Destroy</button>
<button class="refresh">Refresh</button>
<!--Provide container to render your visualization-->
<div id="container" style="height: 400px;position: relative"></div>

JavaScript

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

  var report = v.report({
    resource: "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
    container: "#container",
    success: function(data) {
      console.log(data);
    },
    error: function(e) {
      alert(e);
    }
  });


  //destroy method
  $(".destroy").on("click", function() {
    report.destroy().done(function() {
      console.log("destroy run");
    }).fail(function(error) {
      console.log(error)
    })

  });


  $(".refresh").on("click", function() {
    report.refresh().done(function() {
      console.log("refresh run");
    }).fail(function(error) {
      console.log(error)
    })

  });

});