Visualize: Report+controls

Test plugins

by Yuriy Bablyukh

HTML

<!--Provide URL to visualize.js-->
<script src="http://localhost:8081/jasperserver-pro/client/visualize.js?_opt=true"></script>



<!--Provide container to render your visualization-->
<table>

  <tr valign="top">
    <td style="width:80%">
      <div id="container"></div>
    </td>
    <td style="width:20%">
      <div id="inputContainer"></div>
      <button id="apply">
        Apply
      </button>
    </td>
  </tr>
</table>

JavaScript

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

  var url = "/public/Samples/Reports/04._Product_Results_by_Store_Type_Report";

  var report;

  function renderView(uri) {
    report = v.report({
      resource: url,
      container: "#container",

      error: function(e) {
        console.log(e);
      },
      success: function(data) {
        console.log(data);
      }
    });
  }

  //render initial view
  renderView();

  var controls = v.inputControls({
    container: "#inputContainer",
    params:{sales__store__store_contact__store_country_1: ["USA"]},
    resource: url,
    error: function(e) {
      console.log(e);
    },

    success: function(data) {
      console.log(data);
    },
    events: {
      change: function(params, validationResult) {

          console.log('Parameters:');
          console.log(params);
          console.log('Validation:');
          console.log(validationResult);

        $("#apply").removeAttr("apply");
      }
    }
  });

  $("#apply").click(function() {
    controls.run().fail(function(data) {
      console.log(data);
    }).done(function() {
      report.params(controls.data().parameters).run(function(data) {
        console.log(data);
      }).fail(function(e) {
        console.log(e);
      });
    });
  });


});