Adding filters, indicators, and sliders
Special note about filter, indicator, and slider parameters: Each filter/indicator/slider parameter must be appended with an integer. For instance: filter1, filter2, filter3, ... filterN; slider1, slider2, slider3, ... sliderN. In the code, filter/indicator/slider parameters do not need to be in numerical order. The order of the filter/indicator/slider parameters in the code will specify the order of the filters/indicator/sliders in the application.
filterN
Description: A filter searches on text-based data and shows only the cells that match the criteria.
Value: check|{control_type}|{position_info}|{label_info}|{check_flag}| {control_bgcolor}|{control_group}|{initial_option}|{filter_spec-select} OR {filter_spec-text}
| {control_type} | Dictates the type of filter to be created: 1. list.multi - creates a multi-select list 2. combo - creates a single-select dropdown box 3. text - creates a text search box |
|---|---|
| {position_info} | {x},{y},{w},{h} – See the table below for values: {x} Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. {y} Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. {w} Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. {h} When using list.multi, {h} specifies the number of items visible in the list at any time.* *When using list.multi, if the value of {h} is greater than the number of unique options, {h} will be automatically adjusted to match the number of unique options. i.e. the multi-select filter height will automatically resize, up until the number of lines specified by {h}, to fit the number of unique options. |
| {label_info} | Specifies the text that will appear as the label of the filter. {label_info} can be any string. If a caret (^) is used within the {label_info} field, all characters after the caret will be ignored. |
| {check_flag} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {control_bgcolor} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {control_group} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {initial_option} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {filter_spec-select} | Use when {control_type} = list.multi or combo The value of {filter_spec-select} is: AUTO_ENUM_LIST,{attribute} |
| {filter_spec-text} | Use when {control_type} = text The value of {filter_spec-text} is: {option_name},{operation},{invert_flag},{value_name}, {attribute1},{attribute2}, ... ,{attributeN} The following fields are not used in the current version of Flaremap JS. Any value may be entered, or they can be left blank: {option_name} {operation} {invert_flag} {value_name}, |
| {attribute} | Any attribute from “CSV_DataTypes.cells” that has TEXT properties. When {control_type} = list.multi or combo the attribute must also have ENUM properties. This is the attribute(s) that will be filtered on. |
Examples:
"filter1": "check|text|-|Search|-|-|-|-|-,-,-,-,Industry,Sector",
"filter2": "check|list.multi|,,,6|Industry|-|-|-|-|AUTO_ENUM_LIST,Sector",
"filter3": "check|combo|-|Region|-|-|-|-|AUTO_ENUM_LIST,Sales_Region",
Special note about text search: The text search filters support the use of conditional operators for advanced searching. In addition, specific phrases can be matched by surrounding the phrase in double quotes (e.g. "phrase here"). The conditional operators supported are: and, or, not, -. “Not” and “-“ have the same meaning. Conditional operators are case insensitive. If a conditional operator is used inside of a phrase (e.g. "this phrase or that phrase"), the conditional operator is ignored.
indicatorN
Description: An indicator highlights cells that match the criteria by placing a small indicator icon on each matching cell.
Value: check|{control_type}|{position_info}|{label_info}|{check_flag}|{control_bgcolor}| {icon_location}|{control_group}|{initial_option}|{indicator_spec-select} OR {indicator_spec-text}
| {control_type} | Dictates the type of indicator to be created: 1. list.multi - creates a multi-select list 2. combo - creates a single-select dropdown box 3. text - creates a text search box |
|---|---|
| {position_info} | {x},{y},{w},{h} – See the table below for values: {x} Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. {y} Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. {w} Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. {h} When using list.multi, {h} specifies the number of items visible in the list at any time.* *When using list.multi, if the value of {h} is greater than the number of unique options, {h} will be automatically adjusted to match the number of unique options. i.e. the multi-select indicator height will automatically resize, up until the number of lines specified by {h}, to fit the number of unique options. |
| {label_info} | Specifies the text that will appear as the label of the indicator. {label_info} can be any string. If a caret (^) is used within the {label_info} field, all characters after the caret will be ignored. |
| {check_flag} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {control_bgcolor} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {icon_location} | Specifies the location of the indicator icon on the face of cell. Accepts any of the following two-letter values listed in italics below: tl - top left tr - top right br - bottom right bl - bottom left ct – top center |
| {control_group} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {initial_option} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {indicator_spec-select} | Use when {control_type} = list.multi or combo The value of {indicator_spec-select} is: AUTO_ENUM_LIST,{attribute},{icon_path} |
| {indicator_spec-text} | Use when {control_type} = text The value of {indicator_spec-text} is: {option_name},{operation},{invert_flag},{value_name}, {icon_path},{attribute1},{attribute2}, ... ,{attributeN} The following fields are not used in the current version of Flaremap JS. Any value may be entered, or they can be left blank: {option_name} {operation} {invert_flag} {value_name}, |
| {attribute} | Any attribute from “CSV_DataTypes.cells” that has TEXT properties. When {control_type} = list.multi or combo the attribute must also have ENUM properties. This is the attribute(s) that will be searched. |
| {icon_path} | Specifies the location of the indicator icon image file. |
Examples:
"indicator1": "check|text|-|Search Indicator|-|-|tr|-|-|-,-,-,-, images/indicator_yellow.gif,Industry,Sector",
"indicator2": "check|list.multi|,,,6|Industry|-|-|br|-|-| AUTO_ENUM_LIST,Sector,images/indicator_yellow.gif",
"indicator3": "check|combo|-|Region|-|-|bl|-|-| AUTO_ENUM_LIST,Sales_Region, images/indicator_yellow.gif",
Special note about text search: The text search indicators support the use of conditional operators for advanced searching. In addition, specific phrases can be matched by surrounding the phrase in double quotes (e.g. "phrase here"). The conditional operators supported are: and, or, not, -. “Not” and “-“ have the same meaning. Conditional operators are case insensitive. If a conditional operator is used inside of a phrase (e.g. "this phrase or that phrase"), the conditional operator is ignored.
sliderN
Description: A slider searches on numeric-based data and shows only the cells that match the criteria.
Value: {position_info}|{label_info}|{attribute}|{scale}[,{bar_grab_scale}]|{date_in},{date_out}| {min},{max}|{L},{R}|{fill}|{snapto}|{N/A setting}|{inset}|{sigDigits}|{barcolor},{labelcolor}| {loc,imagepath}|{subTicks}|{pollInterval}|{control_group}|{divider labels}|{fromX},{toX}, {label_multiplier},{label_prefix},{label_suffix}
| {position_info} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
|---|---|
| {label_info} | Specifies the text that will appear as the label of the filter. {label_info} can be any string. If a caret (^) is used within the {label_info} field, all characters after the caret will be ignored. |
| {attribute} | Any attribute from “CSV_DataTypes.cells” that has NUMBER properties. This is the attribute(s) that will be filtered on. |
| {scale}[,{bar_grab_scale}] | Specifies the scale applied to the range drawn on the slider control. A value of 1 (default value) will draw a linear range. A value of 2 will draw the first 25% of values over approximately the first 50% of the slider range. A value of 0 will be ignored. |
| {date_in},{date_out} | These entries specify how the slider is to handle dates, as opposed to ordinary numbers. This field can be left blank when date-formatted attributes are not being used. {date_in} defines how slider will parse dates which are used in {min},{max} parameters – this can be different than the format used in the database. {date_out} defines how slider will display the slider values as dates – this can be different than the format used in the database. See “Date Format” below this table for details on specifying the date format. |
| {min},{max} | Specifies the minimum and maximum values on the slider, defining its functional range. Values may be either numbers or the keywords “_MIN” or “_MAX”. A number may be used in combination with a keyword. If the _MIN keyword is used, the slider's minimum range value will automatically correspond to the minimum value from the data set. If the _MAX keyword is used, the slider's maximum range value will automatically correspond to the maximum value from the data set. |
| {L},{R} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {fill} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {snapto} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {N/A setting} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {inset} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {sigDigits} | Specifies the number of decimal places that the slider will display. Can be any positive integer. |
| {barcolor},{labelcolor} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {loc,imagepath} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {subTicks} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {pollInterval} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {control_group} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {divider labels} | Specifies the number of subticks displayed. This field cannot be left blank. See the table below for more details: Value # of subticks ,; 1 ,;,; 3 ,;,;,; 5 Nx[,;] Each additional [,;] will create 2 more subticks |
| {fromX} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {toX} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
| {label_multiplier} | Specifies a value to multiply the actual slider value by for display (for percentages, use 100: 0.24 becomes 24) |
| {label_prefix} | Specifies a prefix to prepend to the value. |
| {label_suffix} | Specifies a suffix to append to the value. |
Date Format
Description: Flaremap JS supports a wide range of date/time formats. To specify the date/time format use a pattern string made up of the following symbols.
| Symbol | Meaning | Presentation | Example |
|---|---|---|---|
| G | era designator | Text | AD |
| y | year | Number | 1996 |
| M | month in year | Text & Number | July & 07 |
| d | day in month | Number | 10 |
| h | hour in am/pm (1~12) | Number | 12 |
| H | hour in day (0~23) | Number | 0 |
| m | minute in hour | Number | 30 |
| s | second in minute | Number | 55 |
| S | millisecond | Number | 978 |
| E | day in week | Text | Tuesday |
| D | day in year | Number | 189 |
| F | day of week in month | Number | 2 (2nd Wed in July) |
| w | week in year | Number | 27 |
| W | week in month | Number | 2 |
| a | am/pm marker | Text | PM |
| k | hour in day (1~24) | Number | 24 |
| K | hour in am/pm (0~11) | Number | 0 |
Note: The pattern of symbols determine the format. For example:
| d | = | 2 |
|---|---|---|
| dd | = | 02 |
| M | = | 8 |
| MM | = | 08 |
| MMM | = | Aug |
| MMMM | = | August |
Example: "slider1": "-|Quota Percent Change|quota_chg|-|-|_MIN,_MAX|-|-|-|-|-|0|-|-|-|-|-|,;,|-,-,100,,%",
"slider2": "-|Total Sales|Sales_Q4|2|-|_MIN,_MAX|-|-|-|-|-|1|-|-|-|-|-|,;,;,;,;|-,-,.001,$,K",
"slider3": "-|Program Start Date|Start_Date|-|,MMM d yyyy|_MIN,_MAX|-|-|-|-|-|0|-|-|-|-|-|,;,;,;|-,-,1,,",
"slider4": "-| Program Start Date|Start_Date|-|M/d/yyyy,MMM d yyyy|1/1/2019,12/31/2019|-|-|-|-|-|0|-|-|-|-|-|,;,;,;|-,-,1,,",