How do I create filter dropdowns (incl. time series menu or date picker)?

A filter drop down menu can be integrated into a report so that the user can "play" with the data and quickly filter different target groups.

Example:

Step 1: Create report or select a saved report

Step 2: Open report settings

Step 3:

A defined filter drop-down menu can be set for each tab. A type code must be written for this, which must be saved in the respective tab selection.

Step 4: Create code

Example:

[{"name": "Country", "color": "#fff", "filter": 431, "multiple": true},{"reset": "Reset all filters"}]

Explanation: 

"name": "Country" - description of the dropdown

"color": "#fff" - frame color of the box, is optional and can be omitted 

"filter": 431 - row ID of the variable, which is used for the dropdown selection

"multiple": true - only when multiple selection is available

{"reset": "Reset all filters"} - dropdown field, to be used to simultaneously remove all filters

Any number of dropdown filters can be lined up, for example:

[{"name": "Country", "color": "#fff", "filter": 3, "multiple": true},{"name": "Group", "color": "#fff", "filter": 7},{"name": "Gender", "color": "#fff", "filter": 10}, {"name": "Age", "color": "#fff", "filter": 16, "multiple": true }, {"name": "Social Media", "color": "#fff", "filter": 352, "multiple": true }, {"reset": "Reset all filters"}]

The code can be checked here: https://jsonformatter.curiousconcept.com/

Multiple selection:

the values selected in the dropdown menu are linked with OR and the total value is displayed.

Example:

[{"name": "Country", "filter": 431, "multiple": true}, {"reset": "Reset all filters"}]  

Result: A total value across all selected countries (country = country1 OR country2 OR country3,...) is formed.

Set default filter

A default filter can also be set by adding "default" : row ID to the code.

Example:

[{"name": "Country", "filter": 431, "default": 432}]

In the case of benchmark filters in particular, it can make sense to set several instances of a filter variable as default. This is also possible:

[{"name": "Country", "filter": 431, "type":"benchmark", "default": "432,433"}]

Default values can also be deselected by users in the dashboard. As soon as no other value is selected, the default value is displayed again.

Benchmark-Dropdown

Each value selected in the drop-down menu is displayed as a single column/row (target group split).

Example Dropdown-Definition:

[{"name": "Country", "filter": 431, "type": "benchmark"}, {"reset": "Reset all filters"}]  

Result: Each country is represented as a single column/row (target group split).

Drop-down filters of the "Benchmark" type can also be created with multiple selections ("multiple":true). In this case, as with the standard drop-down filter, the individual selected features of the drop-down menu are linked with OR and the total value is inserted into the chart as a column/row. If you create a second benchmark dropdown filter, the selection of this filter will be inserted as the second/third/... column/row in the charts.

[{"name": "16benchmarkmultipletrue", "filter": 16, "multiple": true, "type":"benchmark","multiple":true},{"name": "19benchmarkmultipletrue", "filter": 19, "type":"benchmark","multiple":true}]

Please note: benchmark filters (bf) and benchmark subfilters (bsf) are indexed by order in a dashboard's dropdown definition, starting from 0 (e.g. bf_0, bf_1, bf_2, etc.). All objects {} in the dropdown definition (even the non-benchmark filter objects, e.g. also {"delete": xx}) are a part of the dropdown definition order.

If you want to inherit active bf and bsf filters when switching to another dashboard, the same filter objects must also be defined on the target dashboard and they must also be defined in the same order as on the original dashboard.

Use benchmark dropdown filters in tables as sub-filters

The "Datatable" chart type is the only chart in DataLion that has the option of defining filters as "sub-filters". This creates a chart header with two levels. These double-header tables can also be created with dropdown filters. When using dropdown filters of the "Benchmark" type with the additional parameter "datatable":"subfilter", the values selected in the dropdown menu will be inserted not as filters, but as sub-filters in charts of the "datatable" type (table chart).

Example Dropdown-Definition:

[{"name": "Sub-Benchmark-Filter", "filter": 19, "type": "benchmark", "datatable": "subfilter"}]

Drop-down menu with the target groups from the target group editor

Target group dropdown menus can now also be created from the Target group Editor. For this purpose, the parameter “filter”: “user” is set in the dropdown definition.

Example Dropdown-Definition:

[{"filter": "user"}]

Set the base display in tables via a dropdown menu

The dropdown menu with the parameter "type": "base" can be used to determine which value should be displayed in the "Base" column of the chart type table.

Example Dropdown-Definition:

[{"name": "Base", "filter": 19, "type": "base"}]

Show only certain values of a filter variable in the dropdown menu

In order to display only a selection of the values of a variable in the dropdown menu, the "filter" parameter is not defined in the code. Instead, the individual values are defined with the "values" parameter.

Example:

[{"name": "Country", "values": [{"name":"Country1","filter": 20},{"name":"Country3","filter": 22}]}]

Do not apply dropdown filters when switching to another dashboard

By default, the selected dropdown filters of a dashboard are applied when you switch to another dashboard of the report. This can be prevented as follows:

Option 1: Generally prevent inheritance of the dropdown filter selection via dashboards of a report.

In the report settings at the bottom under Options choose "Apply filters to only to current tab" and save.

Option 2: Define inheritance of a dropdown filter when switching dashboards for a specific filter.

For this purpose, the information "scope": "tab" (or, if applicable, "scope": "report") is added to the code of the filter.

"scope": "tab" --> The filter is not applied when switching to another dashboard of the report.

"scope": "report" --> The filter is applied when you switch to another dashboard of the report.

Example:

[{"name": "Country", "filter": 431, "scope": "tab"}]

Delete a specific dropdown filter on a dashboard

Generally disallow a specific dropdown filter on a specific dashboard: If you do not want a dropdown filter to operate on a specific dashboard at all, you can use the "delete" parameter in the dashboard's dropdown filter code.

Example: 

[{"delete": ["5","18"]},{"name": "Country","filter": 431}]

On the dashboard with this code, the Row_ID 5 and 18 of a dropdown filter are automatically reset.

Use the Row_ID of the codebook question to have all values of this codebook question deleted from a dashboard or use the Row_ID of a single value to have only this value deleted.

Date picker or time series menu

For time series analyses, a dropdown field for selecting the time window can be integrated.

Example:

Example:

 [{"name": "Time period", "date": true, "ranges": ["currentWeek", "currentMonth", "currentQuarter", "currentYear"]}, {"reset": "Reset all filters"}]

The code can be checked here: https://jsonformatter.curiousconcept.com/

Explanation:

"name": "Time period" - description of the dropdown

"date": true, "ranges" - dropdown filter will be made to datepicker

"currentWeek", "currentMonth", "currentQuarter", "currentYear" - selection of selectable time periods.

With "time": true a time can also be selected in the date picker (date time picker).

Possible periods (definition of the labels): "ranges"

today: "today"

yesterday: "yesterday"

last 7 days: "7days"

30 days: "30days"

current week: "currentWeek"

last week: "lastWeek"

current month: "currentMonth"

last month: "lastMonth"

current quarter: "currentQuarter"

last quarter: "lastQuarter"

current year: "currentYear"

last year: "lastYear"

all dates: "all"

With the addition maximumDate: "today" the current day is included in the period "all".

Example:

[{"name": "Time period", "date": true, "time": true, "maximumDate": "today", "ranges": ["all","currentWeek", "currentMonth", "currentQuarter", "currentYear"]}, {"reset": "Reset all filters"}]

Possible default/standard settings: "date"

"minimumDate": "2016-01-01" <- sets the start time to January 1, 2016 if you select the entire period.

"defaultRange": "all" <- sets the starting default to all period (if the option is omitted, it is the last week).

Example: {"name": "Date", "date": true, "defaultRange": "all", "minimumDate": "2017-03-01","ranges": ["all","currentMonth", "currentQuarter", "currentYear"]}, {"reset": "Reset all filters"}]