JSFiddle - React, Tailwind, and code Playground

by juliia13

HTML

<script src='http://localhost:8080/jasperserver-pro/client/visualize.js'></script>

<!--Provide container to render your visualization-->
<div id='description'>

<select id='allReports'>

</select>


<button id='embed'>Embed

</button>

<br>

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

CSS

#container {
    border: 1px solid black;
}

JavaScript

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

 var search = v.resourcesSearch({
    folderUri: "/",
    recursive: true,
    types: ['reportUnit'],
    success: function(repo) {
      console.log(repo); 
      
      for (var i=0; i < repo.length; i++ ){
      $('#allReports').append(' <option>' + repo[i].uri + '</option>');
         
      
      }
   
      
    },
    error: function(data){
    	console.log(data);
    }
    
   
     
    
  });
  
  

    $("#embed").on("click", function () {
    
    
    var report = v.report({ 
        resource: $('#allReports').val(), 
        error: handleError, 
        success:function(data){  
        
        $("#description").append("<p> <b>Report</b>: 01._Geographic_Results_by_Segment_Report </p>");
         $("#description").append("<p> <b>Type</b>: " + data.components[0].componentType + " </p>");
           $("#description").append("<p> <b>Chart Type</b>: " + data.components[0].chartType + " </p>");
             $("#description").append("<p> <b>Id</b>: " + data.components[0].id + " </p> <br>");
           
           	
          
        },
        container: "#container" 
    });
  
    
    function handleError(err) {
        alert(err.message); 
    }


      
    
    })
    
  
});