.svg)
new ContinuousZoom(params)
Add-on that responds to the chart zoom action, changing periodicities as the number of ticks and/or candle width 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 take place as the same range is displayed in a different periodicity, inappropriate. 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
|
- 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,
},
});