JSFiddle - React, Tailwind, and code Playground

by juliia13

HTML

<!--Provide visualize.js from your jasperreport server-->
<script src='http://localhost:8080/jasperserver-pro/client/visualize.js'></script>

<!--Provide container to render your visualization-->
<div id='description'>
<button id="changeChartType"> Change chart type to Percent Column

</button>
<button id="resetAll"> Reset

</button>
<br><br><br>

</div>
<div id="container"></div>

CSS

#container {
    border: 1px solid black;
}
button {
  width:250px;
  height: 40px;
}

JavaScript

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin"
    }
}, function (v) {

    
    var report = v.report({ 
        resource: "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
                    
        error: handleError, 
        
        success:function(data){  
               console.log(data)
        },
        container: "#container" 
    });
    
   // console.log(v.report.chart.types)
   $("#changeChartType").on("click", function () {

            report.updateComponent( {
             chartType: "StackedPercentColumn"
                }).fail(handleError);
                });
   
    $("#resetAll").on("click", function(){
       report.undoAll();
            });
    
    function handleError(err) {
        alert(err.message); 
    }

});