<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<table><tr><td style="width: 750px;"><div id="wdr-component"></div></td>
<td><div id="googlechart-container" style="width:400px;height:450px;"></div></td></tr></table>

#wdr-pivot-view #wdr-grid-view div[hierarchy="Business Type"][member="Specialty Bike Shop"] {
  background-color: #3366cc;
}
#wdr-pivot-view #wdr-grid-view div[hierarchy="Business Type"][member="Value Added Reseller"] {
  background-color: #dc3912;
}
#wdr-pivot-view #wdr-grid-view div[hierarchy="Business Type"][member="Warehouse"] {
  background-color: #ff9900;
}

var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    height: 450,
    customizeCell: customizeCellFunction,
    report: {
        dataSource: {
            filename: "https://cdn.webdatarocks.com/data/data.csv"
        },
        formats: [{
            maxDecimalPlaces: 2
        }],
        slice: {
            rows: [{
                "uniqueName": "Business Type"
            }],
            columns: [{
                "uniqueName": "Country"
            }],
            measures: [{
                "uniqueName": "Price",
                "aggregation": "average"
            }]
        }
    },
    reportcomplete: function() {
        pivot.off("reportcomplete");
        pivotTableReportComplete = true;
        createGoogleChart();
    }
});
var pivotTableReportComplete = false;
var googleChartsLoaded = false;

google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(onGoogleChartsLoaded);

function onGoogleChartsLoaded() {
    googleChartsLoaded = true;
    if (pivotTableReportComplete) {
        createGoogleChart();
    }
}

function createGoogleChart() {
    if (googleChartsLoaded) {

        pivot.googlecharts.getData({
                type: "pie"
            },
            drawChart,
            drawChart
        );
    }
}

function drawChart(_data) {
    var data = google.visualization.arrayToDataTable(_data.data);

    var options = {
        title: "Average Price of Business Type Products",
        legend: {
            position: 'right'
        },
        is3D: true
    };

    var chart = new google.visualization.PieChart(document.getElementById('googlechart-container'));
    chart.draw(data, options);
}



function customizeCellFunction(cell, data) {
    if (data.rows) {
        for (var i = 0; i < data.rows.length; i++) {
            if (data.rows[i]["hierarchyCaption"] == "Business Type" && data.rows[i]["caption"] == "Specialty Bike Shop") {
                cell.attr["hierarchy"] = data.rows[i]["hierarchyCaption"];
                cell.attr["member"] = data.rows[i]["caption"];
            } else if (data.rows[i]["hierarchyCaption"] == "Business Type" && data.rows[i]["caption"] == "Value Added Reseller") {
                cell.attr["hierarchy"] = data.rows[i]["hierarchyCaption"];
                cell.attr["member"] = data.rows[i]["caption"];
            } else if (data.rows[i]["hierarchyCaption"] == "Business Type" && data.rows[i]["caption"] == "Warehouse") {
                cell.attr["hierarchy"] = data.rows[i]["hierarchyCaption"];
                cell.attr["member"] = data.rows[i]["caption"];
            } 
        }
    }
}