Export with JSON and render

Export JSON data from a report and render with a custom visualization.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.js"></script>
<script src="https://rawgit.com/zigfred/dimple/master/dist/dimple.v2.1.2tmp.js"></script>
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

<!--Provide a container to render your visualization-->
<div id="container"></div><!--Show a loading indicator during render-->
<div id="loader"><h3>Loading report data...</h3></div>
<div id="build" style="display:none"><h3>Building visualization...</h3></div>

CSS

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

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

h3 {
  position: relative;
  top: 50px;
  
  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) {
        report = v.report({
            resource: "/public/viz/04._Product_Results_by_Store_Type_Report",

            success: exportJson,

            error: errorHandler
        });
});

function exportJson () {
    report.export({        
        outputFormat: "json",
        //pages: "1-5"
    }, function (link, request) {
        request({
            dataType: "json" 
        })
        .done(parseData)
        .fail(errorHandler);
        
    }, errorHandler);
    //Remove custom loading indicator once data has successfully loaded
    document.getElementById("loader").style.display = "none";
    //Add indicator for D3 build
    document.getElementById("build").style.display = "inline";
}

function parseData(data) {
    //console.log("result: ", data)

    drawD3Chart(data);        
}



function drawD3Chart (data) {
    var width = 1100,
        height = 700;
    var svg = dimple.newSvg("#container", width, height);
    
    var myChart = new dimple.chart(svg, data);
        myChart.setBounds(75, 30, width-90, height-70);
    
        myChart.addMeasureAxis("x", "store_cost");
    
        var yAxis = myChart.addCategoryAxis("y", "store_sales")
    
        var zAxis = myChart.addMeasureAxis("z", "unit_sales");
        zAxis.overrideMax = 400;
    
        myChart.addSeries("recyclable", dimple.plot.bubble);

        myChart.addLegend(180, 10, 360, 20, "right");
        myChart.draw();
    
        cleanAxis(yAxis, 30)
    
}

function errorHandler(error) {
    console.log(error);
}

function cleanYAxis(axis) {
    
}

 var cleanAxis = function (axis, oneInEvery) {
     // This should have been called after draw, otherwise do nothing
     if (axis.shapes.length > 0) {
         // Leave the first label
         var del = false;
         // If there is an interval set
         if (oneInEvery > 1) {
             //...