JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<h3>Report with title</h3>
<div id="container-report-with-title"></div>
<h3>Report without title</h3>
<div id="container-report-without-title"></div>
<h3>Reports without titles by default in dashboard, but dashboard dashlets have titles</h3>
<div id="container-dashboard"></div>
CSS
#container-report-with-title {
height: 500px;
}
#container-report-without-title {
height: 500px;
}
#container-dashboard {
height: 500px;
}
JavaScript
visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function (v) {
v("#container-dashboard").dashboard({
resource: "/public/Samples/Dashboards/3.3_Expense_Metrics",
error: function(e) {
alert(e);
}
});
v("#container-report-with-title").report({
resource: "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
showAdhocChartTitle: true
});
v("#container-report-without-title").report({
resource: "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
showAdhocChartTitle: false
});
});