<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<link href="https://cdn.webdatarocks.com/latest/theme/lightblue/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>

<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
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.