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="https://localhost:8443/jasperserver-pro/client/visualize.js?_opt=true"></script>

<select id="chartType"></select>
<button id="undo" disabled="disabled">Undo</button>
<button id="redo" disabled="disabled">Redo</button>
<button id="undoAll" disabled="disabled">Undo All</button>
<!-- Provide a container for the report -->
<div id="container"></div>

CSS

.control {
  display: block;
}

.control.input.text>.wrap {
  display: block;
}

.control>input {
  width: 360px;
}

.error,
.logout {
  color: red;
}

.success {
  color: green;
}

.message {
  display: none;
}

.button {
  height: 35px;
  width: 200px;
  border: thin solid black;
  padding: auto;
  display: inline-block;
  margin: 5px;
}

.disabled {
  border-color:  !important #777;
  background-color: #BBB;
}

.selected {
  border-color: red
}

JavaScript

visualize({
  auth: {
    name: "jasperadmin",
    password: "jasperadmin",
    organization: "organization_1"
  }
}, function(v) {


  var chartComponent,
    report = v.report({
      resource: "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
      container: "#container",
      events: {
        canUndo: function(canUndo) {
          if (canUndo) {
            $("#undo, #undoAll").removeAttr("disabled");
          } else {
            $("#undo, #undoAll").attr("disabled", "disabled");
          }
        },
        canRedo: function(canRedo) {
          if (canRedo) {
            $("#redo").removeAttr("disabled");
          } else {
            $("#redo").attr("disabled", "disabled");
          }
        }
      },
      success: function(data) {
        chartComponent = data.components.pop();
        $("option[value='" + chartComponent.chartType + "']").attr("selected", "selected");
      }
    });
    
  var chartTypeSelect = buildChartTypeSelect(v.report.chart.types);
  
  chartTypeSelect.on("change", function() {
    report.updateComponent(chartComponent.id, {
        chartType: $(this).val()
      })
      .done(function(component) {
        chartComponent = component;
      })
      .fail(function(error) {
        console.log(error);
        alert(error);
      });

  });
  $("#undo").on("click", function() {
    report.undo().fail(function(err) {
      alert(err);
    });
  });
  $("#redo").on("click", function() {
    report.redo().fail(function(err) {
      alert(err);
    });
  });
  $("#undoAll").on("click", function() {
    report.undoAll().fail(function(err) {
      alert(err);
    });
  });
  
  
  
});


function buildChartTypeSelect(chartTypes) {
  	console.log(chartTypes);
    chartTypeSelect = $("#chartType");
    $.each(chartTypes, function(index, type) {
      chartTypeSelect.append("<option>" + type + "<option/>");
    });
    return chartTypeSelect;
}