Visualize: Export with CSV and render

Export with CSV and render

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<!--Provide container to render your visualization-->
<div id="container"></div>

CSS

body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    }

svg text {
    font-size: 12px;
}

rect {
    shape-rendering: crispEdges;
}

.mainrect {
    fill-opacity: 0;
    stroke-width: 0.5;
    stroke: black;
    stroke-opacity: 0;
    shape-rendering: auto;
}

    .mainrect.selected {
        stroke-opacity: 1;
    }

.barlabel, .barvalue, .barpercent {
    font-weight: normal;
}

.barpercent {
    fill: grey;
}

    .barlabel.selected,
    .barvalue.selected,
    .barpercent.selected {
        font-weight: bold;
    }

.header {
    font-size: 15px;
    text-anchor: middle;
    font-weight: bold;
}

    .header text {
        fill: grey;
    }

JavaScript

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
}, function (v) {
        report = v.report({
            resource: "/public/Samples/Reports/AllAccounts",

            success: exportCsv,

            error: errorHandler
        });
});

function exportCsv () {
    report.export({        
        outputFormat: "csv"
    }, function (link, request) {
        request()
        .done(parseData)
        .fail(errorHandler);
        
    }, errorHandler);
}

function parseData(data) {
    
   console.log(arguments);   
}

function accessor(row, index) {
    var cleaned = [];
    if (row[8][0] === "$") {
        cleaned.push(
            //row[0],
            //row[2],
            row[4],
            row[7],
            +row[8].slice(2),
            +row[9].slice(2)
        );
        return cleaned;
    } else if (row[6][0] === "$" && row[3] !== "") {
        cleaned.push(
            //row[0],
            //row[1],
            row[3],
            row[5],
            +row[6].slice(2),
            +row[7].slice(2)
        );
        return cleaned;
    } else {
        return null;
    }

}

function drawD3Chart (data) {
    
    var data = [ 
        {data:bP.partData(data,2), id:'Sales', header:["Channel","State", "Sales"]},
        {data:bP.partData(data,3), id:'Cost', header:["Channel","State", "Cost"]}
    ];
        
    bP.setOptions({
            colors: ["#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#0099C6"],
            labelColumn: [-195, 30],
            valueColumn: [-40, 149], //(count (%)) first value is left position x, second value is right position x
            barpercentColumn: [0, 185], //Column positions of labels.
            headerX: 90,
            headerY: -20,
            transitionWidth: 130,
            height: 600,
            sortbyKey: false,
            barlabelFontSize: "12",
            barValueFontSize: "10",
            barPercentFontSize:...