Dashboard Drilldown

by Stas_P

HTML

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

<!-- JQuery - Latest compiled and minified -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div id="container">
    <div id="dashboard">
      <div><p>Loading...</p></div>
    </div>
</div>

CSS

#container {
    width: 1110px;
    height: 630px;
}

/* You can replace the following with your own custom loading indicator */
@import "compass/css3";

@keyframes fadeIn { 
  from { opacity: 0; } 
}

p {
  position: relative;
  top: 50px;
  right: 250px;
  
  font: italic bold 1.2em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  
  animation: fadeIn 1s infinite alternate;
}

JavaScript

visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, function (v) {

    //render report from provided resource
    v("#container").dashboard({
        resource: "/public/VisualizeTestDashboard",
        params: {
        	created_date_1: "2017-12-02T00:00:00",
        },
        error: handleError
    });

    //show error
    function handleError(err) {
        alert(err.message);
    }
    
    function readFieldValue() {
    	
    }
});