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'>
<p>Select chart id</p>

<select id='Chart'></select>
<p>Select chart type</p>
<select id='ChartType'></select>

<br> <br>

<input type='submit' id='apply' value='Apply'>  
<br>
<br>
</div>
<div id="container"></div>

CSS

#container {
    border: 1px solid black;
}
button {
  width:100px;
  height: 20px;
}

JavaScript

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

    
    var report = v.report({ 
        resource: "/public/Samples/Reports/9.CustomerDetailReport",
        
       
                    
        error: handleError, 
        
        success:function(data){  
             
             // console.log(data.components)
               
                 components = report.data().components;
              
                // console.log(components);
                 
               for (var i = 0; i < components.length; i++) {
               if(components[i].componentType == "chart") {
                $('#Chart').append(  '<option>' +  components[i].id+ ' </option>')
               
               };
    
                
                  };
                
                  
            for (var i=0; i < v.report.chart.types.length; i++){
  $('#ChartType').append ( '<option>' +   v.report.chart.types[i] + ' </option>')
                 
   };
        },
        
        container: "#container" 
        
    });
    
  
    
   // console.log(v.report.chart.types)
   $('#apply').on("click", function () {
  
    
//console.log(components[0].id);
            report.updateComponent( $('#Chart').val(),   {
            
                chartType: $('#ChartType').val()
                }).fail(handleError);
                });
                
   
    $("#resetAll").on("click", function(){
       report.undoAll();
            });
    
    function handleError(err) {
        alert(err.message); 
    }

});