Migration from Essential JS 1
17 Feb 202224 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@Html.EJ().LinearGauge("container") .Height("150px")
|
Property: height@Html.EJS().LinearGauge("container") .Height("150px").Render()
|
| Width |
Property: width@Html.EJ().LinearGauge("container") .Width("200px")
|
Property: width@Html.EJS().LinearGauge("container") .Width("200px").Render()
|
| Height(In Percentage) | Not Applicable |
Property: height@Html.EJS().LinearGauge("container") .Height("70%").Render()
|
| Width(In Percentage) | Not Applicable |
Property: width@Html.EJS().LinearGauge("container") .Height("100%").Render()
|
Line customization
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Height |
Property: scales.length@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Length(300).Add()})
|
Property: axes.line.height@Html.EJS().LinearGauge("container") .Axes(axes => axes.Line(line => line.Height(100)).Add()) .Render()
|
| Width |
Property: scales.width@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Width(300).Add()})
|
Property: axes.line.width@Html.EJS().LinearGauge("container") .Axes(axes => axes.Line(line => line.Width(50)).Add()) .Render()
|
| Color |
Property: scales.backgroundColor@Html.EJ().LinearGauge("container") .Scales(sc => {sc.BackgroundColor("blue").Add()})
|
Property: axes.line.color@Html.EJS().LinearGauge("container") .Axes(axes => axes.Line(line => line.Color("Blue")).Add()) .Render()
|
| Offset | Not Applicable |
Property: axes.line.offset@Html.EJS().LinearGauge("container") .Axes(axes => axes.Line(line => line.Offset(2)).Add()) .Render()
|
| Opacity |
Property: scales.opacity@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Opacity(0.2).Add()})
|
Not Applicable |
| DashArray | Not Applicable |
Property: axes.line.dashArray@Html.EJS().LinearGauge("container") .Axes(axes => axes.Line(line => line.DashArray(1)).Add()) .Render()
|
Ticks
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Type of Ticks |
Property: scales.ticks.type@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval)}).Add() .Add()})
|
Property: axes.majorTicks.height@Html.EJS().LinearGauge("container") .Axes(axes => axes.MajorTicks().Add()) .Render()
|
| Height of Major Ticks |
Property: scales.ticks.height@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval).Height(8).Add() }).Add()})
|
Property: axes.majorTicks.height@Html.EJS().LinearGauge("container") .Axes(axes => axes.MajorTicks(ma => ma.Height(8)).Add()) .Render()
|
| Width of Major Ticks |
Property: scales.ticks.width@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval).Width(5).Add() }).Add()})
|
Property: axes.majorTicks.width@Html.EJS().LinearGauge("container") .Axes(axes => axes.MajorTicks(ma => ma.Width(5)).Add()) .Render()
|
| Color of Major Ticks |
Property: scales.ticks.color@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval).Color("Blue").Add() }).Add()})
|
Property: axes.majorTicks.color@Html.EJS().LinearGauge("container") .Axes(axes => axes.MajorTicks(ma => ma.Color("Blue")).Add()) .Render()
|
| Offset for Major Ticks |
Property: scales.ticks.distanceFromScale@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval) .distanceFromScale(5).Add(); }).Add()})
|
Property: axes.majorTicks.offset@Html.EJS().LinearGauge("container") .Axes(axes => axes.MajorTicks(ma => ma.Offset(2)).Add()) .Render()
|
| Interval of Major Ticks |
Property: scales.majorIntervalValue@Html.EJ().LinearGauge("container") .Scales(sc => {sc.majorIntervalValue(15).Add()})
|
Property: axes.majorTicks.interval@Html.EJS().LinearGauge("container") .Axes(axes => axes.MajorTicks(ma => ma.Interval(15)).Add()) .Render()
|
| Angle of Major Ticks |
Property: scales.ticks.angle@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval).Angle(30).Add(); }).Add()})
|
Not Applicable |
| Opacity of Major Ticks |
Property: scales.ticks.opacity@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval).Opacity(0.2).Add(); }).Add()})
|
Not Applicable |
| Height of Minor Ticks |
Property: scales.ticks.height@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MinorInterval).Height(8).Add() }).Add()})
|
Property: axes.minorTicks.height@Html.EJS().LinearGauge("container") .Axes(axes => axes.MinorTicks(mi => mi.Height(8)).Add()) .Render()
|
| Width of Minor Ticks |
Property: scales.ticks.width@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MinorInterval).Width(5).Add() }).Add()})
|
Property: axes.minorTicks.width@Html.EJS().LinearGauge("container") .Axes(axes => axes.MinorTicks(mi => mi.Width(5)).Add()) .Render()
|
| Color of Minor Ticks |
Property: scales.ticks.color@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MinorInterval).Color("Blue").Add() }).Add()})
|
Property: axes.minorTicks.color@Html.EJS().LinearGauge("container") .Axes(axes => axes.MinorTicks(mi => mi.Color("Blue")).Add()) .Render()
|
| Offset for Minor Ticks |
Property: scales.ticks.distanceFromScale@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MinorInterval) .distanceFromScale(5).Add(); }).Add()})
|
Property: axes.minorTicks.offset@Html.EJS().LinearGauge("container") .Axes(axes => axes.MinorTicks(mi => mi.Offset(2)).Add()) .Render()
|
| Interval of Minor Ticks |
Property: scales.minorIntervalValue@Html.EJ().LinearGauge("container") .Scales(sc => {sc.minorIntervalValue(15).Add()})
|
Property: axes.minorTicks.interval@Html.EJS().LinearGauge("container") .Axes(axes => axes.MinorTicks(mi => mi.Interval(15)).Add()) .Render()
|
| Angle of Minor Ticks |
Property: scales.ticks.angle@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MinorInterval).Angle(30).Add(); }).Add()})
|
Not Applicable |
| Opacity of Minor Ticks |
Property: scales.ticks.opacity@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MinorInterval).Opacity(0.2).Add(); }).Add()})
|
Not Applicable |
Labels
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Angle |
Property: scales.labels.angle@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Labels(lab => {lab.Angle(15).Add(); }).Add()})
|
Not Applicable |
| Offset |
Property: scales.labels.distanceFromScale@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Labels(lab => {lab.distanceFromScale( dis => {dis.x(15).Add();}).Add(); }).Add()})
|
Property: axes.labelStyle.offset@Html.EJS().LinearGauge("container") .Axes(axes => axes.LabelStyle(lab => lab.Offset(2)).Add()) .Render()
|
| Format |
Property: scales.labels.unitText@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Labels(lab => {lab.UnitText("F").Add(); }).Add()})
|
Property: axes.labelStyle.format@Html.EJS().LinearGauge("container") .Axes(axes => axes.LabelStyle(lab => lab.Format("C")).Add()) .Render()
|
| Unit Text Placement |
Property: scales.labels.unitTextPlacement@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Labels(lab => {lab.UnitTextPlacement("Front").Add(); }).Add()})
|
Not Applicable |
| Label Range Color | Not Applicable |
Property: axes.labelStyle.useRangeColor@Html.EJS().LinearGauge("container") .Axes(axes => axes.LabelStyle(lab => lab.UseRangeColor(true)) .Add()).Render()
|
| Opacity |
Property: scales.labels.opacity@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Labels(lab => {lab.Opacity(0.5) .Add();}).Add()})
|
Property: axes.labelStyle.font.opacity@Html.EJS().LinearGauge("container") .Axes(axes => axes.LabelStyle(lab => lab.Font("fontstyle")) .Add()).Render() var fontstyle = new { opacity = 0.5 };
|
| Label Text Color |
Property: scales.labels.textColor@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Labels(lab => {lab.TextColor("red") .Add();}).Add()})
|
Property: axes.labelStyle.font.color@Html.EJS().LinearGauge("container") .Axes(axes => axes.LabelStyle(lab => lab.Font("fontstyle")) .Add()).Render() var fontstyle = new { color= 'red' };
|
| Label Font Family |
Property: scales.labels.font.fontFamily@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Labels(lab => {lab.Font(fon => {fon.FontFamily("SegoeUI").Add();}).Add(); }).Add()})
|
Property: axes.labelStyle.font.fontFamily@Html.EJS().LinearGauge("container") .Axes(axes => axes.LabelStyle(lab => lab.Font("fontstyle")) .Add()).Render() var fontstyle = new { fontFamily: 'Arial' };
|
| Label Font Style |
Property: scales.labels.font.fontStyle@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Labels(lab => {lab.Font(fon => {fon.FontStyle("Normal").Add();}).Add(); }).Add()})
|
Property: axes.labelStyle.font.fontStyle@Html.EJS().LinearGauge("container") .Axes(axes => axes.LabelStyle(lab => lab.Font("fontstyle")) .Add()).Render() var fontstyle = new { fontStyle= 'Bold' };
|
| Label Size |
Property: scales.labels.font.size@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Labels(lab => {lab.Font(fon => {fon.Size("20px").Add();}).Add(); }).Add()})
|
Property: axes.labelStyle.font.size@Html.EJS().LinearGauge("container") .Axes(axes => axes.LabelStyle(lab => lab.Font("fontstyle")) .Add()).Render() var fontstyle = new { size= "15px" };
|
| Label Font Weight | Not Applicable |
Property: axes.labelStyle.font.fontWeight @Html.EJS().LinearGauge("container") .Axes(axes => axes.LabelStyle(lab => lab.Font("fontstyle")) .Add()).Render() var fontstyle = new { fontWeight= '4' };
|
Axis
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Minimum Value |
Property: scales.minimum@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Minimum(20).Add()})
|
Property: axes.minimum@Html.EJS().LinearGauge("container") .Axes(axes => axes.Minimum(20).Add()).Render()
|
| Maximum Value |
Property: scales.maximum@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Maximum(20).Add()})
|
Property: axes.maximum@Html.EJS().LinearGauge("container") .Axes(axes => axes.Maximum(20).Add()).Render()
|
| Inverted Position | Not Applicable |
Property: axes.isInversed@Html.EJS().LinearGauge("container") .Axes(axes => axes.IsInversed(true).Add()).Render()
|
| Opposed Position | Not Applicable |
Property: axes.opposedPosition@Html.EJS().LinearGauge("container") .Axes(axes => axes.OpposedPosition(true).Add()).Render()
|
Ranges
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Start Value |
Property: scales.ranges.startValue@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(ran => {ran.StartValue(20) .Add();}).Add()})
|
Property: axes.ranges.start@Html.EJS().LinearGauge("container") .Axes(axes => axes.Ranges(ran => ran.Start(20)) .Add()).Render()
|
| End Value |
Property: scales.ranges.endValue@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(ran => {ran.EndValue(20) .Add();}).Add()})
|
Property: axes.ranges.end@Html.EJS().LinearGauge("container") .Axes(axes => axes.Ranges(ran => ran.End(20)) .Add()).Render()
|
| Start Width |
Property: scales.ranges.startWidth@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(ran => {ran.StartWidth(20) .Add();}).Add()})
|
Property: axes.ranges.startWidth@Html.EJS().LinearGauge("container") .Axes(axes => axes.Ranges(ran => ran.StartWidth(20)) .Add()).Render()
|
| End Width |
Property: scales.ranges.endWidth @Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(ran => {ran.EndWidth(20) .Add();}).Add()})
|
Property: axes.ranges.endWidth@Html.EJS().LinearGauge("container") .Axes(axes => axes.Ranges(ran => ran.EndWidth(20)) .Add()).Render()
|
| Color |
Property: scales.ranges.backgroundColor@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(ran => {ran.BackgroundColor("Red") .Add();}).Add()})
|
Property: axes.ranges.color@Html.EJS().LinearGauge("container") .Axes(axes => axes.Ranges(ran => ran.Color("red")) .Add()).Render()
|
| Offset |
Property: scales.ranges.distanceFromScale@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(ran => {ran.DistanceFromScale(10) .Add();}).Add()})
|
Property: axes.ranges.offset@Html.EJS().LinearGauge("container") .Axes(axes => axes.Ranges(ran => ran.Offset(5)) .Add()).Render()
|
| Range Position |
Property: scales.ranges.placement@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(ran => {ran.Placement("Near") .Add();}).Add()})
|
Property: axes.ranges.position@Html.EJS().LinearGauge("container") .Axes(axes => axes.Ranges(ran => ran.Position("Inside")) .Add()).Render()
|
| Opacity |
Property: scales.ranges.opacity@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(ran => {ran.Opacity(0.5) .Add();}).Add()})
|
Not Applicable |
| Border Customization |
Property: scales.ranges.border@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(ran => {ran.Border(bor => {bor.Color("green") .Width(2).Add();}).Add();}).Add()})
|
Property: axes.ranges.border@Html.EJS().LinearGauge("container") .Axes(axes => axes.Ranges(ran => ran.Border(border)) .Add()).Render() var border = new { color='green', width="2"};
|
Bar Pointer
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Bar Pointer |
Property: scales.ranges.barPointers.value@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(BarPointers => {br.Value(20).Add();}).Add()})
|
Property: axes.pointers.value@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("RangeBar")).Add()).Render()
|
| Color of Bar Pointer |
Property: scales.ranges.barPointers.backgroundColor@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(BarPointers => {br.Value(20) .backgroundColor("red").Add();}).Add()})
|
Property: axes.pointers.color@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("RangeBar").Color("Red")).Add()).Render()
|
| Offset of Bar Pointer |
Property: scales.ranges.barPointers.distanceFromScale@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(BarPointers => {br.distanceFromScale(20) .Add();}).Add()})
|
Property: axes.pointers.offset@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("RangeBar").Offset(20)).Add()).Render()
|
| Opacity of Bar Pointer |
Property: scales.ranges.barPointers.opacity@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(BarPointers => {br.Opacity(0.5) .Add();}).Add()})
|
Property: axes.pointers.opacity@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("RangeBar").Opacity(0.5)).Add()).Render()
|
| Width of Bar Pointer |
Property: scales.ranges.barPointers.width@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(BarPointers => {br.Width(2) .Add();}).Add()})
|
Property: axes.pointers.width@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("RangeBar").Width(2)).Add()).Render()
|
| Gradients of Bar Pointer |
Property: scales.ranges.barPointers.gradients@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(BarPointers => { br.gradients(gra => {gra.ColorStop(0).Color("#FFFFFF").Add();}) .Add();}).Add()})
|
Not Applicable |
| Border of Bar Pointer |
Property: scales.ranges.barPointers.border@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(BarPointers => {br.Border(bor => {bor.Color("red").Width(2).Add();}) .Add();}).Add()})
|
Property: axes.pointers.border@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("RangeBar").Border(border)).Add()).Render() var border = new { color="red" width="2" };
|
| Animation of Bar Pointer |
Property: enableAnimation@Html.EJ().LinearGauge("container") .EnableAnimation(true)
|
Property: axes.pointers.animationDuration@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("RangeBar").animationDuration(1000)).Add()).Render()
|
| Rounded Corner of Bar Pointer | Not Applicable |
Property: axes.pointers.roundedCornerRadius@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("RangeBar").RoundedCornerRadius(10)).Add()).Render()
|
Marker Pointer
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Marker Pointer |
Property: scales.ranges.markerPointers.value@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(MarkerPointers => {mr.Value(20).Add();}).Add()})
|
Property: axes.pointers.value@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("Marker")).Add()).Render()
|
| Color of Marker Pointer |
Property: scales.ranges.markerPointers.backgroundColor@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(MarkerPointers => {mr.Value(20).Color("Red").Add();}).Add()})
|
Property: axes.pointers.color@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("Marker").Color("Red")).Add()).Render()
|
| Offset of Marker Pointer |
Property: scales.ranges.markerPointers .distanceFromScale @Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(MarkerPointers => {mr.Value(20).distanceFromScale(10).Add();}) .Add()})
|
Property: axes.pointers.offset@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("Marker").Offset(20)).Add()).Render()
|
| Opacity of Marker Pointer |
Property: scales.ranges.markerPointers.opacity@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(MarkerPointers => {mr.Opacity(0.5) .Add();}).Add()})
|
Property: axes.pointers.opacity@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("Marker").Opacity(0.5)).Add()).Render()
|
| Width of Marker Pointer |
Property: scales.ranges.markerPointers.width@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(MarkerPointers => {mr.Width(2) .Add();}).Add()})
|
Property: axes.pointers.width@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("Marker").Width(2)).Add()).Render()
|
| Gradients of Marker Pointer |
Property: scales.ranges.markerPointers .gradients @Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(MarkerPointers => { mr.gradients(gra => {gra.ColorStop(0).Color("#FFFFFF").Add();}) .Add();}).Add()})
|
Not Applicable |
| Border of Marker Pointer |
Property: scales.ranges.markerPointers.border@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(MarkerPointers => {mr.Border(bor => {bor.Color("red").Width(2).Add();}) .Add();}).Add()})
|
Property: axes.pointers.border@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("Marker").Border(border)).Add()).Render() var border = new { color="red" width="2" };
|
| Animation of Marker Pointer |
Property: enableMarkerPointerAnimation@Html.EJ().LinearGauge("container") .EnableMarkerPointerAnimation(true)
|
Property: axes.pointers.animationDuration@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("Marker").animationDuration(1000)).Add()).Render()
|
| Type of Marker Pointer |
Property: scales.ranges.markerPointers.type@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(MarkerPointers => {mr.Type("Diamond") .Add();}).Add()})
|
Property: axes.pointers.markerType@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("Marker").MarkerType("Diamond")).Add()).Render()
|
| Placement of Marker Pointer |
Property: scales.ranges.markerPointers .placement @Html.EJ().LinearGauge("container") .Scales(sc => {sc.Ranges(MarkerPointers => {mr.Placement("Near") .Add();}).Add()})
|
Property: axes.pointers.placement@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("Marker").Placement("Near")).Add()).Render()
|
| Drag of Marker Pointer |
Property: readOnly@Html.EJ().LinearGauge("container") .ReadOnly(true)
|
Property: axes.pointers.enableDrag@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("Marker").EnableDrag(true)).Add()).Render()
|
| Image Marker Pointer | Not Applicable |
Property: axes.pointers.imageUrl@Html.EJS().LinearGauge("container") .Axes(axes => axes.pointers(po => po.Value(20) .Type("Marker").ImageUrl("")).Add()).Render()
|
Annotation
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Content |
Property: scales.customLabels.value@Html.EJ().LinearGauge("container") .Scales(sc => {sc.customLabels(cus => {cus.Value("Linear Gauge") .Add();}).Add()})
|
Property: annotations.content@Html.EJS().LinearGauge("container") .Annotations(ann => ann.Content("Linear Gauge").Add()).Render()
|
| Horizontal Alignment | Not Applicable |
Property: annotations.horizontalAlignment@Html.EJS().LinearGauge("container") .Annotations(ann => ann.HorizontalAlignment("Center").Add()).Render()
|
| Vertical Alignment | Not Applicable |
Property: annotations.verticalAlignment@Html.EJS().LinearGauge("container") .Annotations(ann => ann.VerticalAlignment("Center").Add()).Render()
|
| Position of X |
Property: scales.customLabels.position.x@Html.EJ().LinearGauge("container") .Scales(sc => {sc.customLabels(cus => {cus.Position(po => {po.X(20).Add();}) .Add();}).Add()})
|
Property: annotations.x@Html.EJS().LinearGauge("container") .Annotations(ann => ann.X(35).Add()).Render()
|
| Position of Y |
Property: scales.customLabels.position.y@Html.EJ().LinearGauge("container") .Scales(sc => {sc.customLabels(cus => {cus.Position(po => {po.Y(20).Add();}) .Add();}).Add()})
|
Property: annotations.y@Html.EJS().LinearGauge("container") .Annotations(ann => ann.Y(35).Add()).Render()
|
| Z Index | Not Applicable |
Property: annotations.zIndex@Html.EJS().LinearGauge("container") .Annotations(ann => ann.ZIndex("1").Add()).Render()
|
| Axis Index | Not Applicable |
Property: annotations.axisIndex@Html.EJS().LinearGauge("container") .Annotations(ann => ann.AxisIndex("0").Add()).Render()
|
| Axis Value | Not Applicable |
Property: annotations.axisValue@Html.EJS().LinearGauge("container") .Annotations(ann => ann.AxisValue("35").Add()).Render()
|
| Font customization |
Property: scales.customLabels.font@Html.EJ().LinearGauge("container") .Scales(sc => {sc.customLabels(cus => {cus.Font(fo => {fo.Size("20px").Add();}) .Add();}).Add()})
|
Property: annotations.font@Html.EJS().LinearGauge("container") .Annotations(ann => ann.Font(font).Add()).Render() var font =new {size='12px'}
|
| Annotation Color |
Property: scales.customLabels.color@Html.EJ().LinearGauge("container") .Scales(sc => {sc.customLabels(cus => {cus.Color("Red") .Add();}).Add()})
|
Property: annotations.font.color@Html.EJS().LinearGauge("container") .Annotations(ann => ann.Font(font).Add()).Render() var font =new {color ="red"}
|
| Opacity of Annotation |
Property: scales.customLabels.opacity@Html.EJ().LinearGauge("container") .Scales(sc => {sc.customLabels(cus => {cus.Opacity(0.4) .Add();}).Add()})
|
Property: annotations.font.opacity@Html.EJS().LinearGauge("container") .Annotations(ann => ann.Font(font).Add()).Render() var font =new {opacity ="0.4"}
|
| Position Type |
Property: scales.customLabels.positionType@Html.EJ().LinearGauge("container") .Scales(sc => {sc.customLabels(cus => {cus.PositionType("Outer") .Add();}).Add()})
|
Not applicable |
| TextAngle of Annotation |
Property: scales.customLabels.textAngle@Html.EJ().LinearGauge("container") .Scales(sc => {sc.customLabels(cus => {cus.TextAngle(25) .Add();}).Add()})
|
Not applicable |
Tooltip
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Tooltip for Pointer | Not Applicable |
Property: tooltip.enable@Html.EJS().LinearGauge("container") .Tooltip(tool => tool.Enable(true).Add()).Render()
|
| Tooltip for Label |
Property: tooltip.showLabelTooltip@Html.EJ().LinearGauge("container") .Scales(sc => {sc.tooltip(tool => {tool.ShowLabelTooltip(true) .Add();}).Add()})
|
Not Applicable |
| Tooltip Format | Not Applicable |
Property: tooltip.format@Html.EJS().LinearGauge("container") .Tooltip(tool => tool.Format(${pointers.value}).Add()).Render()
|
| Tooltip Color | Not Applicable |
Property: tooltip.fill@Html.EJS().LinearGauge("container") .Tooltip(tool => tool.Fill("Gray").Add()).Render()
|
| Tooltip Template |
Property: tooltip.templateID@Html.EJ().LinearGauge("container") .Scales(sc => {sc.tooltip(tool => {tool.TemplateId(true) .Add();}).Add()})
|
Property: tooltip.template@Html.EJS().LinearGauge("container") .Tooltip(tool => tool.Template("Temaplate").Add()).Render()
|
| Tooltip Animation | Not Applicable |
Property: tooltip.enableAnimation@Html.EJS().LinearGauge("container") .Tooltip(tool => tool.EnableAnimation(true).Add()).Render()
|
| Tooltip Border | Not Applicable |
Property: tooltip.border@Html.EJS().LinearGauge("container") .Tooltip(tool => tool.Border(border).Add()).Render() var border = new {width: 2, color: 'red'}
|
| Tooltip TextStyle | Not Applicable |
Property: tooltip.textStyle@Html.EJS().LinearGauge("container") .Tooltip(tool => tool.TextStyle("Bold").Add()).Render()
|
Appearance of Linear Gauge
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Background Color |
Property: backgroundColor@Html.EJ().LinearGauge("container") .BackgroundColor("red")
|
Property: background@Html.EJS().LinearGauge("container") .Background("Red").Render()
|
| Border Color |
Property: borderColor@Html.EJ().LinearGauge("container") .BorderColor("blue")
|
Property: border.color@Html.EJS().LinearGauge("container") .Border(border).Render() var border= new {color="red"}
|
| Margin | Not Applicable |
Property: margin@Html.EJS().LinearGauge("container") .Margin(margin).Render() var margin= new {left: 40, right: 40, top: 40, bottom: 40}
|
| Orientation |
Property: orientation@Html.EJ().LinearGauge("container") .Orientation("Vertical")
|
Property: orientation@Html.EJS().LinearGauge("container") .Orientation("Vertical").Render()
|
| Locale |
Property: locale@Html.EJ().LinearGauge("container") .Locale("en-US")
|
Property: locale@Html.EJS().LinearGauge("container") .Locale("en-US").Render()
|
| Theme |
Property: theme@Html.EJ().LinearGauge("container") .Theme("saffron")
|
Property: theme@Html.EJS().LinearGauge("container") .Theme("Material").Render()
|
| Gauge Title | Not Applicable |
Property: title@Html.EJS().LinearGauge("container") .Title("LinearGauge").Render()
|
Gauge Container type
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Container Type |
Property: scales.type@Html.EJ().LinearGauge("container") .Scales(sc => {sc.Type("Thermometer").Add()})
|
Property: container.type@Html.EJS().LinearGauge("container") .Container(con => con.Type("Thermometer").Add()) .Render()
|
| Container Height | Not Applicable |
Property: container.height@Html.EJS().LinearGauge("container") .Container(con => con.Type("Thermometer").Height(20).Add()) .Render()
|
| Container Width | Not Applicable |
Property: container.width@Html.EJS().LinearGauge("container") .Container(con => con.Type("Thermometer").Width(10).Add()) .Render()
|
| Container Offset | Not Applicable |
Property: container.offset@Html.EJS().LinearGauge("container") .Container(con => con.Type("Thermometer").Offset(5).Add()) .Render()
|
Events
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Animation Complete Event | Not Applicable |
Event: animationComplete@Html.EJS().LinearGauge("container") .AnimationComplete("animationComplete").Render() function animationComplete(args) {}
|
| Annotation Render Event |
Event: drawCustomLabel@Html.EJ().CircularGauge("container") .DrawCustomLabel("customLabel")function customLabel(args) {}
|
Event: annotationRender@Html.EJS().LinearGauge("container") .AnnotationRender("annotationRender").Render() function annotationRender(args) {}
|
| AxisLabel Render Event |
Event: drawLabels@Html.EJ().CircularGauge("container") .DrawLabels("drawLabels")function drawLabels(args) {}
|
Event: axisLabelRender@Html.EJS().LinearGauge("container") .AxisLabelRender("axisLabelRender").Render() function axisLabelRender(args) {}
|
| Load Event |
Event: load@Html.EJ().CircularGauge("container") .Load("load")function load(args) {}
|
Event: load@Html.EJS().LinearGauge("container") .Load("load").Render() function load(args) {}
|
| Loaded Event | Not Applicable |
Event: loaded@Html.EJS().LinearGauge("container") .Loaded("loaded").Render() function loaded(args) {}
|
| Resize Event | Not Applicable |
Event: resized@Html.EJS().LinearGauge("container") .Resized("resized").Render() function resized(args) {}
|
| Tooltip Render Event | Not Applicable |
Event: tooltipRender@Html.EJS().LinearGauge("container") .TooltipRender("tooltipRender").Render() function tooltipRender(args) {}
|
| Value Change Event | Not Applicable |
Event: valueChange@Html.EJS().LinearGauge("container") .ValueChange("valueChange").Render() function valueChange(args) {}
|
| Mouse Move Event |
Event: mouseClickMove@Html.EJ().CircularGauge("container") .MouseClickMove("mouseClickMove")function mouseClickMove(args) {}
|
Event: gaugeMouseMove@Html.EJS().LinearGauge("container") .GaugeMouseMove("gaugeMouseMove").Render() function gaugeMouseMove(args) {}
|
| Mouse Up Event |
Event: mouseClickUp@Html.EJ().CircularGauge("container") .MouseClickUp("mouseClickUp")function mouseClickUp(args) {}
|
Event: gaugeMouseUp@Html.EJS().LinearGauge("container") .GaugeMouseUp("gaugeMouseUp").Render() function gaugeMouseUp(args) {}
|
| Mouse Down Event | Not Applicable |
Event: gaugeMouseDown@Html.EJS().LinearGauge("container") .GaugeMouseDown("gaugeMouseDown").Render() function gaugeMouseDown(args) {}
|
| Mouse Leave Event | Not Applicable |
Event: gaugeMouseLeave@Html.EJS().LinearGauge("container") .GaugeMouseLeave("gaugeMouseLeave").Render() function gaugeMouseLeave(args) {}
|
| Mouse Click Event |
Event: mouseClick@Html.EJ().CircularGauge("container") .MouseClick("mouseClick")function mouseClick(args) {}
|
Not Applicable |
| Render Complete Event |
Event: renderComplete@Html.EJ().CircularGauge("container") .RenderComplete("renderComplete")function renderComplete(args) {}
|
Not Applicable |
| Double Click Event |
Event: doubleClick@Html.EJ().CircularGauge("container") .DoubleClick("doubleClick")function doubleClick(args) {}
|
Not Applicable |
| Right Click Event |
Event: rightClick@Html.EJ().CircularGauge("container") .RightClick("rightClick")function rightClick(args) {}
|
Not Applicable |
| BarPointers Event |
Event: drawBarPointers@Html.EJ().CircularGauge("container") .DrawBarPointers("drawBarPointers")function drawBarPointers(args) {}
|
Not Applicable |
| Indicators Event |
Event: drawIndicators@Html.EJ().CircularGauge("container") .DrawIndicators("drawIndicators")function drawIndicators(args) {}
|
Not Applicable |
| MarkerPointer Event |
Event: drawMarkerPointers@Html.EJ().CircularGauge("container") .DrawMarkerPointers("drawMarkerPointers")function drawMarkerPointers(args) {}
|
Not Applicable |
| Ranges Event |
Event: drawRange@Html.EJ().CircularGauge("container") .DrawRange("drawRange")function drawRange(args) {}
|
Not Applicable |
| Gauge Initialized Event |
Event: init@Html.EJ().CircularGauge("container") .Init("init")function init(args) {}
|
Not Applicable |