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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.