<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"];
}
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.