Stay organized with collections
Save and categorize content based on your preferences.
NumberRangeFilterBuilder
A builder for number range filter controls.
A number range filter is a slider with two thumbs that lets the user select ranges of numeric
values. Given a column of type number and matching options, this control filters out the rows
that don't match the range that was selected.
Sets the number of ticks (fixed positions in a range bar) a number range filter slider thumbs
can fall in.
Detailed documentation
setMaxValue(maxValue)
Sets the maximum allowed value for the range lower extent. If undefined, the value is inferred
from the contents of the DataTable managed by the control.
// Builds a number range filter and sets the maximum value to 100.constnumberRangeFilter=Charts.newNumberRangeFilter().setFilterColumnLabel('Col2').setMaxValue(100).build();
Sets the minimum allowed value for the range lower extent. If undefined, the value is inferred
from the contents of the DataTable managed by the control.
// Builds a number range filter and sets the minimum value to 10.constnumberRangeFilter=Charts.newNumberRangeFilter().setFilterColumnLabel('Col2').setMinValue(10).build();
// Builds a number range filter and sets it to have a horizontal orientation.constnumberRangeFilter=Charts.newNumberRangeFilter().setFilterColumnLabel('Col2').setOrientation(Charts.Orientation.HORIZONTAL).build();
Sets whether to have labels next to the slider displaying extents of the selected range.
// Builds a number range filter and enables showing of the number range values.constnumberRangeFilter=Charts.newNumberRangeFilter().setFilterColumnLabel('Col2').setShowRangeValues(true).build();
Parameters
Name
Type
Description
showRangeValues
Boolean
If true, enables showing of labels next to the slider.
Sets the number of ticks (fixed positions in a range bar) a number range filter slider thumbs
can fall in.
// Builds a number range filter and sets the number of ticks for the range// to 10.constnumberRangeFilter=Charts.newNumberRangeFilter().setFilterColumnLabel('Col2').setTicks(10).build();
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-12-02 UTC."],[[["\u003cp\u003eThe \u003ccode\u003eNumberRangeFilterBuilder\u003c/code\u003e helps create interactive number range filter controls for your charts, which are essentially sliders for selecting numeric value ranges.\u003c/p\u003e\n"],["\u003cp\u003eThis builder allows you to customize the filter's minimum and maximum values, orientation (horizontal or vertical), display of range values, and the number of ticks on the slider.\u003c/p\u003e\n"],["\u003cp\u003eUse this builder to refine data visualization by filtering out rows that fall outside the specified numeric range, enhancing user interaction with the chart.\u003c/p\u003e\n"],["\u003cp\u003eBy chaining the builder's methods, you can easily configure various aspects of the number range filter and seamlessly integrate it into your Google Charts.\u003c/p\u003e\n"]]],["The `NumberRangeFilterBuilder` creates a slider for filtering numeric data ranges. Key actions include setting the `maxValue` and `minValue` to define the range's boundaries, or letting them be inferred from the data. The `setOrientation` method controls slider direction. `setShowRangeValues` toggles labels displaying the selected range. Lastly, `setTicks` defines the number of fixed positions on the slider, limiting where the thumbs can be placed.\n"],null,["NumberRangeFilterBuilder\n\nA builder for number range filter controls.\n\nA number range filter is a slider with two thumbs that lets the user select ranges of numeric\nvalues. Given a column of type number and matching options, this control filters out the rows\nthat don't match the range that was selected.\n\nFor more details, see the Gviz [documentation.](http://developers.google.com/chart/interactive/docs/gallery/controls.html#numberrangefilter) \n\nMethods\n\n| Method | Return type | Brief description |\n|---------------------------------------------------------------------|-------------------------------|------------------------------------------------------------------------------------------------------------|\n| [setMaxValue(maxValue)](#setMaxValue(Integer)) | [NumberRangeFilterBuilder](#) | Sets the maximum allowed value for the range lower extent. |\n| [setMinValue(minValue)](#setMinValue(Integer)) | [NumberRangeFilterBuilder](#) | Sets the minimum allowed value for the range lower extent. |\n| [setOrientation(orientation)](#setOrientation(Orientation)) | [NumberRangeFilterBuilder](#) | Sets the slider orientation. |\n| [setShowRangeValues(showRangeValues)](#setShowRangeValues(Boolean)) | [NumberRangeFilterBuilder](#) | Sets whether to have labels next to the slider displaying extents of the selected range. |\n| [setTicks(ticks)](#setTicks(Integer)) | [NumberRangeFilterBuilder](#) | Sets the number of ticks (fixed positions in a range bar) a number range filter slider thumbs can fall in. |\n\nDetailed documentation \n\n`set``Max``Value(maxValue)` \nSets the maximum allowed value for the range lower extent. If undefined, the value is inferred\nfrom the contents of the DataTable managed by the control.\n\n```javascript\n// Builds a number range filter and sets the maximum value to 100.\nconst numberRangeFilter = Charts.newNumberRangeFilter()\n .setFilterColumnLabel('Col2')\n .setMaxValue(100)\n .build();\n```\n\nParameters\n\n| Name | Type | Description |\n|--------------|-----------|----------------------------------|\n| `max``Value` | `Integer` | The maximum value of the slider. |\n\nReturn\n\n\n[NumberRangeFilterBuilder](#) --- This builder, useful for chaining.\n\n*** ** * ** ***\n\n`set``Min``Value(minValue)` \nSets the minimum allowed value for the range lower extent. If undefined, the value is inferred\nfrom the contents of the DataTable managed by the control.\n\n```javascript\n// Builds a number range filter and sets the minimum value to 10.\nconst numberRangeFilter = Charts.newNumberRangeFilter()\n .setFilterColumnLabel('Col2')\n .setMinValue(10)\n .build();\n```\n\nParameters\n\n| Name | Type | Description |\n|--------------|-----------|----------------------------------|\n| `min``Value` | `Integer` | The minimum value of the slider. |\n\nReturn\n\n\n[NumberRangeFilterBuilder](#) --- This builder, useful for chaining.\n\n*** ** * ** ***\n\n`set``Orientation(orientation)` \nSets the slider orientation.\n\n```javascript\n// Builds a number range filter and sets it to have a horizontal orientation.\nconst numberRangeFilter = Charts.newNumberRangeFilter()\n .setFilterColumnLabel('Col2')\n .setOrientation(Charts.Orientation.HORIZONTAL)\n .build();\n```\n\nParameters\n\n| Name | Type | Description |\n|---------------|----------------------------------------------------------|--------------------------------|\n| `orientation` | [Orientation](/apps-script/reference/charts/orientation) | The slider orientation to set. |\n\nReturn\n\n\n[NumberRangeFilterBuilder](#) --- This builder, useful for chaining.\n\nSee also\n\n- [Orientation](/apps-script/reference/charts/orientation)\n\n*** ** * ** ***\n\n`set``Show``Range``Values(showRangeValues)` \nSets whether to have labels next to the slider displaying extents of the selected range.\n\n```javascript\n// Builds a number range filter and enables showing of the number range values.\nconst numberRangeFilter = Charts.newNumberRangeFilter()\n .setFilterColumnLabel('Col2')\n .setShowRangeValues(true)\n .build();\n```\n\nParameters\n\n| Name | Type | Description |\n|-----------------------|-----------|----------------------------------------------------------|\n| `show``Range``Values` | `Boolean` | If `true`, enables showing of labels next to the slider. |\n\nReturn\n\n\n[NumberRangeFilterBuilder](#) --- This builder, useful for chaining.\n\n*** ** * ** ***\n\n`set``Ticks(ticks)` \nSets the number of ticks (fixed positions in a range bar) a number range filter slider thumbs\ncan fall in.\n\n```javascript\n// Builds a number range filter and sets the number of ticks for the range\n// to 10.\nconst numberRangeFilter = Charts.newNumberRangeFilter()\n .setFilterColumnLabel('Col2')\n .setTicks(10)\n .build();\n```\n\nParameters\n\n| Name | Type | Description |\n|---------|-----------|------------------------------------|\n| `ticks` | `Integer` | The number of ticks on the slider. |\n\nReturn\n\n\n[NumberRangeFilterBuilder](#) --- This builder, useful for chaining."]]