Skip to content

Commit 5a8b956

Browse files
author
SaravanaPriya
authored
Merge branch 'hotfix/hotfix-v25.1.35' into 875662-hotfix
2 parents c2a513b + 9e89e44 commit 5a8b956

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+2364
-71
lines changed

‎ej2-asp-core-mvc/circular-gauge/gauge-animation.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
layout: post
3+
title: Animation in ##Platform_Name## Circular Gauge component | Syncfusion
4+
description: Learn here all about animation in the Syncfusion ##Platform_Name## Circular Gauge component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Circular Gauge
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Animation in Circular Gauge component
12+
13+
{% if page.publishingplatform == "aspnet-core" %}
14+
15+
All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [animationDuration](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.CircularGauge.CircularGauge.html#Syncfusion_EJ2_CircularGauge_CircularGauge_AnimationDuration) property. The animation for the Circular Gauge is enabled when the `animationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `animationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order.
16+
17+
1. The axis line will be animated in the rendering direction (clockwise or anticlockwise).
18+
2. Each tick line and label will then be animated.
19+
3. If available, ranges will be animated.
20+
4. If available, pointers will be animated in the same way as [pointer animation](https://ej2.syncfusion.com/aspnetcore/documentation/circular-gauge/gauge-pointers#animation).
21+
5. If available, annotations will be animated.
22+
23+
The animation of the Circular Gauge is demonstrated in the following example.
24+
25+
{% tabs %}
26+
{% highlight cshtml tabtitle="CSHTML" %}
27+
{% include code-snippet/circulargauge/gauge-animation/tagHelper %}
28+
{% endhighlight %}
29+
{% highlight c# tabtitle="Animation.cs" %}
30+
{% include code-snippet/circulargauge/gauge-animation/gauge-animation.cs %}
31+
{% endhighlight %}
32+
{% endtabs %}
33+
34+
![Circular Gauge with Animation](../circular-gauge/images/animation.gif)
35+
36+
> Only the pointer of the Circular Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://ej2.syncfusion.com/aspnetcore/documentation/circular-gauge/gauge-pointers#animation) to enable only pointer animation.
37+
38+
{% elsif page.publishingplatform == "aspnet-mvc" %}
39+
40+
All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [AnimationDuration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.CircularGauge.CircularGauge.html#Syncfusion_EJ2_CircularGauge_CircularGauge_AnimationDuration) property. The animation for the Circular Gauge is enabled when the `AnimationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `AnimationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order.
41+
42+
1. The axis line will be animated in the rendering direction (clockwise or anticlockwise).
43+
2. Each tick line and label will then be animated.
44+
3. If available, ranges will be animated.
45+
4. If available, pointers will be animated in the same way as [pointer animation](https://ej2.syncfusion.com/aspnetmvc/documentation/circular-gauge/gauge-pointers#animation).
46+
5. If available, annotations will be animated.
47+
48+
The animation of the Circular Gauge is demonstrated in the following example.
49+
50+
{% tabs %}
51+
{% highlight razor tabtitle="CSHTML" %}
52+
{% include code-snippet/circulargauge/gauge-animation/razor %}
53+
{% endhighlight %}
54+
{% highlight c# tabtitle="Animation.cs" %}
55+
{% include code-snippet/circulargauge/gauge-animation/gauge-animation.cs %}
56+
{% endhighlight %}
57+
{% endtabs %}
58+
59+
![Circular Gauge with Animation](../circular-gauge/images/animation.gif)
60+
61+
> Only the pointer of the Circular Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://ej2.syncfusion.com/aspnetmvc/documentation/circular-gauge/gauge-pointers#animation) to enable only pointer animation.
62+
63+
{% endif %}

‎ej2-asp-core-mvc/circular-gauge/images/animation.gif

49.5 KB
Loading

‎ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/gauge-animation.cs

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Diagnostics;
4+
using System.Linq;
5+
using System.Threading.Tasks;
6+
using Microsoft.AspNetCore.Mvc;
7+
using EJ2_Core_Application.Models;
8+
using Newtonsoft.Json;
9+
10+
namespace EJ2_Core_Application.Controllers
11+
{
12+
public class HomeController : Controller
13+
{
14+
public IActionResult Index()
15+
{
16+
return View();
17+
}
18+
}
19+
}

‎ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/razor

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@using Syncfusion.EJ2;
2+
@using Syncfusion.EJ2.CircularGauge;
3+
4+
@Html.EJS().CircularGauge("container").AnimationDuration(2000).Load("gaugeLoad").Background("transparent").Axes(axes => axes
5+
.Radius("80%").StartAngle(230).EndAngle(130).LabelStyle(labelStyle => labelStyle.Position(Position.Inside).Font(font => font.FontFamily("inherit")).Offset(-1))
6+
.Annotations(annotation => annotation.Content("<div style='font-size:18px;margin-left: -20px;margin-top: -12px; color:#9DD55A'>60</div>").ZIndex("1").Angle(165).Radius("35%").Add())
7+
.Pointers(pointer => pointer.Value(60).Radius("60%").PointerWidth(7).Color("#c06c84").Animation(animation => animation.Enable(true).Duration(2000)).Cap(cap => cap.Radius(8).Color("#c06c84").Border(border => border.Width(0))).NeedleTail(needleTail => needleTail.Length("0%")).Add())
8+
.Ranges(range => range.Start(0).End(30).StartWidth(22).EndWidth(22).Color("#E63B86").Radius("60%").Add())
9+
.LineStyle(lineStyle => lineStyle.Width(8).Color("#E0E0E0"))
10+
.MinorTicks(minorTick => minorTick.Offset(5)).MajorTicks(majorTick => majorTick.Offset(5)).Add()).Render()
11+
<script>
12+
13+
var rangeLinearGradient = {
14+
startValue: '0%',
15+
endValue: '100%',
16+
colorStop: [
17+
{ color: '#9e40dc', offset: '0%', opacity: 1 },
18+
{ color: '#d93c95', offset: '70%', opacity: 1 },
19+
],
20+
};
21+
22+
window.gaugeLoad = function (args) {
23+
args.gauge.axes[0].ranges[0].linearGradient = rangeLinearGradient;
24+
}
25+
26+
</script>

‎ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/tagHelper

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
@using Syncfusion.EJ2;
2+
3+
@{
4+
var labelFont = new Syncfusion.EJ2.CircularGauge.CircularGaugeFont { FontFamily = "inherit" };
5+
}
6+
7+
<ejs-circulargauge id="container" load="gaugeLoad">
8+
<e-circulargauge-axes>
9+
<e-circulargauge-axis startAngle="230" endAngle="130" minimum="0" maximum="100" radius="80%">
10+
<e-circulargauge-annotations>
11+
<e-circulargauge-annotation angle="165" radius="35%" content='<div style=" font-size:18px;margin-left: -20px;margin-top: -12px; color:#9DD55A">60</div>' zIndex="1"></e-circulargauge-annotation>
12+
</e-circulargauge-annotations>
13+
<e-axis-linestyle width="8" color="#E0E0E0"></e-axis-linestyle>
14+
<e-axis-labelstyle offset="-1" font="labelFont">
15+
</e-axis-labelstyle>
16+
<e-circulargauge-pointers>
17+
<e-circulargauge-pointer value="60" radius="60%" color="#c06c84" pointerWidth=7>
18+
<e-pointer-animation enable="true" duration=500></e-pointer-animation>
19+
<e-pointer-cap radius="8" color="#c06c84">
20+
<e-pointers-cap-border width="0" />
21+
</e-pointer-cap>
22+
<e-pointer-needletail length="0%" />
23+
</e-circulargauge-pointer>
24+
</e-circulargauge-pointers>
25+
<e-circulargauge-ranges>
26+
<e-circulargauge-range start="0" end="30" color="#E63B86" startwidth="22" endwidth="22" radius="60%"></e-circulargauge-range>
27+
</e-circulargauge-ranges>
28+
<e-axis-majorticks offset="5"></e-axis-majorticks>
29+
<e-axis-minorticks offset="5"></e-axis-minorticks>
30+
</e-circulargauge-axis>
31+
</e-circulargauge-axes>
32+
</ejs-circulargauge>
33+
34+
<script>
35+
var rangeLinearGradient = {
36+
startValue: '0%',
37+
endValue: '100%',
38+
colorStop: [
39+
{ color: '#9e40dc', offset: '0%', opacity: 1 },
40+
{ color: '#d93c95', offset: '70%', opacity: 1 },
41+
],
42+
};
43+
44+
window.gaugeLoad = function (args) {
45+
args.gauge.animationDuration = 2000;
46+
args.gauge.axes[0].ranges[0].linearGradient = rangeLinearGradient;
47+
48+
}
49+
</script>

‎ej2-asp-core-mvc/code-snippet/lineargauge/animation/animation.cs

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Diagnostics;
4+
using System.Linq;
5+
using System.Threading.Tasks;
6+
using Microsoft.AspNetCore.Mvc;
7+
using EJ2_Core_Application.Models;
8+
using Newtonsoft.Json;
9+
using Syncfusion.EJ2.Charts;
10+
using Syncfusion.EJ2.LinearGauge;
11+
12+
13+
namespace EJ2_Core_Application.Controllers
14+
{
15+
public class HomeController : Controller
16+
{
17+
public IActionResult Index()
18+
{
19+
return View();
20+
}
21+
}
22+
}

‎ej2-asp-core-mvc/code-snippet/lineargauge/animation/razor

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@using Syncfusion.EJ2.LinearGauge;
2+
3+
@Html.EJS().LinearGauge("container").Load("gaugeLoad").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Annotations(
4+
annotation => annotation.AxisIndex(0).AxisValue(10).X(10).Y(-70).ZIndex("1").Content("<div style='width: 70px;margin-left:-3%;margin-top: 42%;font-size: 16px;'>10 MPH</div>").Add()).Axes(axes =>
5+
axes.Pointers(pointer => pointer.Width(15).Height(15).Value(10).Offset("-40").Placement(Syncfusion.EJ2.LinearGauge.Placement.Near).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Triangle).Add())
6+
.MajorTicks(majorTick => majorTick.Interval(10).Height(20).Color("#9E9E9E"))
7+
.MinorTicks(minorTick => minorTick.Interval(2).Height(10).Color("#9E9E9E"))
8+
.Ranges(range => range.Start(0).End(50).StartWidth(10).EndWidth(10).Color("#F45656").Offset(35).Add())
9+
.LabelStyle(labelStyle => labelStyle.Offset(48).Font(font => font.FontFamily("inherit"))).Add()).Render()
10+
11+
<script>
12+
window.gaugeLoad = function (args) {
13+
args.gauge.animationDuration = 3000;
14+
}
15+
</script>

‎ej2-asp-core-mvc/code-snippet/lineargauge/animation/tagHelper

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@using Syncfusion.EJ2.LinearGauge
2+
3+
@{
4+
var labelFont = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { FontFamily = "inherit" };
5+
}
6+
7+
<ejs-lineargauge id="linear" load="gaugeLoad" orientation="Horizontal">
8+
<e-lineargauge-border color="Transparent"></e-lineargauge-border>
9+
<e-lineargauge-axes>
10+
<e-lineargauge-axis>
11+
<e-axis-labelstyle offset="48" font="labelFont">
12+
</e-axis-labelstyle>
13+
<e-axis-majorticks Interval="10" Height="20" Color="#9E9E9E"></e-axis-majorticks>
14+
<e-axis-minorticks Interval="2" Height="10" Color="#9E9E9E"></e-axis-minorticks>
15+
<e-lineargauge-pointers>
16+
<e-lineargauge-pointer Type="Marker" MarkerType=Triangle Value="10" Height=15 Width=15 offset="-40" Placement=Near>
17+
</e-lineargauge-pointer>
18+
</e-lineargauge-pointers>
19+
<e-lineargauge-ranges>
20+
<e-lineargauge-range Start="0" End="50" startwidth="10" endwidth="10" offset="35" color="#F45656"></e-lineargauge-range>
21+
</e-lineargauge-ranges>
22+
</e-lineargauge-axis>
23+
</e-lineargauge-axes>
24+
<e-lineargauge-annotations>
25+
<e-lineargauge-annotation Content='<div style="width: 70px;margin-left:-3%;margin-top: 42%;font-size: 16px;">10 MPH</div>' X="10" Y="-70" AxisValue=10 AxisIndex=0 ZIndex="1"></e-lineargauge-annotation>
26+
</e-lineargauge-annotations >
27+
</ejs-lineargauge >
28+
29+
<script>
30+
window.gaugeLoad = function (args) {
31+
args.gauge.animationDuration = 3000;
32+
}
33+
</script>
34+

‎ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/marker-pointer-image.cs

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Diagnostics;
4+
using System.Linq;
5+
using System.Threading.Tasks;
6+
using Microsoft.AspNetCore.Mvc;
7+
using EJ2_Core_Application.Models;
8+
using Newtonsoft.Json;
9+
using Syncfusion.EJ2.Charts;
10+
using Syncfusion.EJ2.LinearGauge;
11+
12+
13+
namespace EJ2_Core_Application.Controllers
14+
{
15+
public class HomeController : Controller
16+
{
17+
public IActionResult Index()
18+
{
19+
return View();
20+
}
21+
}
22+
}

‎ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/razor

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@using Syncfusion.EJ2.LinearGauge;
2+
3+
@Html.EJS().LinearGauge("gauge").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Axes(axes => axes.Minimum(0).Maximum(100)
4+
.LabelStyle(labelStyle => labelStyle.Font(font => font.FontFamily("inherit")).Position(Syncfusion.EJ2.LinearGauge.Position.Outside))
5+
.Pointers(pointer =>
6+
{
7+
pointer.Value(60).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Image).Width(40).Height(40).ImageUrl("https://ej2.syncfusion.com/aspnetmvc/Content/LinearGauge/step-count.png").Offset("-27").Add();
8+
})
9+
.MajorTicks(majorTick => majorTick.Interval(20).Height(7).Width(1).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)).MinorTicks(minorTick => minorTick.Height(3).Width(1).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)).Add()).Render()
10+

‎ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/tagHelper

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@using Syncfusion.EJ2.LinearGauge
2+
3+
@{
4+
var labelFont = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { FontFamily = "inherit" };
5+
}
6+
<ejs-lineargauge id='container'
7+
style='display:block;height:100px;'
8+
Orientation='Horizontal'>
9+
<e-lineargauge-axes>
10+
<e-lineargauge-axis Minimum="0" Maximum="100" OpposedPosition="true">
11+
<e-axis-majorticks Interval="20" Height="7" Width="1" Position=Inside></e-axis-majorticks>
12+
<e-axis-minorticks Position=Inside Height="5"></e-axis-minorticks>
13+
<e-axis-line Width="2"></e-axis-line>
14+
<e-axis-labelstyle Position=Inside font=labelFont></e-axis-labelstyle>
15+
<e-lineargauge-pointers>
16+
<e-lineargauge-pointer value="60" markerType="Image" offset="-47" width="40" height="40" imageUrl="https://ej2.syncfusion.com/aspnetcore/styles/images/lineargauge/step-count.png"></e-lineargauge-pointer>
17+
</e-lineargauge-pointers>
18+
</e-lineargauge-axis>
19+
</e-lineargauge-axes>
20+
</ejs-lineargauge>

‎ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/marker-pointer-text.cs

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Diagnostics;
4+
using System.Linq;
5+
using System.Threading.Tasks;
6+
using Microsoft.AspNetCore.Mvc;
7+
using EJ2_Core_Application.Models;
8+
using Newtonsoft.Json;
9+
using Syncfusion.EJ2.Charts;
10+
using Syncfusion.EJ2.LinearGauge;
11+
12+
13+
namespace EJ2_Core_Application.Controllers
14+
{
15+
public class HomeController : Controller
16+
{
17+
public IActionResult Index()
18+
{
19+
return View();
20+
}
21+
}
22+
}

‎ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/razor

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@using Syncfusion.EJ2.LinearGauge;
2+
3+
@{
4+
var textStyle = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { Size = "18px", FontWeight = "bold" };
5+
}
6+
7+
@Html.EJS().LinearGauge("gauge").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Axes(axes => axes.Minimum(0).Maximum(100)
8+
.Line(line => line.Width(0)).LabelStyle(labelStyle => labelStyle.Font(font => font.FontFamily("inherit")).Position(Syncfusion.EJ2.LinearGauge.Position.Outside))
9+
.Pointers(pointer =>
10+
{
11+
pointer.Value(13).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Text).Text("Low").Color("Black").Offset("-35").TextStyle(textStyle).Add();
12+
pointer.Value(48).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Text).Text("Moderate").Color("Black").Offset("-35").TextStyle(textStyle).Add();
13+
pointer.Value(83).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Text).Text("High").Color("Black").Offset("-35").TextStyle(textStyle).Add();
14+
})
15+
.Ranges(range =>
16+
{
17+
range.Start(0).End(30).StartWidth(50).EndWidth(50).Color("#FB7D55").Position(Syncfusion.EJ2.LinearGauge.Position.Outside).Add();
18+
range.Start(30).End(65).StartWidth(50).EndWidth(50).Color("#ECC85B").Position(Syncfusion.EJ2.LinearGauge.Position.Outside).Add();
19+
range.Start(65).End(100).StartWidth(50).EndWidth(50).Color("#6FC78A").Position(Syncfusion.EJ2.LinearGauge.Position.Outside).Add();
20+
}).MajorTicks(majorTick => majorTick.Interval(20).Height(7).Width(1).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)).MinorTicks(minorTick => minorTick.Height(3).Interval(10).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)).Add()).Render()
21+

‎ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/tagHelper

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@using Syncfusion.EJ2.LinearGauge
2+
3+
@{
4+
var labelFont = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { FontFamily = "inherit" };
5+
}
6+
<ejs-lineargauge id='container'
7+
style='display:block;height:100px;'
8+
Orientation='Horizontal'>
9+
<e-lineargauge-axes>
10+
<e-lineargauge-axis Minimum="0" Maximum="100" OpposedPosition="true">
11+
<e-axis-majorticks Interval="20" Height="7" Width="1" Position=Inside></e-axis-majorticks>
12+
<e-axis-minorticks Interval="10" Height="3" Position=Inside></e-axis-minorticks>
13+
<e-axis-line Width="5"></e-axis-line>
14+
<e-axis-labelstyle Position=Inside font=labelFont></e-axis-labelstyle>
15+
<e-lineargauge-pointers>
16+
<e-lineargauge-pointer value="13" markerType="Text" text="Low" color="black" offset="-55" textStyle="textStyle"></e-lineargauge-pointer>
17+
<e-lineargauge-pointer value="48" markerType="Text" text="Moderate" color="black" offset="-55" textStyle="textStyle"></e-lineargauge-pointer>
18+
<e-lineargauge-pointer value="83" markerType="Text" text="High" color="black" offset="-55" textStyle="textStyle"></e-lineargauge-pointer>
19+
</e-lineargauge-pointers>
20+
<e-lineargauge-ranges>
21+
<e-lineargauge-range Start="0" End="30" Color="#FB7D55" StartWidth="50" EndWidth="50" Position="Inside"></e-lineargauge-range>
22+
<e-lineargauge-range Start="30" End="65" Color="#ECC85B" StartWidth="50" EndWidth="50" Position="Inside"></e-lineargauge-range>
23+
<e-lineargauge-range Start="65" End="100" Color="#6FC78A" StartWidth="50" EndWidth="50" Position="Inside"></e-lineargauge-range>
24+
</e-lineargauge-ranges>
25+
</e-lineargauge-axis>
26+
</e-lineargauge-axes>
27+
</ejs-lineargauge>

0 commit comments

Comments
 (0)