Pivot Table.js - Filter default value

Question

I am implementing on my page a pivot table similar to this:

https://jsfiddle.net/nicolaskruchten/w86bgq9o/

I have the following question.

Whereas the values of the Pivot Table field sex comes as default marked, in case Female and Male.

How do I set a default value to be marked as a filter for the field sex, in the case of the first item in the list of options (Female)?

Note: I tried to insert the link images, however stackoverflow shows as forbidden format to upload

html:

<div id="output"></div>

css:

body {
  font-family: Verdana;
}

Javascript + jQuery 1.11.0:

$("#output").pivotUI(
  $.pivotUtilities.tipsData, {
    rows: ["sex", "smoker"],
    cols: ["day", "time"],
    vals: ["tip", "total_bill"],
    aggregatorName: "Sum over Sum",
    rendererName: "Heatmap"
  });

Answer 1

To pre-fill the filter menus you can use the option inclusions. The code goes like this:

$("#output").pivotUI(
  $.pivotUtilities.tipsData, {
    rows: ["sex", "smoker"],
    cols: ["day", "time"],
    vals: ["tip", "total_bill"],
    aggregatorName: "Sum over Sum",
    rendererName: "Heatmap",
    inclusions: {
      sex:["Female"]
    }
  });

body {
  font-family: Verdana;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.13.0/pivot.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.13.0/pivot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.6.0/tips_data.min.js"></script>

<div id="output"></div>