Ej1 api migration in EJ2 TypeScript Linear gauge control
19 Apr 202324 minutes to read
This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2.
Linear gauge dimensions
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Height |
Property: height $(“#container”).ejLinearGauge({ height: 150 }); |
Property: height let gauge: LinearGauge = new LinearGauge({ height : ‘150px’ }); gauge.appendTo(‘#container’); |
Width |
Property: width $(“#container”).ejLinearGauge({ width: 200 }); |
Property: width let gauge: LinearGauge = new LinearGauge({ width : ‘200px’ }); gauge.appendTo(‘#container’); |
Height(In Percentage) | Not Applicable |
Property: height let gauge: LinearGauge = new LinearGauge({ height : ‘70%’ }); gauge.appendTo(‘#container’); |
Width(In Percentage) | Not Applicable |
Property: width let gauge: LinearGauge = new LinearGauge({ width : ‘100%px’ }); gauge.appendTo(‘#container’); |
Line customizaton
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Height |
Property: scales.length $(“#container”).ejLinearGauge({ scales:[{ length: 300 }] }); |
Property: axes.line.height let gauge: LinearGauge = new LinearGauge({ axes: [{ line: { height : 150 } }] }); gauge.appendTo(‘#container’); |
Width |
Property: scales.width $(“#container”).ejLinearGauge({ scales:[{ width: 300 }] }); |
Property: axes.line.width let gauge: LinearGauge = new LinearGauge({ axes: [{ line: { width : 2 } }] }); gauge.appendTo(‘#container’); |
Color |
Property: scales.backgroundColor $(“#container”).ejLinearGauge({ scales:[{ backgroundColor: “blue” }] }); |
Property: axes.line.color let gauge: LinearGauge = new LinearGauge({ axes: [{ line: { color : ‘#4286f4’ } }] }); gauge.appendTo(‘#container’); |
Offset | Not Applicable |
Property: axes.line.offset let gauge: LinearGauge = new LinearGauge({ axes: [{ line: { offset : 2 } }] }); gauge.appendTo(‘#container’); |
Opacity |
Property: scales.opacity $(“#container”).ejLinearGauge({ scales:[{ opacity: 0.2 }] }); |
Not Applicable |
DashArray | Not Applicable |
Property: axes.line.dashArray let gauge: LinearGauge = new LinearGauge({ axes: [{ line: { dashArray : ‘1’ } }] }); gauge.appendTo(‘#container’); |
Ticks
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Type of Ticks |
Property: scales.ticks.type $(“#container”).ejLinearGauge({ scales:[{ ticks: [{ type: “majorinterval” }] }] }); |
Property: axes.majorTicks.height let gauge: LinearGauge = new LinearGauge({ axes: [{ majorTicks: { } }] }); gauge.appendTo(‘#container’); |
Height of Major Ticks |
Property: scales.ticks.height $(“#container”).ejLinearGauge({ scales: [{ ticks: [{ type: “majorinterval”, height: 8 }] }] }); |
Property: axes.majorTicks.height let gauge: LinearGauge = new LinearGauge({ axes: [{ majorTicks: { height : 10 } }] }); gauge.appendTo(‘#container’); |
Width of Major Ticks |
Property: scales.ticks.width $(“#container”).ejLinearGauge({ scales:[{ ticks: [{ type: “majorinterval”, width: 5 }] }] }); |
Property: axes.majorTicks.width let gauge: LinearGauge = new LinearGauge({ axes: [{ majorTicks: { width : 2 } }] }); gauge.appendTo(‘#container’); |
Color of Major Ticks |
Property: scales.ticks.color $(“#container”).ejLinearGauge({ scales:[{ ticks: [{ type: “majorinterval”, color: “Blue” }] }] }); |
Property: axes.majorTicks.color let gauge: LinearGauge = new LinearGauge({ axes: [{ majorTicks: { color: “Blue: } }] }); gauge.appendTo(‘#container’); |
Offset for Major Ticks |
Property: scales.ticks.distanceFromScale $(“#container”).ejLinearGauge({ scales:[{ ticks: [{ distanceFromScale: { x: 5, y: 5 }, type: “majorinterval” }] }] }); |
Property: axes.majorTicks.offset let gauge: LinearGauge = new LinearGauge({ axes: [{ majorTicks: { offset : 1 } }] }); gauge.appendTo(‘#container’); |
Interval of Major Ticks |
Property: scales.majorIntervalValue $(“#container”).ejLinearGauge({ scales: [{ majorIntervalValue: 15 }] }); |
Property: axes.majorTicks.interval let gauge: LinearGauge = new LinearGauge({ axes: [{ majorTicks: { interval : 20 } }] }); gauge.appendTo(‘#container’); |
Angle of Major Ticks |
Property: scales.ticks.angle $(“#container”).ejLinearGauge({ scales:[{ ticks: [{ type: “majorinterval”, angle: 30 }] }] }); |
Not Applicable |
Opcity of Major Ticks |
Property: scales.ticks.opacity $(“#container”).ejLinearGauge({ scales:[{ ticks: [{ type: “majorinterval”, opacity: 0.5 }] }] }); |
Not Applicable |
Height of Minor Ticks |
Property: scales.ticks.height $(“#container”).ejLinearGauge({ scales: [{ ticks: [{ type: “minorinterval”, height: 8 }] }] }); |
Property: axes.minorTicks.height let gauge: LinearGauge = new LinearGauge({ axes: [{ minorTicks: { height : 10 } }] }); gauge.appendTo(‘#container’); |
Width of Minor Ticks |
Property: scales.ticks.width $(“#container”).ejLinearGauge({ scales:[{ ticks: [{ type: “minorinterval”, width: 5 }] }] }); |
Property: axes.minorTicks.width let gauge: LinearGauge = new LinearGauge({ axes: [{ minorTicks: { width : 2 } }] }); gauge.appendTo(‘#container’); |
Color of Minor Ticks |
Property: scales.ticks.color $(“#container”).ejLinearGauge({ scales:[{ ticks: [{ type: “minorinterval”, color: “Blue” }] }] }); |
Property: axes.minorTicks.color let gauge: LinearGauge = new LinearGauge({ axes: [{ minorTicks: { color: “Blue: } }] }); gauge.appendTo(‘#container’); |
Offset for Minor Ticks |
Property: scales.ticks.distanceFromScale $(“#container”).ejLinearGauge({ scales:[{ ticks: [{ distanceFromScale: { x: 5, y: 5 }, type: “minorinterval” }] }] }); |
Property: axes.minorTicks.offset let gauge: LinearGauge = new LinearGauge({ axes: [{ minorTicks: { offset : 1 } }] }); gauge.appendTo(‘#container’); |
Interval of Minor Ticks |
Property: scales.minorIntervalValue $(“#container”).ejLinearGauge({ scales: [{ minorIntervalValue: 8 }] }); |
Property: axes.minorTicks.interval let gauge: LinearGauge = new LinearGauge({ axes: [{ minorTicks: { interval : 5 } }] }); gauge.appendTo(‘#container’); |
Angle of Minor Ticks |
Property: scales.ticks.angle $(“#container”).ejLinearGauge({ scales:[{ ticks: [{ type: “minorinterval”, angle: 30 }] }] }); |
Not Applicable |
Opcity of Minor Ticks |
Property: scales.ticks.opacity $(“#container”).ejLinearGauge({ scales:[{ ticks: [{ type: “minorinterval”, opacity: 0.5 }] }] }); |
Not Applicable |
Labels
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Angle |
Property: scales.labels.angle $(“#container”).ejLinearGauge({ scales:[{ labels: [{ angle: 15 }] }] }); |
Not Applicable |
Offset |
Property: scales.labels.distanceFromScale $(“#container”).ejLinearGauge({ scales:[{ labels: [{ distanceFromScale: { x: -5, y: 10 } }] }] }); |
Property: axes.labelStyle.offset let gauge: LinearGauge = new LinearGauge({ axes: [{ labelStyle: { offset : 3 } }] }); gauge.appendTo(‘#container’); |
Format |
Property: scales.labels.unitText $(“#container”).ejLinearGauge({ scales:[{ labels: [{ unitText: “F” }] }] }); |
Property: axes.labelStyle.format let gauge: LinearGauge = new LinearGauge({ axes: [{ labelStyle: { format: ‘c’ } }] }); gauge.appendTo(‘#container’); |
Unit Text Placement |
Property: scales.labels.unitTextPlacement $(“#container”).ejLinearGauge({ scales:[{ labels: [{ unitTextPlacement: “front” }] }] }); |
Not Applicable |
Label Range Color | Not Applicable |
Property: axes.labelStyle.useRangeColor let gauge: LinearGauge = new LinearGauge({ axes: [{ labelStyle: { useRangeColor: true } }] }); gauge.appendTo(‘#container’); |
Opacity |
Property: scales.labels.opacity $(“#container”).ejLinearGauge({ scales:[{ labels: [{ opacity: 0.5 }] }] }); |
Property: axes.labelStyle.font.opacity let gauge: LinearGauge = new LinearGauge({ axes: [{ labelStyle: { font: { opacity: 5 } } }] }); gauge.appendTo(‘#container’); |
Label Text Color |
Property: scales.labels.textColor $(“#container”).ejLinearGauge({ scales:[{ labels: [{ textColor: “Red” }] }] }); |
Property: axes.labelStyle.font.color let gauge: LinearGauge = new LinearGauge({ axes: [{ labelStyle: { font:{ color: ‘red’ } } }] }); gauge.appendTo(‘#container’); |
Label Font Family |
Property: scales.labels.font.fontFamily $(“#container”).ejLinearGauge({ scales:[{ labels: [{ font: { fontFamily: “Segoe UI” } }] }] }); |
Property: axes.labelStyle.font.fontFamily let gauge: LinearGauge = new LinearGauge({ axes: [{ labelStyle: { font:{ fontFamily: ‘Arial’ } } }] }); gauge.appendTo(‘#container’); |
Label Font Style |
Property: scales.labels.font.fontStyle $(“#container”).ejLinearGauge({ scales:[{ labels: [{ font: { fontStyle: ej.datavisualization.LinearGauge.FontStyle.Normal } }] }] }); |
Property: axes.labelStyle.font.fontStyle let gauge: LinearGauge = new LinearGauge({ axes: [{ labelStyle: { font: { fontStyle: ‘Bold’ } } }] }); gauge.appendTo(‘#container’); |
Label Size |
Property: scales.labels.font.size $(“#container”).ejLinearGauge({ scales:[{ labels: [{ font: { size: “20px” } }] }] }); |
Property: axes.labelStyle.font.size let gauge: LinearGauge = new LinearGauge({ axes: [{ labelStyle: { font:{ size: “15px” } } }] }); gauge.appendTo(‘#container’); |
Label Font Weight | Not Applicable |
Property: axes.labelStyle.font.fontWeight let gauge: LinearGauge = new LinearGauge({ axes: [{ labelStyle: { font:{ fontWeight: ‘4’ } } }] }); gauge.appendTo(‘#container’); |
Axis
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Minimum Value |
Property: scales.minimum $(“#container”).ejLinearGauge({ scales: [{ minimum: 20 }] }); |
Property: axes.minimum let gauge: LinearGauge = new LinearGauge({ axes: [{ minimum: 20 }] }); gauge.appendTo(‘#container’); |
Maximum Value |
Property: scales.maximum $(“#container”).ejLinearGauge({ scales: [{ maximum: 120 }] }); |
Property: axes.maximum let gauge: LinearGauge = new LinearGauge({ axes: [{ maximum: 120 }] }); gauge.appendTo(‘#container’); |
Inverted Position | Not Applicable |
Property: axes.isInversed let gauge: LinearGauge = new LinearGauge({ axes: [{ isInversed: true }] }); gauge.appendTo(‘#container’); |
Opposed Position | Not Applicable |
Property: axes.opposedPosition let gauge: LinearGauge = new LinearGauge({ axes: [{ opposedPosition: true }] }); gauge.appendTo(‘#container’); |
Ranges
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Start Value |
Property: scales.ranges.startValue $(“#container”).ejLinearGauge({ scales:[{ ranges: [{ startValue: 20 }] }] }); |
Property: axes.ranges.start let gauge: LinearGauge = new LinearGauge({ axes: [{ ranges: [{ start: 20 }] }] }); gauge.appendTo(‘#container’); |
End Value |
Property: scales.ranges.endValue $(“#container”).ejLinearGauge({ scales:[{ ranges: [{ endValue: 20 }] }] }); |
Property: axes.ranges.end let gauge: LinearGauge = new LinearGauge({ axes: [{ ranges: [{ end: 20 }] }] }); gauge.appendTo(‘#container’); |
Start Width |
Property: scales.ranges.startWidth $(“#container”).ejLinearGauge({ scales:[{ ranges: [{ startWidth: 10 }] }] }); |
Property: axes.ranges.startWidth let gauge: LinearGauge = new LinearGauge({ axes: [{ ranges: [{ startWidth: 10 }] }] }); gauge.appendTo(‘#container’); |
End Width |
Property: scales.ranges.endWidth $(“#container”).ejLinearGauge({ scales:[{ ranges: [{ endWidth: 15 }] }] }); |
Property: axes.ranges.endWidth let gauge: LinearGauge = new LinearGauge({ axes: [{ ranges: [{ endWidth: 15 }] }] }); gauge.appendTo(‘#container’); |
Color |
Property: scales.ranges.backgroundColor $(“#container”).ejLinearGauge({ scales:[{ ranges: [{ backgroundColor: “red” }] }] }); |
Property: axes.ranges.color let gauge: LinearGauge = new LinearGauge({ axes: [{ ranges: [{ color: “red” }] }] }); gauge.appendTo(‘#container’); |
Offset |
Property: scales.ranges.distanceFromScale $(“#container”).ejLinearGauge({ scales:[{ ranges: [{ distanceFromScale: 10 }] }] }); |
Property: axes.ranges.offset let gauge: LinearGauge = new LinearGauge({ axes: [{ ranges: [{ offset: 10 }] }] }); gauge.appendTo(‘#container’); |
Range Position |
Property: scales.ranges.placement $(“#container”).ejLinearGauge({ scales:[{ ranges: [{ placement: “Near” }] }] }); |
Property: axes.ranges.position let gauge: LinearGauge = new LinearGauge({ axes: [{ ranges: [{ position: ‘Inside’ }] }] }); gauge.appendTo(‘#container’); |
Opacity |
Property: scales.ranges.opacity $(“#container”).ejLinearGauge({ scales:[{ ranges: [{ opacity: 0.3 }] }] }); |
Not Applicable |
Border Customization |
Property: scales.ranges.border $(“#container”).ejLinearGauge({ scales:[{ ranges: [{ border: { color: “green”, width: 2 } }] }] }); |
Property: axes.ranges.border let gauge: LinearGauge = new LinearGauge({ axes: [{ ranges: [{ border: { color: “blue”, width: 2 } }] }] }); gauge.appendTo(‘#container’); |
Bar Pointer
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Bar Pointer |
Property: scales.barPointers.value $(“#container”).ejLinearGauge({ scales:[{ barPointers: [{ value: 20 }] }] }); |
Property: axes.pointers.value let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Bar’, value: 20 }] }] }); gauge.appendTo(‘#container’); |
Color of Bar Pointer |
Property: scales.barPointers.backgroundColor $(“#container”).ejLinearGauge({ scales:[{ barPointers: [{ value: 20, backgroundColor: “red” }] }] }); |
Property: axes.pointers.color let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Bar’, value: 20, color: ‘red’ }] }] }); gauge.appendTo(‘#container’); |
Offset of Bar Pointer |
Property: scales.barPointers.distanceFromScale $(“#container”).ejLinearGauge({ scales:[{ barPointers: [{ value: 40, distanceFromScale: 20 }] }] }); |
Property: axes.pointers.offset let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Bar’, value: 20, offset: 20 }] }] }); gauge.appendTo(‘#container’); |
Opacity of Bar Pointer |
Property: scales.barPointers.opacity $(“#container”).ejLinearGauge({ scales:[{ barPointers: [{ value: 40, opacity: 0.5 }] }] }); |
Property: axes.pointers.opacity let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Bar’, value: 20, opacity: 0.5 }] }] }); gauge.appendTo(‘#container’); |
Width of Bar Pointer |
Property: scales.barPointers.width $(“#container”).ejLinearGauge({ scales:[{ barPointers: [{ value: 40, width: 25 }] }] }); |
Property: axes.pointers.width let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Bar’, value: 20, width: 25 }] }] }); gauge.appendTo(‘#container’); |
Gradients of Bar Pointer |
Property: scales.barPointers.gradients $(“#container”).ejLinearGauge({ scales:[{ barPointers: [{ value: 40, gradients: { colorInfo:[{ colorStop : 0, color:”#FFFFFF”}] } }] }] }); |
Not Applicable |
Border of Bar Pointer |
Property: scales.barPointers.border $(“#container”).ejLinearGauge({ scales:[{ barPointers: [{ value: 40, border: { color: “red”, width: 2 } }] }] }); |
Property: axes.pointers.border let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Bar’, value: 20, border: { color: ‘red’, width: 2.5 } }] }] }); gauge.appendTo(‘#container’); |
Animation of Bar Pointer |
Property: enableAnimation $(“#container”).ejLinearGauge({ enableAnimation: true }] }); |
Property: axes.pointers.animationDuration let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Bar’, value: 20, animationDuration: 2500 }] }] }); gauge.appendTo(‘#container’); |
Rounded Corner of Bar Pointer | Not Applicable |
Property: axes.pointers.roundedCornerRadius let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Bar’, value: 20, roundedCornerRadius: 15 }] }] }); gauge.appendTo(‘#container’); |
Marker Pointer
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Marker Pointer |
Property: scales.markerPointers.value $(“#container”).ejLinearGauge({ scales:[{ markerPointers: [{ value: 20 }] }] }); |
Property: axes.pointers.value let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Marker’, value: 20 }] }] }); gauge.appendTo(‘#container’); |
Color of Marker Pointer |
Property: scales.markerPointers.backgroundColor $(“#container”).ejLinearGauge({ scales:[{ markerPointers: [{ value: 20, backgroundColor: “blue” }] }] }); |
Property: axes.pointers.color let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Marker’, value: 20, color: ‘red’ }] }] }); gauge.appendTo(‘#container’); |
Offset of Marker Pointer |
Property: scales.markerPointers.distanceFromScale $(“#container”).ejLinearGauge({ scales:[{ markerPointers: [{ value: 40, distanceFromScale: 10 }] }] }); |
Property: axes.pointers.offset let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Marker’, value: 20, offset: 10 }] }] }); gauge.appendTo(‘#container’); |
Opacity of Marker Pointer |
Property: scales.markerPointers.opacity $(“#container”).ejLinearGauge({ scales:[{ markerPointers: [{ value: 40, opacity: 1 }] }] }); |
Property: axes.pointers.opacity let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Marker’, value: 20, opacity: 1 }] }] }); gauge.appendTo(‘#container’); |
Width of Marker Pointer |
Property: scales.markerPointers.width $(“#container”).ejLinearGauge({ scales:[{ markerPointers: [{ value: 40, width: 20 }] }] }); |
Property: axes.pointers.width let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Marker’, value: 20, width: 25 }] }] }); gauge.appendTo(‘#container’); |
Gradients of Marker Pointer |
Property: scales.markerPointers.gradients $(“#container”).ejLinearGauge({ scales:[{ markerPointers: [{ value: 40, gradients:{colorInfo:[{colorStop : 0, color:”#FFFFFF”}]} }] }] }); |
Not Applicable |
Border of Marker Pointer |
Property: scales.markerPointers.border $(“#container”).ejLinearGauge({ scales:[{ markerPointers: [{ value: 40, border: { color: “red”, width: 2 } }] }] }); |
Property: axes.pointers.border let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Marker’, value: 20, border: { color: ‘red’, width: 2.5 } }] }] }); gauge.appendTo(‘#container’); |
Animation of Marker Pointer |
Property: enableMarkerPointerAnimation $(“#container”).ejLinearGauge({ enableMarkerPointerAnimation: true }] }); |
Property: axes.pointers.animationDuration let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Marker’, value: 20, animationDuration: 1000 }] }] }); gauge.appendTo(‘#container’); |
Type of Marker Pointer |
Property: scales.markerPointers.type $(“#container”).ejLinearGauge({ scales:[{ markerPointers: [{ value: 40, type: ej.datavisualization.LinearGauge. MarkerType.Diamond }] }] }); |
Property: axes.pointers.markerType let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Marker’, value: 20, markerType: ‘Diamond’ }] }] }); gauge.appendTo(‘#container’); |
Placement of Marker Pointer |
Property: scales.markerPointers.placement $(“#container”).ejLinearGauge({ scales:[{ markerPointers: [{ value: 40, placement: ej.datavisualization.LinearGauge. PointerPlacement.Near }] }] }); |
Property: axes.pointers.placement let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Marker’, value: 20, placement: ‘Center’ }] }] }); gauge.appendTo(‘#container’); |
Drag of Marker Pointer |
Property: readOnly $(“#container”).ejLinearGauge({ readOnly: false } |
Property: axes.pointers.enableDrag let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Marker’, value: 20, enableDrag: true }] }] }); gauge.appendTo(‘#container’); |
Image Marker Pointer | Not Applicable |
Property: axes.pointers.imageUrl let gauge: LinearGauge = new LinearGauge({ axes: [{ pointers: [{ type: ‘Marker’, value: 20, imageUrl: ‘./image.png’ }] }] }); gauge.appendTo(‘#container’); |
Annotation
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Content |
Property: scales.customLabels.value $(“#container”).ejLinearGauge({ scales:[{ showCustomLabels: true, customLabels: [{ value: “LinearGauge” }] }] }); |
Property: annotations.content let gauge: LinearGauge = new LinearGauge({ annotation: [{ content: “Annotation” }] }); gauge.appendTo(‘#container’); |
Horizontal Alignment | Not Applicable |
Property: annotations.horizontalAlignment let gauge: LinearGauge = new LinearGauge({ annotation: [{ content: “Annotation”, horizontalAlignment: ‘Center’ }] }); gauge.appendTo(‘#container’); |
Vertical Alignment | Not Applicable |
Property: annotations.verticalAlignment let gauge: LinearGauge = new LinearGauge({ annotation: [{ content: “Annotation”, verticalAlignment: ‘Far’ }] }); gauge.appendTo(‘#container’); |
Position of X |
Property: scales.customLabels.position.x $(“#container”).ejLinearGauge({ scales:[{ showCustomLabels: true, customLabels: [{ value: “LinearGauge”, position: { x: 20 } }] }] }); |
Property: annotations.x let gauge: LinearGauge = new LinearGauge({ annotation: [{ content: “Annotation”, x: 35 }] }); gauge.appendTo(‘#container’); |
Position of Y |
Property: scales.customLabels.position.y $(“#container”).ejLinearGauge({ scales:[{ showCustomLabels: true, customLabels: [{ value: “LinearGauge”, position: { y: 30 } }] }] }); |
Property: annotations.y let gauge: LinearGauge = new LinearGauge({ annotation: [{ content: “Annotation”, y: 40 }] }); gauge.appendTo(‘#container’); |
Z Index | Not Applicable |
Property: annotations.zIndex let gauge: LinearGauge = new LinearGauge({ annotation: [{ content: “Annotation”, zIndex: 1 }] }); gauge.appendTo(‘#container’); |
Axis Index | Not Applicable |
Property: annotations.axisIndex let gauge: LinearGauge = new LinearGauge({ annotation: [{ content: “Annotation”, axisIndex: 0 }] }); gauge.appendTo(‘#container’); |
Axis Value | Not Applicable |
Property: annotations.axisValue let gauge: LinearGauge = new LinearGauge({ annotation: [{ content: “Annotation”, axisValue: 35 }] }); gauge.appendTo(‘#container’); |
Font customization |
Property: scales.customLabels.font $(“#container”).ejLinearGauge({ scales:[{ showCustomLabels: true, customLabels: [{ value: “LinearGauge”, font: { size: “30px” } }] }] }); |
Property: annotations.font let gauge: LinearGauge = new LinearGauge({ annotation: [{ content: “Annotation”, font: { size: ‘15px’ } }] }); gauge.appendTo(‘#container’); |
Annotation Color |
Property: scales.customLabels.color $(“#container”).ejLinearGauge({ scales:[{ showCustomLabels: true, customLabels: [{ value: “LinearGauge”, color: “yellow” }] }] }); |
Property: annotations.font let gauge: LinearGauge = new LinearGauge({ annotation: [{ content: “Annotation”, font: { color: ‘red’ } }] }); gauge.appendTo(‘#container’); |
Opacity of Annotation |
Property: scales.customLabels.opacity $(“#container”).ejLinearGauge({ scales:[{ showCustomLabels: true, customLabels: [{ value: “LinearGauge”, opacity: 0.5 }] }] }); |
Property: annotations.font let gauge: LinearGauge = new LinearGauge({ annotation: [{ content: “Annotation”, font: { opacity: 0.7 } }] }); gauge.appendTo(‘#container’); |
Position Type |
Property: scales.customLabels.positionType $(“#container”).ejLinearGauge({ scales:[{ showCustomLabels: true, customLabels: [{ value: “LinearGauge”, positionType: “outer” }] }] }); |
Not applicable |
TextAngle of Annotation |
Property: scales.customLabels.textAngle $(“#container”).ejLinearGauge({ scales:[{ showCustomLabels: true, customLabels: [{ value: “LinearGauge”, textAngle: 25 }] }] }); |
Not applicable |
Tooltip
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Tooltip for Pointer | Not Applicable |
Property: tooltip.enable let gauge: LinearGauge = new LinearGauge({ tooltip: { enable: true } }); gauge.appendTo(‘#container’); |
Tooltip for Label |
Property: tooltip.showLabelTooltip $(“#container”).ejLinearGauge({ tooltip: { showLabelTooltip: true }); |
Not Applicable |
Tooltip Format | Not Applicable |
Property: tooltip.format let gauge: LinearGauge = new LinearGauge({ tooltip: { enable: true, format: ${pointers.value}cm } }); gauge.appendTo(‘#container’); |
Tooltip Color | Not Applicable |
Property: tooltip.fill let gauge: LinearGauge = new LinearGauge({ tooltip: { enable: true, fill: ‘gray’ } }); gauge.appendTo(‘#container’); |
Tooltip Template |
Property: tooltip.templateID $(“#container”).ejLinearGauge({ tooltip: { templateID: true }); |
Property: tooltip.template let gauge: LinearGauge = new LinearGauge({ tooltip: { enable: true, template: ‘Template’ } }); gauge.appendTo(‘#container’); |
Tooltip Animation | Not Applicable |
Property: tooltip.enableAnimation let gauge: LinearGauge = new LinearGauge({ tooltip: { enable: true, enableAnimation: true } }); gauge.appendTo(‘#container’); |
Tooltip Border | Not Applicable |
Property: tooltip.border let gauge: LinearGauge = new LinearGauge({ tooltip: { enable: true, border: { width: 2, color: ‘red’ } }); gauge.appendTo(‘#container’); |
Tooltip TextStyle | Not Applicable |
Property: tooltip.textStyle let gauge: LinearGauge = new LinearGauge({ tooltip: { enable: true, textStyle: { color: ‘white’, size: ‘10px’ } }); gauge.appendTo(‘#container’); |
Appearence of Linear Gauge
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Background Color |
Property: backgroundColor $(“#container”).ejLinearGauge({ backgroundColor: “Red” }); |
Property: background let gauge: LinearGauge = new LinearGauge({ background: ‘skyblue’ }); gauge.appendTo(‘#container’); |
Border Color |
Property: borderColor $(“#container”).ejLinearGauge({ borderColor: “Black” }); |
Property: border.color let gauge: LinearGauge = new LinearGauge({ border: { color: ‘red’ } }); gauge.appendTo(‘#container’); |
Margin | Not Applicable |
Property: margin let gauge: LinearGauge = new LinearGauge({ margin: { left: 40, right: 40, top: 40, bottom: 40 } }); gauge.appendTo(‘#container’); |
Orientation |
Property: orientation $(“#container”).ejLinearGauge({ orientation: “Vertical” }); |
Property: orientation let gauge: LinearGauge = new LinearGauge({ orientation: ‘Horizontal’ }); gauge.appendTo(‘#container’); |
Locale |
Property: locale $(“#container”).ejLinearGauge({ locale: “en-US” }); |
Property: locale let gauge: LinearGauge = new LinearGauge({ locale: ‘en-US’ }); gauge.appendTo(‘#container’); |
Theme |
Property: theme $(“#container”).ejLinearGauge({ theme: ej.datavisualization.LinearGauge.flatdark }); |
Property: theme let gauge: LinearGauge = new LinearGauge({ theme: ‘Highcontrast’ }); gauge.appendTo(‘#container’); |
Gauge Title | Not Applicable |
Property: title let gauge: LinearGauge = new LinearGauge({ title: ‘Linear Gauge’ }); gauge.appendTo(‘#container’); |
Gauge Container type
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Container Type |
Property: scales.type $(“#container”).ejLinearGauge({ scales: [{ type: ‘thermometer’ }] }); |
Property: container.type let gauge: LinearGauge = new LinearGauge({ container: { type: ‘Thermometer’ } }); gauge.appendTo(‘#container’); |
Container Height | Not Applicable |
Property: container.height let gauge: LinearGauge = new LinearGauge({ container: { height: 20 } }); gauge.appendTo(‘#container’); |
Container Width | Not Applicable |
Property: container.width let gauge: LinearGauge = new LinearGauge({ container: { width: 10 } }); gauge.appendTo(‘#container’); |
Container Offset | Not Applicable |
Property: container.offset let gauge: LinearGauge = new LinearGauge({ container: { offset: 5 } }); gauge.appendTo(‘#container’); |
Events
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Animation Complete Event | Not Applicable |
Event: animationComplete let gauge: LinearGauge = new LinearGauge({ animationComplete: function(e: IAnimationCompleteEventArgs): void { } }); gauge.appendTo(‘#container’); |
Annotation Render Event |
Event: drawCustomLabel $(“#container”).ejLinearGauge({ drawCustomLabel: function (args) {} }); |
Event: annotationRender let gauge: LinearGauge = new LinearGauge({ annotationRender: function(e: IAnnotationRenderEventArgs): void { } }) gauge.appendTo(‘#container’); |
AxisLabel Render Event |
Event: drawLabels $(“#container”).ejLinearGauge({ drawLabels: function (args) {} }); |
Event: axisLabelRender let gauge: LinearGauge = new LinearGauge({ axisLabelRender: function(e: IAxisLabelRenderEventArgs): void { } }) gauge.appendTo(‘#container’); |
Load Event |
Event: load $(“#container”).ejLinearGauge({ load: function (args) {} }); |
Event: load let gauge: LinearGauge = new LinearGauge({ load: function(e: ILoadEventArgs): void { } }) gauge.appendTo(‘#container’); |
Loaded Event | Not Applicable |
Event: loaded let gauge: LinearGauge = new LinearGauge({ loaded: function(e: ILoadedEventArgs): void { } }) gauge.appendTo(‘#container’); |
Resize Event | Not Applicable |
Event: resized let gauge: LinearGauge = new LinearGauge({ resized: function(e: IResizeEventArgs): void { } }) gauge.appendTo(‘#container’); |
Tooltip Render Event | Not Applicable |
Event: tooltipRender let gauge: LinearGauge = new LinearGauge({ tooltipRender: function(e: ITooltipRenderEventArgs): void { } }) gauge.appendTo(‘#container’); |
Value Change Event | Not Applicable |
Event: valueChange let gauge: LinearGauge = new LinearGauge({ valueChange: function(e: IValueChangeEventArgs): void { } }) gauge.appendTo(‘#container’); |
Mouse Move Event |
Event: mouseClickMove $(“#container”).ejLinearGauge({ mouseClickMove: function (args) {} }); |
Event: gaugeMouseMove let gauge: LinearGauge = new LinearGauge({ gaugeMouseMove: function(e: IMouseEventArgs): void { } }) gauge.appendTo(‘#container’); |
Mouse Up Event |
Event: mouseClickUp $(“#container”).ejLinearGauge({ mouseClickUp: function (args) {} }); |
Event: gaugeMouseUp let gauge: LinearGauge = new LinearGauge({ gaugeMouseUp: function(e: IMouseEventArgs): void { } }) gauge.appendTo(‘#container’); |
Mouse Down Event | Not Applicable |
Event: gaugeMouseDown let gauge: LinearGauge = new LinearGauge({ gaugeMouseDown: function(e: IMouseEventArgs): void { } }) gauge.appendTo(‘#container’); |
Mouse Leave Event | Not Applicable |
Event: gaugeMouseLeave let gauge: LinearGauge = new LinearGauge({ gaugeMouseLeave: function(e: IMouseEventArgs): void { } }) gauge.appendTo(‘#container’); |
Mouse Click Event |
Event: mouseClick $(“#container”).ejLinearGauge({ mouseClick: function (args) {} }); |
Not Applicable |
Render Complete Event |
Event: renderComplete $(“#container”).ejLinearGauge({ renderComplete: function (args) {} }); |
Not Applicable |
Double Click Event |
Event: doubleClick $(“#container”).ejLinearGauge({ doubleClick: function (args) {} }); |
Not Applicable |
Right Click Event |
Event: rightClick $(“#container”).ejLinearGauge({ rightClick: function (args) {} }); |
Not Applicable |
BarPointers Event |
Event: drawBarPointers $(“#container”).ejLinearGauge({ drawBarPointers: function (args) {} }); |
Not Applicable |
Indicators Event |
Event: drawIndicators $(“#container”).ejLinearGauge({ drawIndicators: function (args) {} }); |
Not Applicable |
MarkerPointer Event |
Event: drawMarkerPointers $(“#container”).ejLinearGauge({ drawMarkerPointers: function (args) {} }); |
Not Applicable |
Ranges Event |
Event: drawRange $(“#container”).ejLinearGauge({ drawRange: function (args) {} }); |
Not Applicable |
Gauge Initialized Event |
Event: init $(“#container”).ejLinearGauge({ init: function (args) {} }); |
Not Applicable |