Visualize: Export with JSON and render

Export with JSON and render

by Pavel Savushchyk

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://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="http://build-master.jaspersoft.com:7980/jrs-pro-bugfix/client/visualize.js?_opt=true"></script>


<!--Provide container to render your visualization-->
<div id="container"></div>

JavaScript

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        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);
}

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) {
             // Operate on all the axis text
             axis.shapes.selectAll("text")
             .each(function (d) {
                 // Remove all but the nth label
                 if (del % oneInEvery !== 0) {
                    ...