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"></script>
<select id="selected_resource" disabled="true" name="report">
<option value="/public/viz/Adhoc/shipping_charge_by_country">Shipping charge by country (default chart)</option>
<option value="/public/viz/Adhoc/shipping_charge_by_country_and_city">Shipping Charge by Country and City (default table)</option>
</select>
<button class="refresh">Refresh</button>
<!--Provide container to render your visualization-->
<div id="container" style="height: 400px;position: relative"></div>
JavaScript
//run with console open to see full results
visualize({
auth: {
name: "jasperadmin",
password: "jasperadmin",
organization: "organization_1"
}
}, function(v) {
var adv;
function renderView(uri) {
adv = v.adhocView({
resource: uri,
container: "#container",
//change params and refresh to see results
params: {
ShipCountry_1: ["Argentina", "Austria", "Belgium", "Brazil", "Canada", "Denmark", "Finland"],
},
success: function() {
//this shows the available filters for params in the console
console.log(adv.data().metadata.inputParameters);
},
error: function() {
alert("error");
console.log(arguments);
}
});
}
//render initial view
renderView($("#selected_resource").val());
$("#selected_resource").change(function() {
//clean container
$("#container").html("");
//render selected view
renderView($("#selected_resource").val());
});
//enable report chooser
$(':disabled').prop('disabled', false);
//show error
function handleError(err) {
alert(err.message);
}
//refresh method
$(".refresh").on("click", function () {
adv.refresh().done(function () {
console.log("refresh run");
}).fail(function () {
console.log(arguments);
});
});
});