Visualize: Embed report

Visualize: Embed report

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'>

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

CSS

#container {
    border: 1px solid black;
}

JavaScript

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin"
    }//this part for user able login 
}, function (v) {

    
    var report = v.report({ //this function for embed report into container
        resource: "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report", //report path
        error: handleError, //function that will executed if we will have any error 
        success:function(data){  //this function will executed if all ok and returned 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>");
           
        
        	//console.log(data); //write error in console
          
        },
        container: "#container" //css location of container for ember report
    });
   // console.log(v.report.chart.types);
    
    function handleError(err) {
        alert(err.message); //show error in alert
    }

});