JSFiddle - React, Tailwind, and code Playground

by bkalanta

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<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",
                    organization: "organization_1"
                }

}, function (v) {
var reportsToLoad = [
"/public/Samples/Reports/AllAccounts",
"/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
"/public/Samples/Reports/Cascading_Report_2_Updated",
"/public/Samples/Reports/07g.RevenueDetailReport"
];
$.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);
}
});
});
});