Visualize: Ad Hoc View Data API

Test plugins

by Yuriy Bablyukh

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!--Provide URL to visualize.js-->
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>


<select id="report">
  <option value='/public/Samples/Reports/01._Geographic_Results_by_Segment_Report'>01. Geographic Results by Segment Report</option>
  <option value='/public/Samples/Reports/02._Sales_Mix_by_Demographic_Report'>02. Sales Mix by Demographic Report</option>
  <option value='/public/Samples/Reports/03._Store_Segment_Performance_Report'>03. Store Segment Performance Report</option>
  <option value='/public/Samples/Reports/04._Product_Results_by_Store_Type_Report'>04. Product Results by Store Type Report</option>
  <option value='/public/Samples/Reports/AllAccounts'>05. Accounts Report</option>
  <option value='/public/Samples/Reports/5g.AccountsReport'>05g. Accounts Report</option>
  <option value='/public/Samples/Reports/ProfitDetailReport'>06. Profit Detail Report</option>
  <option value='/public/Samples/Reports/06g.ProfitDetailReport'>06g. Profit Detail Report</option>
  <option value='/public/Samples/Reports/RevenueDetailReport'>07. Revenue Detail Report</option>
  <option value='/public/Samples/Reports/07g.RevenueDetailReport'>07g. Revenue Detail Report</option>
  <option value='/public/Samples/Reports/08.UnitSalesDetailReport'>08. Unit Sales Detail Report</option>
  <option value='/public/Samples/Reports/08g.UnitSalesDetailReport'>08g. Unit Sales Detail Report</option>
  <option value='/public/Samples/Reports/9.CustomerDetailReport'>09. Customer Detail Report</option>
  <option value='/public/Samples/Reports/9g.CustomerDetailReport'>09g. Customer Detail Report</option>
  <option value='/public/Samples/Reports/State_Performance'>10. Performance By Store Type</option>
  <option value='/public/Samples/Reports/10g.PerformanceByStoreType'>10g. Performance By Store Type</option>
  <option value='/public/Samples/Reports/SalesByMonthReport'>11. Sales By Month...

CSS

table {
  width: 100%;
}

JavaScript

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

  var url = $("#report").val();

  function renderReport(url) {
    var report = v.report({
      resource: url,
      container: "#container",
      error: function(error) {
        console.log(error);
      },
      success: function(ada) {
        console.log("Data param");
        console.log(ada);
      }
    });

    var inputControls = v.inputControls({
      resource: url,
      container: "#inputContainer",
      error: function(err) {
        console.error(err);
      }
    });
  }
  renderReport(url);



  $("#report").change(function() {
    renderReport($("#report").val());
  });


});