JavaScript/jQuery RangeSelector - chart
The RangeSelector widget can be created with a chart as the background. In this instance, the range selector can be used for selecting the required range on the chart. At the same time, the Chart widget can be displayed near the range selector and zoomed or scrolled according to the range selected in the range selector. For details on how to synchronize these two widgets, refer to the Zooming and Scrolling topic.
To provide a data source for the chart located in the background, set the dataSource property of the rangeSelectorOptions root configuration object and define the series within the chart configuration object. Set the chart series' argumentField and valueField properties to the corresponding data source fields. The argument field will also be used to create the range selector's scale.
The color specified for the range selector's background will also be visible in the chart's background by default. You can change it using the color property of the background configuration object. To prohibit the display of the background color, set the background's visible property to false.
View Chart on Background Demo View Customized Chart on Background Demo
barGroupPadding
Controls the padding and consequently the width of a group of bars with the same argument using relative units. Ignored if the barGroupWidth option is set.
barGroupWidth
Specifies a fixed width for groups of bars with the same argument, measured in pixels. Takes precedence over the barGroupPadding option.
barWidth
Use the barPadding property instead.
Works only if the equalBarWidth option is set to true.
bottomIndent
Specifies an indent from the background's bottom to the lowest chart point. Accepts values from 0 to 1.
commonSeriesSettings
Use this object's properties to set the options for all chart series at once. These options include options common to all series types and options specific to certain series types. So if you have several series of one type, you can set options specific to this type. If you need to set an individual value for a common or type-specific option, use the corresponding series object within the series array. The values that are set individually override the corresponding common values.
For information on all the properties of the commonSeriesSettings configuration object, refer to its description in the chartOptions reference section: commonSeriesSettings. Note that the RangeSelector widget may have its own default values for the commonSeriesSettings options. For instance, the type option is set to 'area' in the RangeSelector widget. In the Chart widget, this option is set to 'line' by default.
dataPrepareSettings
When values from a data source are of a different type, they may be displayed incorrectly on the RangeSelector's chart. To resolve this situation, use the options provided by the dataPrepareSettings configuration object. You can enable/disable data validation using the checkTypeForAllData option, or specify whether or not to convert the data source values to the type of the axis using the convertToAxisDataType option. In addition, you can sort the series points using the sortingMethod option.
equalBarWidth
Use the ignoreEmptyPoints property instead.
Specifies whether all bars in a series must have the same width, or may have different widths if any points in other series are missing.
If some values for a series are set to zero or not specified, bars that represent these values will be missing from the chart. To fill the empty area by extending the width of the neighboring bars, set the equalBarWidth property to false. The bars will have different widths, but there will be no empty areas.
To set a custom width for bars, as well as the spacing between bars, use the barWidth option.
If the widget's container is not large enough to contain bars of the specified width along with the specified spacing between them, the spacing will be ignored.
maxBubbleSize
When defining a bubble series, you specify a size field. The largest size value is represented by the largest bubble. Its diameter is calculated as follows:
d = maxBubbleSize * min(chartHeight, chartWidth)
minBubbleSize
When defining a bubble series, you specify a size field. The smallest size value is represented by the smallest bubble. The minBubbleSize option specifies the bubble's diameter in pixels.
palette
This option accepts either the name of a predefined palette or an array of colors. The array can include the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
Use the VizPalette enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Default, SoftPastel, HarmonyLight, Pastel, Bright, Soft, Ocean, Vintage, Violet, Carmine, DarkMoon, SoftBlue, DarkViolet, and GreenMist.
See Also
paletteExtensionMode
Specifies what to do with colors in the palette when their number is less than the number of series in the chart.
The following variants are available:
"blend"
Create a blend of two neighboring colors and insert it between these colors in the palette."alternate"
Repeat the full set of palette colors, alternating their normal, lightened, and darkened shades in that order."extrapolate"
Repeat the full set of palette colors, changing their shade gradually from dark to light.
Use the VizPaletteExtensionMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Blend, Alternate, and Extrapolate.
series
If you are going to display several series in the range selector's chart, assign an array of objects defining these series to this property. If a single series must be displayed in the chart, assign an object defining this series to this property. The properties of the series configuration object represent the options that can be set to define the series. To get information on all the properties of the series configuration object, refer to its description in the chartOptions reference section: series. Note that the RangeSelector widget may have its own default values for the series options.
If you display several series on the chart, utilize the commonSeriesSettings configuration object. This object allows you to set values that are common for all series in the chart.
seriesTemplate
In most cases, you can organize the array that is assigned to the dataSource option in the following way.
[
{ arg: arg1Value, series1Value: val11, series2Value: val12, ... }
{ arg: arg2Value, series1Value: val21, series2Value: val22, ... }
...
{ arg: argNValue, series1Value: valN1, series2Value: valN2, ... }
]Each object that is included in the array represents an argument value and the values of all series for this argument.
However, there are some scenarios in which you do not know exactly how many series will be added. In these cases, you will not be able to define the data source in the manner detailed above. Instead, define it in the following way.
[
{ seriesName: series1, arg: arg11Value, val: value11 }
{ seriesName: series1, arg: arg12Value, val: value12 }
...
{ seriesName: seriesM, arg: argM1Value, val: valueM1 }
{ seriesName: seriesM, arg: argM2Value, val: valueM2 }
...
]If you define a data source in this manner, set the argument and value fields using the argumentField and valueField properties of the commonSeriesSettings configuration object (for all series at once). Then, define a template for the series using the seriesTemplate configuration object. Within this object, set the data source field that specifies the series name to the nameField option.
If you need to specify individual values for the options of a particular series, assign a callback function to the customizeSeries option of the seriesTemplate object.
topIndent
Specifies an indent from the background's top to the topmost chart point. Accepts values from 0 to 1.
useAggregation
Use the enabled property instead.
By default, the RangeSelector chart displays all series points. But there may be situations when displaying all series points may affect chart performance. In this case, it is better to aggregate the series points rather than display all of them. For this purpose, set the useAggregation option to true. The aggregation is based on the median filter algorithm.
valueAxis
A chart integrated in the RangeSelector differs from a stand-alone Chart widget in the axes. The argument axis of the integrated chart is replaced by the RangeSelector scale. The value axis loses its visual representation along with ticks, labels, grids and strips, retaining only those properties that shape it.