JSFiddle - React, Tailwind, and code Playground

by juliia13

HTML

<script src='http://localhost:8080/jasperserver-pro/client/visualize.js'></script>
<table class="sample">
<tr>
<td id="container1"></td>
<td id="container2"></td>
</tr>
<tr>
<td id="container3"></td>
<td id="container4"></td>
</tr>
</table>

CSS

html, body {
} table.sample {
width: 100%;
} td#c1, td#c2, td#c3, td#c4 {
width: 50%;
}

JavaScript

visualize({
auth: { 
name : "jasperadmin",
password: "jasperadmin"
}
}, function (v) {
var reportsToLoad = [
"/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
"/public/Samples/Reports/ProfitDetailReport",
"/public/Samples/Reports/State_Performance",
"/public/Samples/Reports/AccountList"

];
$.each(reportsToLoad, function (index, uri) {
var container = "#container" + (index + 1);
v(container).report({
resource: uri,
success: function () {
console.log("loaded: " + (index + 1));
},
error: function (err) {
alert(err.message);
}
});
});
});