Class: RangeSlider

CIQ. RangeSlider


new RangeSlider(params)

Add-On that puts a range slider under the chart.

This allows the dataSegment to be selectable as a portion of the dataset.

Requires addOns.js and jquery.

It also requires additional CSS.
Either add:

<link rel="stylesheet" type="text/css" href="css/chartiq.css" media="screen" />

Or explicitly include this CSS:

.stx_range_slider.shading {
		background-color: rgba(128, 128, 128, 0.3);
		border: solid 2px #0090b7;
		width: 5px; 
}

Once instantiated, it can be displayed or hidden by simply setting the rangeSlider parameter of the primary chart's layout object, and then issuing a layout change event to trigger the new status. Make sure to use the callback to enable the slider on initial load to prevent 'out of sequence' issues. See examples for exact syntax.

Remember, a range slider is simply just 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 will be a sub element of the primary chart, living inside 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;

If using chartIQ Web Components, the slider needs to be created before the UI manager (startUI) is called for custom themes to apply.

It is important to note that the range slider chart container will 'create itself' UNDER the primary chart container, not INSIDE. As such, to ensure styling is shared between the 2 containers, so they match in look and feel, all the styling must be on a parent div container rather than the primary chart container itself.
For example, do this:

<div class="all-charts">
  <div style="grid-column: span 6;grid-row: span 2;">
    <div class="chartwrap"> <!-- begin of wrapper with desired styling -->
      <div class="chartContainer1" style="width:100%;height:100%;position:relative"></div>
      <!-- the slider will be added here -->
    </div>
  </div> <!-- end of wrapper -->
</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 working example:

Parameters:
Name Type Description
params object

Configuration parameters

Properties
Name Type Argument Default Description
stx CIQ.ChartEngine <optional>

The chart object

height number <optional>
95

Height of range slider panel

yAxis object <optional>

optional yAxis parameters

chartContainer number <optional>
stxx.container

jquery handle to the main chart container

Since:
  • 6.1.0 added yAxis parameter

Examples

Declare a range slider and enable by default using the loadChart callback

var 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.newChart("SPY", null, 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.
		}
});	 

Declare a range slider and enable/disable using commands to be triggered from a menu

var 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.