<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<link href="https://cdn.webdatarocks.com/latest/theme/lightblue/webdatarocks.min.css" rel="stylesheet"/>
<div id="wdr-container"></div>
var pivot = new WebDataRocks({
container: "#wdr-container",
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
slice: {
rows: [{
uniqueName: "Category"
},
{
uniqueName: "Business Type"
}
],
columns: [{
uniqueName: "Measures"
}],
measures: [{
uniqueName: "Price",
aggregation: "sum",
format: "currency"
},
{
uniqueName: "Quantity",
aggregation: "sum"
},
{
uniqueName: "Price * Quantity",
formula: "sum(\"Price\") * sum(\"Quantity\") ",
individual: true,
caption: "Overall Price (Price x Quantity)",
format: "currency"
}
],
expands: {
rows: [{
tuple: [
"Category.Accessories"
]
}]
}
},
formats: [{
name: "currency",
currencySymbol: "$",
currencySymbolAlign: "left",
thousandsSeparator: ",",
decimalPlaces: 2
}]
},
width: "100%",
height: 430,
toolbar: true
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.