ejRangeNavigator
30 Aug 201824 minutes to read
The range navigator can be easily configured to the DOM element, such as div. You can create a range navigator with a highly customizable look and feel.
$(element).ejRangeNavigator(options, options)
Name | Type | Description |
---|---|---|
|
object | settings for range navigator |
|
object | settings for range navigator |
Example
<div id="container"></div>
<script>
// Create RangeNavigator
$('#container').ejRangeNavigator();
</script>
Requires
-
module:jQuery
-
module:jquery.globalize.min.js
-
module:ej.core.js
-
module:ej.data.js
-
module:ej.chart.js
-
module:ej.rangenavigator.js
Members
allowSnapping boolean
Toggles the placement of slider exactly on the place it left or on the nearest interval.
Default Value
- false
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
allowSnapping: true;
});
</script>
allowNextValue boolean
It allows to show the value between the particular periods (i.e) from 1st January to 31st February and so on. The default value is true. If we set the property as false, it allows to show the value between the particular periods.(i.e) from 1st January to 31st January and so on.
Default Value
- true
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
allowNextValue: false;
});
</script>
border object
Options for customizing the color, opacity and width of the chart border.
Try it: JS Playground Sample
border.color string
Border color of rangenavigator. When enable the scrollbar, the default color will be set as “#B4B4B4”.
Default Value
- “transparent”
Example
$("#container").ejRangeNavigator({
border: { color: "green" }
});
border.opacity number
Opacity of the rangeNavigator border.
Default Value
- 1
Example
$("#container").ejRangeNavigator({
border: { opacity: 0.5 }
});
border.width number
Width of the RangeNavigator border.
Default Value
- 1
Example
$("#container").ejRangeNavigator({
border: { width: 2 }
});
dataSource object
Specifies the data source for range navigator.
Example
$("#container").ejRangeNavigator({
dataSource:"data1",
xName: "X",
yName: "Y"
});
series array
Specifies the properties used for customizing the range series.
series.xName string
Name of the property in the datasource that contains x value for the series.
Default Value
- null
Example
$("#container").ejRangeNavigator({
series : [{xName: "XValue" }]
});
series.yName string
Name of the property in the datasource that contains y value for the series.
Default Value
- null
Example
$("#container").ejRangeNavigator({
series : [{xName: "YValue" }]
});
series.dataSource object
Specifies the dataSource for the series. It can be an array of JSON objects or an instance of ej.DataManager.
Default Value
- null
Example
$("#container").ejRangeNavigator({
series : [{dataSource: data }]
});
series.type enum
Specifies the type of the series to render in chart.
Name | Type | Description |
---|---|---|
Area | string | Specifies the series type as area. |
Line | string | Specifies the series type as line. |
Spline | string | Specifies the series type as spline. |
StepArea | string | Specifies the series type as steparea. |
SplineArea | string | Specifies the series type as steparea. |
StepLine | string | Specifies the series type as stepline. |
Default Value
- “column”. see Type
Example
$("#container").ejRangeNavigator({
series : [{type : "line" }]
});
series.enableAnimation boolean
Enable/disable the animation of series.
Default Value
- false
Example
$("#container").ejRangeNavigator({
series : [{enableAnimation : true }]
});
series.fill string
Fill color of the series.
Default Value
- null
Example
$("#container").ejRangeNavigator({
series :[{fill : "green"}]
});
seriesSettings array
Specifies the properties used for customizing all the range series.
seriesSettings.xName string
Name of the property in the datasource that contains x value for the series.
Default Value
- null
Example
$("#container").ejRangeNavigator({
seriesSettings : [{xName: "XValue" }]
});
seriesSettings.yName string
Name of the property in the datasource that contains y value for the series.
Default Value
- null
Example
$("#container").ejRangeNavigator({
seriesSettings : [{xName: "YValue" }]
});
seriesSettings.dataSource object
Specifies the dataSource for the series. It can be an array of JSON objects or an instance of ej.DataManager.
Default Value
- null
Example
$("#container").ejRangeNavigator({
seriesSettings : [{dataSource: data }]
});
seriesSettings.type enum
Specifies the type of the series to render in chart.
Default Value
- “column”. see Type
Example
$("#container").ejRangeNavigator({
seriesSettings : [{type : "line" }]
});
seriesSettings.enableAnimation boolean
Enable/disable the animation of series.
Default Value
- false
Example
$("#container").ejRangeNavigator({
seriesSettings : [{enableAnimation : true }]
});
seriesSettings.fill string
Fill color of the series.
Default Value
- null
Example
$("#container").ejRangeNavigator({
seriesSettings :[{fill : "green"}]
});
enableDeferredUpdate boolean
Toggles the redrawing of chart on moving the sliders.
Default Value
- true
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
enableDeferredUpdate:false,
});
</script>
enableScrollbar boolean
Enable the scrollbar option in the rangenavigator.
Default Value
- false
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
enableScrollbar: true,
});
</script>
enableAutoResizing boolean
Enable the resize option in the rangenavigator.
Default Value
- false
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
enableAutoResizing: true,
});
</script>
enableRTL boolean
Toggles the direction of rendering the range navigator control.
Default Value
- false
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
enableRTL: true,
});
</script>
isResponsive boolean
Sets a value whether to make the range navigator responsive on resize.
Default Value
- false
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
isResponsive: true;
});
</script>
labelSettings object
Options for customizing the labels colors, font, style, size, horizontalAlignment and opacity.
labelSettings.higherLevel object
Options for customizing the higher level labels in range navigator.
labelSettings.higherLevel.border object
Options for customizing the border of grid lines in higher level.
labelSettings.higherLevel.border.color string
Specifies the border color of grid lines.
Default Value
- “transparent”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ border :{color:"#ff0000"}}},
});
</script>
labelSettings.higherLevel.border.width string
Specifies the border width of grid lines.
Default Value
- “0.5”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ border :{width:1}}},
});
</script>
labelSettings.higherLevel.fill string
Specifies the fill color of higher level labels.
Default Value
- “transparent”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ fill:"days"}},
});
</script>
labelSettings.higherLevel.gridLineStyle object
Options for customizing the grid line colors, width, dashArray, border.
labelSettings.higherLevel.gridLineStyle.color string
Specifies the color of grid lines in higher level.
Default Value
- “#B5B5B5”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ gridLineStyle :{color:"#ff0000"}}},
});
labelSettings.higherLevel.gridLineStyle.dashArray string
Specifies the dashArray of grid lines in higher level.
Default Value
- “20 5 0”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ gridLineStyle :{dashArray:"20 10 5"}}},
});
</script>
labelSettings.higherLevel.gridLineStyle.width string
Specifies the width of grid lines in higher level.
Default Value
- “#B5B5B5”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ gridLineStyle :{width:1}}},
});
</script>
labelSettings.higherLevel.intervalType enum
Specifies the intervalType for higher level labels. See IntervalType
Name | Type | Description |
---|---|---|
Years | string | The labels are displayed with year as intervals between them |
Quarters | string | The labels are displayed with quarter as intervals between them |
Months | string | The labels are displayed with months as intervals between them |
Weeks | string | The labels are displayed with weeks as intervals between them |
Days | string | The labels are displayed with days as intervals between them |
Hours | string | The labels are displayed with hours as intervals between them |
Minutes | string | The labels are displayed with minutes as intervals between them |
Default Value
- “auto”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ intervalType:"days"}},
});
</script>
labelSettings.higherLevel.labelPlacement enum
Specifies the position of the labels to render either inside or outside of plot area
Name | Type | Description |
---|---|---|
Inside | string | The Labels are displayed inside the Range Navigator |
Outside | string | The Labels are displayed outside the Range Navigator |
Specifies the position of the labels to render either inside or outside of plot area. See LabelPlacement
Default Value
- “outside”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ labelPlacement:"inside"}},
});
</script>
labelSettings.higherLevel.labelIntersectAction enum
Specifies to hide the labels when it intersects with each other.
Name | Type | Description |
---|---|---|
None | string | The Labels are displayed as normal in the Range Navigator |
Hide | string | The Labels are hidden when it intersects. |
Specifies the position of the labels to render either inside or outside of plot area. See LabelIntersectAction
Default Value
- “none”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ labelIntersectAction:"hide"}},
});
</script>
labelSettings.higherLevel.position enum
Specifies the position of the labels in higher level
Name | Type | Description |
---|---|---|
Top | string | Labels are placed on top of the slider |
Bottom | string | Labels are placed at the bottom of the slider |
Specifies the position of the labels in higher level.See Position
Default Value
- “top”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ position:"bottom"}},
});
</script>
labelSettings.higherLevel.style object
Options for customizing the style of higher level labels.
labelSettings.higherLevel.style.font object
Options for customizing the font properties.
labelSettings.higherLevel.style.font.color string
Specifies the label font color. Labels render with the specified font color.
Default Value
- “black”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ style:{font:{color: "red"}}}},
});
</script>
labelSettings.higherLevel.style.font.fontFamily string
Specifies the label font family. Labels render with the specified font family.
Default Value
- “Segoe UI”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ style:{font:{fontFamily: "Algerian"}}}},
});
</script>
labelSettings.higherLevel.style.font.fontStyle string
Specifies the label font style. Labels render with the specified font style.
Default Value
- “Normal”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ style:{font:{fontStyle: "Italic"}}}},
});
</script>
labelSettings.higherLevel.style.font.fontWeight string
Specifies the label font weight. Labels render with the specified font weight.
Default Value
- “regular”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ style:{font:{fontWeight: "regular"}}}},
});
</script>
labelSettings.higherLevel.style.font.opacity number
Specifies the label opacity. Labels render with the specified opacity.
Default Value
- 1
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ style:{font:{opacity: "14px"}}}},
});
</script>
labelSettings.higherLevel.style.font.size string
Specifies the label font size. Labels render with the specified font size.
Default Value
- “12px”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ style:{font:{size: "14px"}}}},
});
</script>
labelSettings.higherLevel.style.horizontalAlignment string
Specifies the horizontal text alignment of the text in label.
Default Value
- “middle”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ style:{horizontalAlignment: "left"}}},
});
</script>
labelSettings.higherLevel.visible boolean
Toggles the visibility of higher level labels.
Default Value
- true
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{higherLevel:{ visible:false}},
});
</script>
labelSettings.lowerLevel object
Options for customizing the labels in lower level.
labelSettings.lowerLevel.border object
Options for customizing the border of grid lines in lower level.
labelSettings.lowerLevel.border.color string
Specifies the border color of grid lines.
Default Value
- “transparent”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ border :{color:"#ff0000"}}},
});
</script>
labelSettings.lowerLevel.border.width string
Specifies the border width of grid lines.
Default Value
- “0.5”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ border :{width:1}}},
});
</script>
labelSettings.lowerLevel.fill string
Specifies the fill color of labels in lower level.
Default Value
- “transparent”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ fill:"days"}},
});
</script>
labelSettings.lowerLevel.gridLineStyle object
Options for customizing the grid lines in lower level.
labelSettings.lowerLevel.gridLineStyle.color string
Specifies the color of grid lines in lower level.
Default Value
- “#B5B5B5”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ gridLineStyle :{color:"#ff0000"}}},
});
</script>
labelSettings.lowerLevel.gridLineStyle.dashArray string
Specifies the dashArray of gridLines in lowerLevel.
Default Value
- “20 5 0”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
lowerLevel:{ gridLineStyle :{dashArray:"20 10 5"}}},
});
</script>
labelSettings.lowerLevel.gridLineStyle.width string
Specifies the width of grid lines in lower level.
Default Value
- “#B5B5B5”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ gridLineStyle :{width:1}}},
});
</script>
labelSettings.lowerLevel.intervalType enum
Specifies the intervalType of the labels in lower level.See IntervalType
Default Value
- “auto”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ intervalType:"days"}},
});
</script>
labelSettings.lowerLevel.labelPlacement enum
Specifies the position of the labels to render either inside or outside of plot area. See LabelPlacement
Default Value
- “outside”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ labelPlacement:"inside"}},
});
</script>
labelSettings.lowerLevel.labelIntersectAction enum
Specifies to hide the labels when it intersects with each other.
Name | Type | Description |
---|---|---|
None | string | The Labels are displayed as normal in the Range Navigator |
Hide | string | The Labels are hidden when it intersects. |
Specifies the position of the labels to render either inside or outside of plot area. See LabelIntersectAction
Default Value
- “none”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ labelIntersectAction:"hide"}},
});
</script>
labelSettings.lowerLevel.position enum
Specifies the position of the labels in lower level.See Position
Default Value
- “bottom”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ position:"bottom"}},
});
</script>
labelSettings.lowerLevel.style object
Options for customizing the style of labels.
labelSettings.lowerLevel.style.font object
Options for customizing the font of labels.
labelSettings.lowerLevel.style.font.color string
Specifies the color of labels. Label text render in this specified color.
Default Value
- “black”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ style:{font:{color: "red"}}}},
});
</script>
labelSettings.lowerLevel.style.font.fontFamily string
Specifies the font family of labels. Label text render in this specified font family.
Default Value
- “Segoe UI”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ style:{font:{fontFamily: "Algerian"}}}},
});
</script>
labelSettings.lowerLevel.style.font.fontStyle string
Specifies the font style of labels. Label text render in this specified font style.
Default Value
- “Normal”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ style:{font:{fontStyle: "Italic"}}}},
});
</script>
labelSettings.lowerLevel.style.font.fontWeight string
Specifies the font weight of labels. Label text render in this specified font weight.
Default Value
- “regular”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ style:{font:{fontWeight: "regular"}}}},
});
</script>
labelSettings.lowerLevel.style.font.opacity string
Specifies the opacity of labels. Label text render in this specified opacity.
Default Value
- “12px”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ style:{font:{opacity: "14px"}}}},
});
</script>
labelSettings.lowerLevel.style.font.size string
Specifies the size of labels. Label text render in this specified size.
Default Value
- “12px”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ style:{font:{size: "14px"}}}},
});
</script>
labelSettings.lowerLevel.style.horizontalAlignment string
Specifies the horizontal text alignment of the text in label.
Default Value
- “middle”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ style:{horizontalAlignment: "left"}}},
});
</script>
labelSettings.lowerLevel.visible boolean
Toggles the visibility of labels in lower level.
Default Value
- true
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{lowerLevel:{ visible:false}},
});
</script>
labelSettings.style object
Options for customizing the style of labels in range navigator.
labelSettings.style.font object
Options for customizing the font of labels in range navigator.
labelSettings.style.font.color string
Specifies the label color. This color is applied to the labels in range navigator.
Default Value
- “#333333”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{style:{ font:{color:"#ff0000"}}},
});
</script>
labelSettings.style.font.family string
Specifies the label font family. Labels render with the specified font family.
Default Value
- “Segoe UI”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{style:{ font:{family:"Arial"}}},
});
</script>
labelSettings.style.font.opacity ` number`
Specifies the label font opacity. Labels render with the specified font opacity.
Default Value
- 1
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{style:{ font:{opacity:0.5}}}
});
</script>
labelSettings.style.font.size string
Specifies the label font size. Labels render with the specified font size.
Default Value
- “1px”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{style:{ font:{size:"12px"}}},
});
</script>
labelSettings.style.font.style enum
Specifies the label font style. Labels render with the specified font style..
Name | Type | Description |
---|---|---|
Normal | string | The labels are displayed in the default format |
Bold | string | The labels are displayed in Bold format |
Italic | string | The labels are displayed in the italic format |
Specifies the label font style. Labels render with the specified font style..See FontStyle
Default Value
- “Normal”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{style:{ font:{style:"Normal"}}},
});
</script>
labelSettings.style.font.weight enum
Specifies the label font weight
Name | Type | Description |
---|---|---|
Regular | string | The Labels are displayed in the default manner |
Lighter | string | The Labels are displayed lighter than the normal text |
Specifies the label font weight. Labels render with the specified font weight. See FontWeight
Default Value
- “regular”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{style:{ font:{weight:"Regular"}}},
});
</script>
labelSettings.style.horizontalAlignment enum
Specifies the horizontalAlignment of the label in RangeNavigator
Name | Type | |
---|---|---|
Middle | string | The labels are aligned to the center |
Left | string | The labels are aligned to the left |
Right | string | The labels are aligned to the right |
Specifies the horizontalAlignment of the label in range navigator. See HorizontalAlignment
Default Value
- “middle”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
labelSettings:{style:{ horizontalAlignment:"middle"}},
});
</script>
locale string
This property is to specify the localization of range navigator.
Default Value
- “en-US”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
locale: "en-US",
});
</script>
navigatorStyleSettings object
Options for customizing the range navigator.
navigatorStyleSettings.background string
Specifies the background color of range navigator.
Default Value
- “#dddddd”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ background:"#ff0000"},
});
</script>
navigatorStyleSettings.border object
Options for customizing the border color and width of range navigator.
navigatorStyleSettings.border.color string
Specifies the border color of range navigator.
Default Value
- “transparent”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ border:{color:"#ff0000"}},
});
</script>
navigatorStyleSettings.border.dashArray string
Specifies the dash array of range navigator.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ border:{dashArray:"2,3"}},
});
</script>
navigatorStyleSettings.border.width ` number`
Specifies the border width of range navigator.
Default Value
- 0.5
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ border:{width:1}},
});
</script>
navigatorStyleSettings.leftThumbTemplate string
Specifies the left side thumb template in range navigator we can give either div id or HTML string
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ leftThumbTemplate:"item"},
});
</script>
navigatorStyleSettings.majorGridLineStyle object
Options for customizing the major grid lines.
navigatorStyleSettings.majorGridLineStyle.color string
Specifies the color of major grid lines in range navigator.
Default Value
- “#B5B5B5”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ majorGridLineStyle:{color:"#ff0000"}},
});
</script>
navigatorStyleSettings.majorGridLineStyle.visible boolean
Toggles the visibility of major grid lines.
Default Value
- true
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ majorGridLineStyle:{visible:false}},
});
</script>
navigatorStyleSettings.minorGridLineStyle object
Options for customizing the minor grid lines.
navigatorStyleSettings.minorGridLineStyle.color string
Specifies the color of minor grid lines in range navigator.
Default Value
- “#B5B5B5”
Example
//Gets or sets color of majorGridLines in range navigator, after initialization:
//Gets the color of majorGridLines in range navigator
$("#container").ejRangeNavigator("option", "navigatorStyleSettings.majorGridLineStyle.color");
//Sets the color of majorGridLines in range navigator
navigatorStyleSettings.minorGridLineStyle.visible boolean
Toggles the visibility of minor grid lines.
Default Value
- true
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ majorGridLineStyle:{visible:false}},
});
</script>
navigatorStyleSettings.opacity ` number`
Specifies the opacity of RangeNavigator.
Default Value
- 1
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ opacity:0.5},
});
</script>
navigatorStyleSettings.rightThumbTemplate string
Specifies the right side thumb template in range navigator we can give either div id or HTML string
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ rightThumbTemplate:"item"},
});
</script>
navigatorStyleSettings.selectedRegionColor string
Specifies the color of the selected region in range navigator.
Default Value
- “#EFEFEF”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ selectedRegionColor:"#ff0000"}},
});
</script>
navigatorStyleSettings.selectedRegionOpacity number
Specifies the opacity of Selected Region.
Default Value
- 0
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ selectedRegionOpacity:0.5},
});
</script>
navigatorStyleSettings.thumbColor string
Specifies the color of the thumb in range navigator.
Default Value
- “#2382C3”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ thumbColor:"#ff0000"},
});
</script>
navigatorStyleSettings.thumbRadius number
Specifies the radius of the thumb in range navigator.
Default Value
- 10
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ thumbRadius:15},
});
</script>
navigatorStyleSettings.thumbStroke string
Specifies the stroke color of the thumb in range navigator.
Default Value
- “#303030”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ thumbStroke:"#ff0000"},
});
</script>
navigatorStyleSettings.unselectedRegionColor string
Specifies the color of the unselected region in range navigator.
Default Value
- “#5EABDE”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ unselectedRegionColor:"#ff0000"},
});
</script>
navigatorStyleSettings.unselectedRegionOpacity number
Specifies the opacity of Unselected Region.
Default Value
- 0.3
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ unselectedRegionOpacity:0.5},
});
</script>
navigatorStyleSettings.highlightSettings object
Contains the options for highlighting the range navigator on mouse over.
navigatorStyleSettings.highlightSettings.enable boolean
Enable the highlight settings in range navigator.
Default Value
- false
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ highlightSettings:{enable: true}},
});
</script>
navigatorStyleSettings.highlightSettings.color string
To set the color to the highlight.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ highlightSettings:{color: "red"}},
});
</script>
navigatorStyleSettings.highlightSettings.opacity number
To set the opacity to the highlight.
Default Value
- 0.5
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ highlightSettings:{opacity: 0.4}},
});
</script>
navigatorStyleSettings.highlightSettings.border object
Contains the border properties for highlighting rectangle.
navigatorStyleSettings.highlightSettings.border.color string
To set the border color to the highlight.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ highlightSettings:{border: {color: "yellow"}}},
});
</script>
navigatorStyleSettings.highlightSettings.border.width number
To set the border width to the highlight.
Default Value
- 1
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ highlightSettings:{border: {width: 1.4}}},
});
</script>
navigatorStyleSettings.selectionSettings object
Contains the options for selection the range navigator on mouse over.
navigatorStyleSettings.selectionSettings.enable boolean
Enable the selection settings in range navigator.
Default Value
- false
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ selectionSettings:{enable: true}},
});
</script>
navigatorStyleSettings.selectionSettings.color string
To set the color to the selection.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ selectionSettings:{color: "red"}},
});
</script>
navigatorStyleSettings.selectionSettings.opacity number
To set the opacity to the selection.
Default Value
- 0.5
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ selectionSettings:{opacity: 0.4}},
});
</script>
navigatorStyleSettings.selectionSettings.border object
Contains the border properties for selecting the rectangle.
navigatorStyleSettings.selectionSettings.border.color string
To set the border color to the selection.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ selectionSettings:{border: {color: "yellow"}}},
});
</script>
navigatorStyleSettings.selectionSettings.border.width number
To set the border width to the selection.
Default Value
- 1
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
navigatorStyleSettings:{ selectionSettings:{border: {width: 1.4}}},
});
</script>
padding string
Padding specifies the gap between the container and the range navigator.
Default Value
- “0”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
padding: "15";
});
</script>
rangePadding enum
If the range is not given explicitly, range will be calculated automatically.
Name | Type | Description |
---|---|---|
Additional | string | The range is added with an extra interval when the RangePadding is set as Additional |
Normal | string | The automatic range calculation differs based on the data when the RangePadding is set as Normal |
None | string | The Range is calculated based on the minimum and maximum value in the data when the RangePadding is set as None |
Round | string | The Range is rounded to the nearest possible values when the RangePadding is set as Round |
If the range is not given explicitly, range will be calculated automatically. You can customize the automatic range calculation using rangePadding. See RangePadding
Default Value
- “none”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
rangePadding: "normal",
});
</script>
rangeSettings object
Options for customizing the starting and ending ranges.
rangeSettings.end string
Specifies the ending range of range navigator.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
rangeSettings:{end:"01/05/1993"}
});
</script>
rangeSettings.start string
Specifies the starting range of range navigator.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
rangeSettings:{start:"01/05/1993"},
});
selectedData object
selectedData is for getting the data when the “rangeChanged” event trigger from client side.
selectedRangeSettings object
Options for customizing the start and end range values.
selectedRangeSettings.end string
Specifies the ending range of range navigator.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
selectedRangeSettings:{end:"01/05/1993"},
});
</script>
selectedRangeSettings.start string
Specifies the starting range of range navigator.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
selectedRangeSettings:{start:"01/05/1992"},
});
</script>
scrollRangeSettings object
Options for rendering scrollbar based on the start and end range values.
scrollRangeSettings.end string
Specifies the ending range of range navigator scrollbar and that should be greater than the rangenavigator datasource end value.
Default Value
- null
Example
$("#container").ejRangeNavigator({
scrollRangeSettings:{end:"01/05/1993"},
});
scrollRangeSettings.start string
Specifies the starting range of range navigator scrollbar and that should be less than the rangenavigator datasource start value.
Default Value
- null
Example
$("#container").ejRangeNavigator({
scrollRangeSettings:{start:"01/05/1992"},
});
sizeSettings object
Contains property to customize the hight and width of range navigator.
sizeSettings.height string
Specifies height of the range navigator.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
sizeSettings: { height : "130" },
});
</script>
sizeSettings.width string
Specifies width of the range navigator.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
sizeSettings: { width : "900" },
});
</script>
theme string
By specifying this property the user can change the theme of the range navigator.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
theme: "flatdark";
});
</script>
tooltipSettings object
Options for customizing the tooltip in range navigator.
Example
$("#container").ejRangeNavigator({
tooltipSettings: { visible: true, labelFormat: "MMM/dd/yyyy", tooltipDisplayMode: "always", tooltipDisplayMode: "always" },
});
tooltipSettings.backgroundColor string
Specifies the background color of tooltip.
Default Value
- “#303030”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
tooltipSettings:{backgroundColor: "#303030"},
});
</script>
tooltipSettings.font object
Options for customizing the font in tooltip.
tooltipSettings.font.color string
Specifies the color of text in tooltip. Tooltip text render in the specified color.
Default Value
- “#FFFFFF”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
tooltipSettings:{font:{color : "FFFFFF"}},
});
</script>
tooltipSettings.font.family string
Specifies the font family of text in tooltip. Tooltip text render in the specified font family.
Default Value
- “Segoe UI”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
tooltipSettings:{font:{family:"Arial"}}
});
</script>
tooltipSettings.font.fontStyle string
Specifies the font style of text in tooltip. Tooltip text render in the specified font style.
Default Value
- ej.datavisualization.RangeNavigator.fontStyle.Normal
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
tooltipSettings:{font:{fontStyle:"Normal"}}
});
</script>
tooltipSettings.font.opacity ` number`
Specifies the opacity of text in tooltip. Tooltip text render in the specified opacity.
Default Value
- 1
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
tooltipSettings:{ font:{opacity:0.5}}
});
</script>
tooltipSettings.font.size string
Specifies the size of text in tooltip. Tooltip text render in the specified size.
Default Value
- “10px”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
tooltipSettings:{font:{size:"12px"}},
});
</script>
tooltipSettings.font.weight string
Specifies the weight of text in tooltip. Tooltip text render in the specified weight.
Default Value
- ej.datavisualization.RangeNavigator.weight.Regular
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
tooltipSettings:{ font:{weight:"regular"}},
});
</script>
tooltipSettings.labelFormat string
Specifies the format of text to be displayed in tooltip.
Default Value
- “MM/dd/yyyy”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
tooltipSettings: { labelFormat: "MM/dd/yyyy"}
});
</script>
tooltipSettings.tooltipDisplayMode string
Specifies the mode of displaying the tooltip. Neither to display the tooltip always nor on demand.
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
tooltipSettings:{tooltipDisplayMode: "always"},
});
</script>
tooltipSettings.visible boolean
Toggles the visibility of tooltip.
Default Value
- true
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
tooltipSettings:{visible: true}
});
</script>
valueAxisSettings object
Options for configuring minor grid lines, major grid lines, axis line of axis.
valueAxisSettings.axisLine object
Options for customizing the axis line.
valueAxisSettings.axisLine.visible string
Toggles the visibility of axis line.
Default Value
- “none”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
valueAxisSettings:{axisLine: {visible: true}}
});
</script>
valueAxisSettings.font object
Options for customizing the font of the axis.
valueAxisSettings.font.size string
Text in axis render with the specified size.
Default Value
- “0px”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
valueAxisSettings:{font: {size: '12px'}}
});
</script>
valueAxisSettings.majorGridLines object
Options for customizing the major grid lines.
valueAxisSettings.majorGridLines.visible boolean
Toggles the visibility of major grid lines.
Default Value
- false
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
valueAxisSettings:{majorGridLines: {visible: true}}
});
</script>
valueAxisSettings.majorTickLines object
Options for customizing the major tick lines in axis.
valueAxisSettings.majorTickLines.size number
Specifies the size of the majorTickLines in range navigator
Default Value
- 0
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
valueAxisSettings:{majorTickLines: {size: 3}}
});
</script>
valueAxisSettings.majorTickLines.visible boolean
Toggles the visibility of major tick lines.
Default Value
- true
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
valueAxisSettings:{majorTickLines: {visible: false}}
});
</script>
valueAxisSettings.majorTickLines.width number
Specifies width of the major tick lines.
Default Value
- 0
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
valueAxisSettings:{majorTickLines: {width: 3}}
});
</script>
valueAxisSettings.range object
You can customize the range of the axis by setting minimum , maximum and interval.
valueAxisSettings.range.min number
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
valueAxisSettings:{range:{ min :0 }},
});
</script>
valueAxisSettings.range.max number
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
valueAxisSettings:{range:{ max :100 }},
});
</script>
valueAxisSettings.range.interval number
Default Value
- null
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
valueAxisSettings:{range:{ interval :10 }},
});
</script>
valueAxisSettings.rangePadding string
If the range is not given explicitly, range will be calculated automatically. You can customize the automatic range calculation using rangePadding.
Default Value
- “none”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
valueAxisSettings:{rangePadding: "normal"},
});
</script>
valueAxisSettings.visible boolean
Toggles the visibility of axis in range navigator.
Default Value
- false
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
valueAxisSettings:{visible: true}
});
</script>
valueType enum
You can plot data of type date time or numeric. This property determines the type of data that this axis will handle.
Name | Type | Description |
---|---|---|
Numeric | string | The numeric data is used in the RangeNavigator then the ValueType is set as Numeric |
DateTime | string | The default value type of Range Navigator is DateTime and it represents the DateTime Values |
Default Value
- “datetime”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
valueType: "numeric",
});
</script>
xName object
Specifies the xName for dataSource. This is used to take the x values from dataSource
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
dataSource:"data1",
xName: "X"
});
</script>
yName object
Specifies the yName for dataSource. This is used to take the y values from dataSource
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
dataSource:"data1",
yName: "Y"
});
</script>
zoomSettings.zoomFactor string
This property determines the factor by which the axis is scaled. Value must be specified between 0 and 1.
Default Value
- “1”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
zoomFactor:"1"
});
</script>
zoomSettings.zoomPosition string
This property determines the starting position of the zoomed axis. Value must be specified between 0 and 1.
Default Value
- “0”
Example
<div id="RangeNavigator"></div>
<script>
$("#container").ejRangeNavigator({
zoomPosition:"0",
});
</script>
Methods
_destroy ()
destroy the range navigator widget
Returns: void
Example
<div id="container"></div>
<script>
// Destroy range navigator
var obj = $("#container").data("ejRangeNavigator");
obj.destroy(); // destroy the range navigator
</script>
<div id="container"></div>
<script>
$("#container").ejRangeNavigator("destroy");
</script>
Events
load
Fires on load of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from range navigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the range navigator model |
|
string | returns the name of the event |
Example
//load event for chart
$("#container").ejRangeNavigator({
load: function (args) {}
});
loaded
Fires after range navigator is loaded.
Name | Type | Description |
---|---|---|
|
Object | parameters from range navigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the range navigator model |
|
string | returns the name of the event |
Example
//loaded event for chart
$("#container").ejRangeNavigator({
loaded: function (args) {}
});
rangeChanged
Fires on changing the range of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from range navigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the range navigator model |
|
string | returns the name of the event |
Example
//rangeChanged event for chart
$("#container").ejRangeNavigator({
rangeChanged: function (args) {}
});
scrollChanged
Fires on changing the scrollbar position of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from RangeNavigator |
|
object | returns the scrollbar position old start and end range value on changing scrollbar |
|
Object | returns the scrollbar position new start and end range value on changing scrollbar |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
//scrollbarChanged event for rangenavigator
$("#container").ejRangeNavigator({
scrollChanged: function (args) {}
});
scrollStart
Fires on when starting to change the scrollbar position of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from RangeNavigator |
|
string | returns the scrollbar position starting range value on changing scrollbar |
|
string | returns the scrollbar position end range value on changing scrollbar |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
//scrollbarChanged event for rangenavigator
$("#container").ejRangeNavigator({
scrollStart: function (args) {}
});
selectedRangeStart
Fires on when starting to change the slider position of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from RangeNavigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
//selectedRangeStart event for rangenavigator
$("#container").ejRangeNavigator({
selectedRangeStart: function (args) {}
});
selectedRangeEnd
Fires when the selection ends in the range navigator
Name | Type | Description |
---|---|---|
|
object | parameters from RangeNavigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
//selectedRangeEnd event for rangenavigator
$("#container").ejRangeNavigator({
selectedRangeEnd: function (args) {}
});
scrollEnd
Fires on changes ending the scrollbar position of range navigator.
Name | Type | Description |
---|---|---|
|
object | parameters from RangeNavigator |
|
object | returns the scrollbar position old start and end range value on change end of scrollbar |
|
Object | returns the scrollbar position new start and end range value on change end of scrollbar |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
//scrollbarChanged event for rangenavigator
$("#container").ejRangeNavigator({
scrollEnd: function (args) {}
});
Click
Fires, on clicking the range of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from range navigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the range navigator model |
|
string | returns the name of the event |
Example
//Click event for range navigator
$("#container").ejRangeNavigator({
click: function (args) {
//Do something
}
});
doubleClick
Fires, on double clicking the range of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from range navigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the range navigator model |
|
string | returns the name of the event |
Example
//DoubleClick event for range navigator.
$("#container").ejRangeNavigator({
doubleClick: function (args) {
//Do something
}
});
rightClick
Fires, on right clicking the range of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from range navigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the range navigator model |
|
string | returns the name of the event |
Example
//RightClick event for range navigator
$("#container").ejRangeNavigator({
rightClick: function (args) {
//Do something
}
});