new RangeSlider(params)
Add-on that adds a range slider to the chart.
The range slider allows the dataSegment
to be selectable as a portion of the data set.
The range slider can be toggled using the Ctrl+Alt+R keystroke combination (see the
rangeSlider
action in hotkeyConfig.hotkeys
in js/defaultConfiguration.js).
Requires addOns.js.
Also requires additional CSS. Add the following style sheet:
<link rel="stylesheet" type="text/css" href="css/chartiq.css" media="screen" />
or directly include this CSS:
.stx_range_slider.shading {
background-color: rgba(128, 128, 128, 0.3);
border: solid 2px #0090b7;
width: 5px;
}
Once instantiated, the range slider can be displayed or hidden by setting the rangeSlider
parameter of the primary chart's layout object and then issuing
a layout change event to trigger the new status. When initialing loading the chart, enable the
range slider in a callback function to prevent out‑of‑sequence issues. See the
examples below.
A range slider is simply another chart. So you configure it and customize it using the same
parameters as you would the primary chart. The only difference is that the slider object is a
sub‑element of the primary chart, contained in the slider.slider
object.
For example, if you wanted to turn off the x-axis on the slider, assuming a chart instantiated
as stxx
, you would execute:
stxx.slider.slider.xaxisHeight = 0;
It is important to note that the range slider chart DOM element creates itself below the
primary chart container element, not inside the container. As such, all styling must be on a
parent div
container rather than on the primary chart container itself to ensure styling is
shared between the chart and range slider containers.
For example, do this:
<div class="all-charts">
<div style="grid-column: span 6; grid-row: span 2;">
<div class="chartwrap"> <!-- Beginning of wrapper with desired styling. -->
<div class="chartContainer1" style="width:100%;height:100%;position:relative"></div>
<!-- The slider will be added here. -->
</div> <!-- End of wrapper. -->
</div>
</div>
not this:
<div class="all-charts">
<div class="chartwrap" style="grid-column: span 6; grid-row: span 2;">
<div class="chartContainer1" style="width: 100%; height: 100%; position: relative"></div>
</div>
</div>
Range slider example:
Parameters:
Name | Type | Description | ||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
params |
object | Configuration parameters. Properties
|
- Since:
-
- 4.0.0
- 6.1.0 Added
params.yAxis
. - 8.0.0 Added
params.menuContextClass
.
Examples
const stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });
stxx.attachQuoteFeed(quoteFeedSimulator,{ refreshInterval: 1, bufferSize: 200 });
// Instantiate a range slider.
new CIQ.RangeSlider({ stx: stxx });
function displayChart(){
stxx.loadChart("SPY", null, function() {
// For smoother visualization, enable after the main chart has completed loading its data.
stxx.layout.rangeSlider = true; // Show the slider.
stxx.changeOccurred("layout"); // Signal the change to force a redraw.
});
}
const stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });
// Instantiate a range slider.
new CIQ.RangeSlider({ stx: stxx });
// To display the slider from a menu use:
stxx.layout.rangeSlider = true; // Show the slider.
stxx.changeOccurred("layout"); // Signal the change to force a redraw.
// To hide the slider from a menu use:
stxx.layout.rangeSlider = false; // Hide the slider.
stxx.changeOccurred("layout"); // Signal the change to force a redraw.
Methods
-
updateStyles(obj, attribute, value)
-
Dynamically updates the styling of the range slider.
This method can be used to update CSS styles if you are injecting stylesheets using JavaScript.
Parameters:
Name Type Description obj
string The CSS selector for which a style property is changed.
attribute
string The style property changed in the CSS selector rule-set.
value
string The value to apply to the CSS property.
- Since:
-
8.0.0
Examples
// Set the shading of the range slider. stxx.slider.updateStyles( 'stx_range_slider shading', 'backgroundColor', 'rgba(200, 50, 50, 0.45)' );
// Set the color of the bars of the range slider to red. stxx.slider.updateStyles( 'stx_range_slider shading', 'borderTopColor', 'rgba(255, 0, 0)' );