Class: ContinuousZoom

CIQ. ContinuousZoom


new ContinuousZoom(params)

Add-On that allows a "continuous zoom", changing periodicities as the maxTicks and/or candlewidth hits a set boundary.

Although this feature is available for all chart styles, it shows best on continuous renderings such as lines and mountains, vs. candles and bars. This is because some users may find the changes in candle width, that takes place as the same range is displayed in a different periodicity, unnatural. The effect can be mitigated by increasing the number of boundaries so periodicities change more often, preventing large candle width changes; and by using the periodicity roll up feature instead of fetching new data from a quote feed. See examples.

See CIQ.ChartEngine#setPeriodicity and CIQ.ChartEngine#createDataSet

Requires addOns.js

The feature will not work without supplying at least one element within the periodicities array, and at least one property within the boundaries object.

Parameters:
Name Type Description
params object

Configuration parameters

Properties
Name Type Description
stx CIQ.ChartEngine

The chart object

periodicities array

Set this array with eligible periodicities here, in any order. These will be the periodicities which will be used by the continuous zooming once a boundary is hit. The periodicities are objects with period, interval, [timeUnit] properties (see CIQ.ChartEngine#setPeriodicity).

boundaries object

Optional boundary cases to trigger the periodicity change. Hitting a max boundary will switch to the next larger periodicity; hitting a min boundary will switch to the next smaller periodicity.

Properties
Name Type Argument Description
maxCandleWidth number <optional>

largest size of candle in pixels to display before switching

minCandleWidth number <optional>

smallest size of candle in pixels to display before switching

maxTicks number <optional>

most number of ticks to display before switching

minTicks number <optional>

least number of ticks to display before switching

Since:
  • 7.0.0
Examples
new CIQ.ContinuousZoom({
	stx: stxx,
	periodicities:[
		{period:1,   interval:"month"},
		{period:1,   interval:"day"},
		{period:2,   interval:30},
		{period:1,   interval:5},
		{period:15,  interval:1,  timeUnit:"second"},
		{period:1,   interval:1,  timeUnit:"second"}
	],
	boundaries:{
		maxCandleWidth: 100,
		minCandleWidth: 3,
		maxTicks: 500,
		minTicks: 10
	}
});
//smother periodicity change by rolling daily into weekly and monthly. 
// Also try reusing the same interval data and have the chart roll it instead of fetching new data.
stxx.dontRoll=false; 
new CIQ.ContinuousZoom({
    stx: stxx,
    periodicities:[
    	// daily interval data
        {period:1,   interval:"month"},
        {period:2,   interval:"week"},
        {period:1,   interval:"week"},
        {period:3,   interval:"day"},
        {period:1,   interval:"day"},
        // 30 minute interval data
        {period:16,   interval:30},
        {period:8,   interval:30},
        {period:4,   interval:30},
        {period:2,   interval:30},
        // one minute interval data
        {period:30,   interval:1},
        {period:15,   interval:1},
        {period:10,   interval:1},
        {period:5,   interval:1},
        {period:2,   interval:1},
        {period:1,   interval:1},
        // one second interval data
        {period:30,  interval:1,  timeUnit:"second"},
        {period:15,  interval:1,  timeUnit:"second"},
        {period:5,   interval:1,  timeUnit:"second"},
        {period:2,   interval:1,  timeUnit:"second"},
        {period:1,   interval:1,  timeUnit:"second"},
    ],
    boundaries:{
        maxCandleWidth: 15,
        minCandleWidth: 3
   }
});