Search results

Migration from Essential JS 1

This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.

RangeNavigator

Behaviour API in Essential JS 1 API in Essential JS 2
Allow snapping Property:allowSnapping

$("#range").ejRangeNavigator({ allowSnapping: true; });
Property:allowSnapping

let range: RangeNavigator = new RangeNavigator({ allowSnapping: true }); range.appendTo('#element');
Animation duration Not Applicable Property:animationDuration

let range: RangeNavigator = new RangeNavigator({ animationDuration: 2000 }); range.appendTo('#element');
Allow snapping Property:allowSnapping

$("#range").ejRangeNavigator({ allowSnapping: true; });
Property:allowSnapping

let range: RangeNavigator = new RangeNavigator({ allowSnapping: true }); range.appendTo('#element');
Border for range navigator Property:allowSnapping

$("#range").ejRangeNavigator({ border: { color: 'red', width: 2, opacity: 0.5 } });
Property:navigatorBorder

let range: RangeNavigator = new RangeNavigator({ navigatorBorder:{ color: 'pink', width: 2} }); range.appendTo('#element');
dataSource for range navigator Property:dataSource

$("#range").ejRangeNavigator({ dataSource: [{}] });
Property:dataSource

let range: RangeNavigator = new RangeNavigator({ dataSource: [] }); range.appendTo('#element');
enabling deffered update for range navigator Property:enableDeferedUpdate

$("#range").ejRangeNavigator({ enableDeferedUpdate: true });
Property:enableDeferredUpdate

let range: RangeNavigator = new RangeNavigator({ enableDeferredUpdate : false }); range.appendTo('#element');
multilevel level labels Property:labelSettings.higherLevelLabels

$("#range").ejRangeNavigator({ labelSettings.higherLevelLabels: { } });
Property:enableGrouping

let range: RangeNavigator = new RangeNavigator({ enableGrouping : false }); range.appendTo('#element');
enabling scroll bar Property:enableScrollBar

$("#range").ejRangeNavigator({ enablescrollBar: true });
Not Applicable
enabling auto resizing Property:enableAutoResize

$("#range").ejRangeNavigator({ enablescrollBar: true });
Not Applicable
responsive of range navigator Property:isResponsive

$("#range").ejRangeNavigator({ isResponsive: true });
Not Applicable
enabling RTL for range navigator Property:enableRtl

$("#range").ejRangeNavigator({ enableRtl: true });
Property:enableRtl

let range: RangeNavigator = new RangeNavigator({ enableRtl : false }); range.appendTo('#element');
interval for range navigator Property:valueAxisSettings.range.interval

$("#range").ejRangeNavigator({ valueAxisSettings.range.interval = 1 });
Property:interval

let range: RangeNavigator = new RangeNavigator({ interval : 1 }); range.appendTo('#element');
intervaltype for range navigator Property:valueAxisSettings.range.interval

$("#range").ejRangeNavigator({ valueAxisSettings.intervalType = 'Years' });
Property:intervalType

let range: RangeNavigator = new RangeNavigator({ intervalType : 'Months' }); range.appendTo('#element');
labelformat for range navigator Not applicable Property:labelFormat

let range: RangeNavigator = new RangeNavigator({ labelFormat : 'yMd' }); range.appendTo('#element');
label intersect action for range navigator Not applicable Property:labelIntersectAction

let range: RangeNavigator = new RangeNavigator({ labelIntersectAction : 'Hide' }); range.appendTo('#element');
labelStyle range navigator Property:valueAxisSettings.font

$("#range").ejRangeNavigator({ valueAxisSettings.font: { } });
Property:labelStyle

let range: RangeNavigator = new RangeNavigator({ labelStyle : 'Hide' }); range.appendTo('#element');
locale of range navigator Property:locale

$("#range").ejRangeNavigator({ locale: 'en-US' });
Property:labelStyle

let range: RangeNavigator = new RangeNavigator({ locale: 'en-US' }); range.appendTo('#element');
major grid lines of range navigator Property:valueAxisSettings.majorGridLines

$("#range").ejRangeNavigator({ valueAxisSettings: { majorGridLines: { width: 2, color: 'red' } } });
Property:majorGridLines

let range: RangeNavigator = new RangeNavigator({ majorGridLines: { width: 2, color: 'red' } }); range.appendTo('#element');
margin of range navigator Not Applicable Property:margin

let range: RangeNavigator = new RangeNavigator({ margin: { } }); range.appendTo('#element');
maximum value of range navigator Property:valueAxisSettings.range.max

$("#range").ejRangeNavigator({ valueAxisSettings: { range: { max: 34 } } });
Property:maximum

let range: RangeNavigator = new RangeNavigator({ maximum: 34 }); range.appendTo('#element');
minimum value of range navigator Property:valueAxisSettings.range.min

$("#range").ejRangeNavigator({ valueAxisSettings: { range: { min: 34 } } });
Property:minimum

let range: RangeNavigator = new RangeNavigator({ minimum: 4 }); range.appendTo('#element');
query for data source of range navigator Not Applicable Property:query

let range: RangeNavigator = new RangeNavigator({ query: '' }); range.appendTo('#element');
Secondary label alignment of range navigator Not Applicable Property:secondaryLabelAlignment

let range: RangeNavigator = new RangeNavigator({ secondaryLabelAlignment: 'Far' }); range.appendTo('#element');
Skeleton of range navigator axis Not Applicable Property:skeleton

let range: RangeNavigator = new RangeNavigator({ skeleton: '' }); range.appendTo('#element');
skeletontype of range navigator axis Not Applicable Property:skeletonType

let range: RangeNavigator = new RangeNavigator({ skeletonType: '' }); range.appendTo('#element');
Theme of range navigator Property:theme

$("#range").ejRangeNavigator({ theme: '' });
Property:theme

let range: RangeNavigator = new RangeNavigator({ theme: '' }); range.appendTo('#element');
Default selector value range navigator Property:selectedRangeSettings

$("#range").ejRangeNavigator({ selectedRangeSettings: { start: 2, end: 20} });
Property:value

let range: RangeNavigator = new RangeNavigator({ value: [ 2, 10] }); range.appendTo('#element');
Value type of range navigator Property:valueType

$("#range").ejRangeNavigator({ valueType: 'DateTime' });
Property:valueType

let range: RangeNavigator = new RangeNavigator({ valueType: 'Logarithmic' }); range.appendTo('#element');
Width of range navigator Property:size.width

$("#range").ejRangeNavigator({ size: { width: '200'} });
Property:width

let range: RangeNavigator = new RangeNavigator({ width: '400' }); range.appendTo('#element');
Height of range navigator Property:size.height

$("#range").ejRangeNavigator({ size: { height: '200'} });
Property:height

let range: RangeNavigator = new RangeNavigator({ height: '400' }); range.appendTo('#element');
Series settings for range navigator Property:seriesSettings

$("#range").ejRangeNavigator({ seriesSettings: { } });
Not Applicable
Range settings for range navigator Property:rangeSettings

$("#range").ejRangeNavigator({ rangeSettings: { start: 3, end: 6 } });
Not Applicable
Scroll range settings for range navigator Property:scrollRangeSettings

$("#range").ejRangeNavigator({ scrollRangeSettings: { start: 3, end: 6 } });
Not Applicable

Series

Behaviour API in Essential JS 1 API in Essential JS 2
animation Property:enableAnimation

$("#range").ejRangeNavigator({ enableAnimation: true });
Property:animation

let range: RangeNavigator = new RangeNavigator({ animation: { enable: true, duration: 2000 } }); range.appendTo('#element');
Border for range navigator series Not Applicable Property:border

let range: RangeNavigator = new RangeNavigator({ series: [{{border:{ color: 'pink', width: 2}}}] }); range.appendTo('#element');
dataSource for range navigator Property:series.dataSource

$("#range").ejRangeNavigator({ series: [{ dataSource: [{}] }] });
Property:series.dataSource

let range: RangeNavigator = new RangeNavigator({ series: [{ dataSource: [] }]; }); range.appendTo('#element');
query for data source of range navigator Not Applicable Property:query

let range: RangeNavigator = new RangeNavigator({ series: [ { query: '' }] }); range.appendTo('#element');
series type for range navigator Property:series.type

$("#range").ejRangeNavigator({ series: [{ type: '' }] });
Property:series.type

let range: RangeNavigator = new RangeNavigator({ series: [{type: '' }]; }); range.appendTo('#element');
series xName for range navigator Property:series.xName

$("#range").ejRangeNavigator({ series: [{ xName: '' }] });
Property:series.xName

let range: RangeNavigator = new RangeNavigator({ series: [{ xName: '' }]; }); range.appendTo('#element');
series yName for range navigator Property:series.yName

$("#range").ejRangeNavigator({ series: [{ yName: '' }] });
Property:series.yName

let range: RangeNavigator = new RangeNavigator({ series: [{ yName: '' }]; }); range.appendTo('#element');
series fill color for range navigator Property:series.fill

$("#range").ejRangeNavigator({ series: [{ fill: '' }] });
Property:series.fill

let range: RangeNavigator = new RangeNavigator({ series: [{ fill: '' }]; }); range.appendTo('#element');
series width for range navigator Property:series.width

$("#range").ejRangeNavigator({ series: [{ width: '' }] });
Property:series.width

let range: RangeNavigator = new RangeNavigator({ series: [{ width: '' }]; }); range.appendTo('#element');
series dashArray for range navigator Not Applicable Property:series.dashArray

let range: RangeNavigator = new RangeNavigator({ series: [{ dashArray: '' }]; }); range.appendTo('#element');

StyleSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Style settings of range navigator Property:navigatorStyleSettings

$("#range").ejRangeNavigator({ navigatorStyleSettings: { } });
Property:styleSettings

let range: RangeNavigator = new RangeNavigator({ styleSettings: {} }); range.appendTo('#element');
Selected region color of range navigator Property:selectedRegionColor

$("#range").ejRangeNavigator({ navigatorStyleSettings: { selectedRegionColor: 'red' } });
Property:selectedRegionColor

let range: RangeNavigator = new RangeNavigator({ styleSettings: { selectedRegionColor: 'red' } }); range.appendTo('#element');
UnSeleted region color of range navigator Property:unselectedRegionColor

$("#range").ejRangeNavigator({ navigatorStyleSettings: { unselectedRegionColor: 'red' } });
Property:unselectedRegionColor

let range: RangeNavigator = new RangeNavigator({ styleSettings: { unselectedRegionColor: 'red' } }); range.appendTo('#element');
Thumb color of range navigator Property:navigatorStyleSettings

$("#range").ejRangeNavigator({ navigatorStyleSettings: { thumbColor: ''red' } });
Property:thumbSettings

let range: RangeNavigator = new RangeNavigator({ styleSettings: { thumbSettings: 'pink' } }); range.appendTo('#element');
Thumb color of range navigator Property:navigatorStyleSettings

$("#range").ejRangeNavigator({ navigatorStyleSettings: { thumbColor: ''red' } });
Property:thumbSettings

let range: RangeNavigator = new RangeNavigator({ styleSettings: { thumbSettings: 'pink' } }); range.appendTo('#element');
Selected region opacity of range navigator Property:selectedRegionOpacity

$("#range").ejRangeNavigator({ navigatorStyleSettings: { selectedRegionOpacity: 0.4 } });
Not Applicable
Unselected region opacity of range navigator Property:unselectedRegionOpacity

$("#range").ejRangeNavigator({ navigatorStyleSettings: { unselectedRegionOpacity: 0.4 } });
Not Applicable
Background for thumb Property:background

$("#range").ejRangeNavigator({ navigatorStyleSettings: { background: 'red' } });
Not Applicable
border for thumb Property:border

$("#range").ejRangeNavigator({ navigatorStyleSettings: { border: { color: 'red', width: 2} } });
Not Applicable
Highlightsettings for range navigator Property:highlightSettings

$("#range").ejRangeNavigator({ navigatorStyleSettings: { highlightSettings: { } } });
Not Applicable
Selected style settings for range navigator Property:selectionSettings

$("#range").ejRangeNavigator({ navigatorStyleSettings: { selectionSettings: { } } });
Not Applicable
Left thumb template for range navigator Property:leftThumbTemplate

$("#range").ejRangeNavigator({ navigatorStyleSettings: { leftThumbTemplate: '' } });
Not Applicable
Right thumb template for range navigator Property:rightThumbTemplate

$("#range").ejRangeNavigator({ navigatorStyleSettings: { rightThumbTemplate: '' } });
Not Applicable

Tooltip

Behaviour API in Essential JS 1 API in Essential JS 2
tooltip Property:visible

$("#range").ejRangeNavigator({ tooltip: { visible: true } });
Property:enable

let range: RangeNavigator = new RangeNavigator({ tooltip: { enable: true } }); range.appendTo('#element');
background color of tooltip Property:backgroundColor

$("#range").ejRangeNavigator({ tooltip: { backgroundColor: 'red' } });
Property:fill

let range: RangeNavigator = new RangeNavigator({ tooltip: { fill: 'pink' } }); range.appendTo('#element');
Font style of tooltip Property:font

$("#range").ejRangeNavigator({ tooltip: { font: 'red' } });
Property:textStyle

let range: RangeNavigator = new RangeNavigator({ tooltip: { textStyle: 'pink' } }); range.appendTo('#element');
Label format of tooltip Property:labelFormat

$("#range").ejRangeNavigator({ tooltip: { labelFormat: 'yMd' } });
Property:format

let range: RangeNavigator = new RangeNavigator({ tooltip: { format: 'yMd' } }); range.appendTo('#element');
Display mode of tooltip Property:tooltipDisplayMode

$("#range").ejRangeNavigator({ tooltip: { tooltipDisplayMode: 'always' } });
Property:displayMode

let range: RangeNavigator = new RangeNavigator({ tooltip: { displayMode: 'Always' } }); range.appendTo('#element');
Template of tooltip Not Applicable Property:template

let range: RangeNavigator = new RangeNavigator({ tooltip: { template: '
Chart
' } }); range.appendTo('#element');
Border of tooltip Not Applicable Property:border

let range: RangeNavigator = new RangeNavigator({ tooltip: { border: { color: 'red', width: 2} } }); range.appendTo('#element');
Opacity of tooltip Not Applicable Property:opacity

let range: RangeNavigator = new RangeNavigator({ tooltip: { opacity: 0.5 } }); range.appendTo('#element');

Period Selector

Behaviour API in Essential JS 1 API in Essential JS 2
tooltip Not Applicable Property:enable

let range: RangeNavigator = new RangeNavigator({ periodSelector: { periods: [ { interval: 1, intervalType: 'Months', text: '1M' }], position: 'Top' } }); range.appendTo('#element');

Methods

Behaviour API in Essential JS 1 API in Essential JS 2
Print Not Applicable Property:print()

let range: RangeNavigator = new RangeNavigator({

}); range.print(‘chart’);

Export Not Applicable Property:export()

let range: RangeNavigator = new RangeNavigator({

}); range.export(‘JPEG’, ‘chart’);

Events

Behaviour API in Essential JS 1 API in Essential JS 2
Fires before loading the RangeNavigator. Property:load

$("#rangeNavigator").ejRangeNavigator({ load: () {
}

});

Property:load

let rangeNavigator: RangeNavigator = new RangeNavigator({ load: () => { } }); rangeNavigator.appendTo('#rangeNavigator');
Fires before loading the RangeNavigator. Property:loaded

$("#rangeNavigator").ejRangeNavigator({ loaded: () {
}

});

Property:loaded

let rangeNavigator: RangeNavigator = new RangeNavigator({ loaded: () => { } }); rangeNavigator.appendTo('#rangeNavigator');
Fires when the value changes in range navigator. Property:rangeChanged

$("#rangeNavigator").ejRangeNavigator({ rangeChanged: () {
}

});

Property:changed

let rangeNavigator: RangeNavigator = new RangeNavigator({ changed: () => { } }); rangeNavigator.appendTo('#rangeNavigator');
Fires before after the RangeNavigator. Not Applicable Property:changed

let rangeNavigator: RangeNavigator = new RangeNavigator({ resized: () => { } }); rangeNavigator.appendTo('#rangeNavigator');
Fires before tooltip the RangeNavigator. Not Applicable Property:tooltipRender

let rangeNavigator: RangeNavigator = new RangeNavigator({ tooltipRender: () => { } }); rangeNavigator.appendTo('#rangeNavigator');
Fires before period render in the RangeNavigator. Not Applicable Property:selectorRender

let rangeNavigator: RangeNavigator = new RangeNavigator({ selectorRender: () => { } }); rangeNavigator.appendTo('#rangeNavigator');
Fires when scrollStart the RangeNavigator. Property:scrollStart

$("#rangeNavigator").ejRangeNavigator({ scrollStart: () {
}

});

Not Applicable
Fires when scrollEnd the RangeNavigator. Property:scrollEnd

$("#rangeNavigator").ejRangeNavigator({ scrollEnd: () {
}

});

Not Applicable
Fires when selected range Start the RangeNavigator. Property:selectedRangeStart

$("#rangeNavigator").ejRangeNavigator({ selectedRangeStart: () {
}

});

Not Applicable
Fires when selected range ends the RangeNavigator. Property:selectedRangeEnd

$("#rangeNavigator").ejRangeNavigator({ selectedRangeEnd: () {
}

});

Not Applicable
Fires when scroll range changed in the RangeNavigator. Property:scrollChanged

$("#rangeNavigator").ejRangeNavigator({ scrollChanged: () {
}

});

Not Applicable
Fires when click in the RangeNavigator. Property:click

$("#rangeNavigator").ejRangeNavigator({ click: () {
}

});

Not Applicable
Fires when right click in the RangeNavigator. Property:rightClick

$("#rangeNavigator").ejRangeNavigator({ rightClick: () {
}

});

Not Applicable
Fires when double click in the RangeNavigator. Property:doubleClick

$("#rangeNavigator").ejRangeNavigator({ doubleClick: () {
}

});

Not Applicable