JSFiddle - React, Tailwind, and code Playground

by Yuriy Bablyukh

HTML

<script src="http://192.168.88.235:8080/jasperserver-pro/client/visualize.js"></script>
<div id="report1"></div>
<div id="report2"></div>
<div id="report3"></div>
<div id="report4"></div>
<div id="report5"></div>
<div id="report6"></div>

CSS

#report1 {
    height: 600px;
}

JavaScript

visualize({
        auth: {
            name: "superuser",
            password: "superuser"
        }
    },
    function (v) {
        v.report({
            resource: "/public/Samples/Reports/Cities",
            container: "#report1",
            error: function (err) {
                alert("Report 1: " + err.message);
            }
        });
        
        v.report({
            resource: "/public/Samples/Reports/States",
            container: "#report2",
            error: function (err) {
                alert("Report 2: " + err.message);
            }
        });
        
        v.report({
            resource: "/public/Samples/Reports/02._Sales_Mix_by_Demographic_Report",
            container: "#report3",
            error: function (err) {
                alert("Report 3: " + err.message);
            }
        });
        
        v.report({
            resource: "/public/Samples/Reports/03._Store_Segment_Performance_Report",
            container: "#report4",
            error: function (err) {
                alert("Report 4: " + err.message);
            }
        });
        
        v.report({
            resource: "/public/Samples/Reports/06g.ProfitDetailReport",
            container: "#report5",
            error: function (err) {
                alert("Report 5: " + err.message);
            }
        });
    }
);