869993: committed missed contents.

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

@@ -0,0 +1,63 @@
+---
+layout: post
+title: Animation in ##Platform_Name## Circular Gauge component | Syncfusion
+description: Learn here all about animation in the Syncfusion ##Platform_Name## Circular Gauge component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Circular Gauge
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Animation in Circular Gauge component
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+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.
+
+1. The axis line will be animated in the rendering direction (clockwise or anticlockwise).
+2. Each tick line and label will then be animated.
+3. If available, ranges will be animated.
+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).
+5. If available, annotations will be animated.
+
+The animation of the Circular Gauge is demonstrated in the following example.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/circulargauge/gauge-animation/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Animation.cs" %} 
+{% include code-snippet/circulargauge/gauge-animation/gauge-animation.cs %} 
+{% endhighlight %}
+{% endtabs %}
+
+![Circular Gauge with Animation](../circular-gauge/images/animation.gif)
+
+> 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.
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+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.
+
+1. The axis line will be animated in the rendering direction (clockwise or anticlockwise).
+2. Each tick line and label will then be animated.
+3. If available, ranges will be animated.
+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).
+5. If available, annotations will be animated.
+
+The animation of the Circular Gauge is demonstrated in the following example.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/circulargauge/gauge-animation/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Animation.cs" %}
+{% include code-snippet/circulargauge/gauge-animation/gauge-animation.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Circular Gauge with Animation](../circular-gauge/images/animation.gif)
+
+> 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.
+
+{% endif %}

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

@@ -0,0 +1,19 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using EJ2_Core_Application.Models;
+using Newtonsoft.Json;
+
+namespace EJ2_Core_Application.Controllers
+{
+    public class HomeController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+    }
+}

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

@@ -0,0 +1,26 @@
+@using Syncfusion.EJ2;
+@using Syncfusion.EJ2.CircularGauge;
+
+@Html.EJS().CircularGauge("container").AnimationDuration(2000).Load("gaugeLoad").Background("transparent").Axes(axes => axes
+        .Radius("80%").StartAngle(230).EndAngle(130).LabelStyle(labelStyle => labelStyle.Position(Position.Inside).Font(font => font.FontFamily("inherit")).Offset(-1))
+        .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())
+        .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())
+        .Ranges(range => range.Start(0).End(30).StartWidth(22).EndWidth(22).Color("#E63B86").Radius("60%").Add())
+        .LineStyle(lineStyle => lineStyle.Width(8).Color("#E0E0E0"))
+        .MinorTicks(minorTick => minorTick.Offset(5)).MajorTicks(majorTick => majorTick.Offset(5)).Add()).Render()
+<script>
+
+    var rangeLinearGradient = {
+        startValue: '0%',
+        endValue: '100%',
+        colorStop: [
+            { color: '#9e40dc', offset: '0%', opacity: 1 },
+            { color: '#d93c95', offset: '70%', opacity: 1 },
+        ],
+    };
+
+    window.gaugeLoad = function (args) {
+        args.gauge.axes[0].ranges[0].linearGradient = rangeLinearGradient;
+    }
+
+</script>

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

@@ -0,0 +1,49 @@
+@using Syncfusion.EJ2;
+
+@{
+    var labelFont = new Syncfusion.EJ2.CircularGauge.CircularGaugeFont { FontFamily = "inherit" };
+}
+
+<ejs-circulargauge id="container" load="gaugeLoad">
+    <e-circulargauge-axes>
+        <e-circulargauge-axis startAngle="230" endAngle="130" minimum="0" maximum="100" radius="80%">
+            <e-circulargauge-annotations>
+                <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>
+            </e-circulargauge-annotations>
+            <e-axis-linestyle width="8" color="#E0E0E0"></e-axis-linestyle>
+            <e-axis-labelstyle offset="-1" font="labelFont">
+            </e-axis-labelstyle>
+            <e-circulargauge-pointers>
+                <e-circulargauge-pointer value="60" radius="60%" color="#c06c84" pointerWidth=7>
+                    <e-pointer-animation enable="true" duration=500></e-pointer-animation>
+                    <e-pointer-cap radius="8" color="#c06c84">
+                        <e-pointers-cap-border width="0" />
+                    </e-pointer-cap>
+                    <e-pointer-needletail length="0%" />
+                </e-circulargauge-pointer>
+            </e-circulargauge-pointers>
+            <e-circulargauge-ranges>
+                <e-circulargauge-range start="0" end="30" color="#E63B86" startwidth="22" endwidth="22" radius="60%"></e-circulargauge-range>
+            </e-circulargauge-ranges>
+            <e-axis-majorticks offset="5"></e-axis-majorticks>
+            <e-axis-minorticks offset="5"></e-axis-minorticks>
+        </e-circulargauge-axis>
+    </e-circulargauge-axes>
+</ejs-circulargauge>
+
+<script>
+    var rangeLinearGradient = {
+        startValue: '0%',
+        endValue: '100%',
+        colorStop: [
+            { color: '#9e40dc', offset: '0%', opacity: 1 },
+            { color: '#d93c95', offset: '70%', opacity: 1 },
+        ],
+    };
+
+    window.gaugeLoad = function (args) {
+        args.gauge.animationDuration = 2000;
+        args.gauge.axes[0].ranges[0].linearGradient = rangeLinearGradient;
+
+    }
+</script>

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

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using EJ2_Core_Application.Models;
+using Newtonsoft.Json;
+using Syncfusion.EJ2.Charts;
+using Syncfusion.EJ2.LinearGauge;
+
+
+namespace EJ2_Core_Application.Controllers
+{
+    public class HomeController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+@using Syncfusion.EJ2.LinearGauge;
+
+@Html.EJS().LinearGauge("container").Load("gaugeLoad").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Annotations(
+    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 =>
+        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())
+            .MajorTicks(majorTick => majorTick.Interval(10).Height(20).Color("#9E9E9E"))
+            .MinorTicks(minorTick => minorTick.Interval(2).Height(10).Color("#9E9E9E"))
+            .Ranges(range => range.Start(0).End(50).StartWidth(10).EndWidth(10).Color("#F45656").Offset(35).Add())
+            .LabelStyle(labelStyle => labelStyle.Offset(48).Font(font => font.FontFamily("inherit"))).Add()).Render()
+
+<script>
+    window.gaugeLoad = function (args) {
+        args.gauge.animationDuration = 3000;
+        }
+</script>

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

@@ -0,0 +1,34 @@
+@using Syncfusion.EJ2.LinearGauge
+
+@{
+    var labelFont = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { FontFamily = "inherit" };
+}
+
+<ejs-lineargauge id="linear" load="gaugeLoad" orientation="Horizontal">
+    <e-lineargauge-border color="Transparent"></e-lineargauge-border>
+    <e-lineargauge-axes>
+        <e-lineargauge-axis>
+            <e-axis-labelstyle offset="48" font="labelFont">
+            </e-axis-labelstyle>
+            <e-axis-majorticks Interval="10" Height="20" Color="#9E9E9E"></e-axis-majorticks>
+            <e-axis-minorticks Interval="2" Height="10" Color="#9E9E9E"></e-axis-minorticks>
+            <e-lineargauge-pointers>
+                <e-lineargauge-pointer Type="Marker" MarkerType=Triangle Value="10" Height=15 Width=15 offset="-40" Placement=Near>
+                </e-lineargauge-pointer>
+            </e-lineargauge-pointers>
+            <e-lineargauge-ranges>
+                <e-lineargauge-range Start="0" End="50" startwidth="10" endwidth="10" offset="35" color="#F45656"></e-lineargauge-range>
+            </e-lineargauge-ranges>
+        </e-lineargauge-axis>
+    </e-lineargauge-axes>
+    <e-lineargauge-annotations>
+        <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>
+    </e-lineargauge-annotations >
+</ejs-lineargauge >
+
+    <script>
+        window.gaugeLoad = function (args) {
+            args.gauge.animationDuration = 3000;
+        }
+    </script>
+

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

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using EJ2_Core_Application.Models;
+using Newtonsoft.Json;
+using Syncfusion.EJ2.Charts;
+using Syncfusion.EJ2.LinearGauge;
+
+
+namespace EJ2_Core_Application.Controllers
+{
+    public class HomeController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+    }
+}

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

@@ -0,0 +1,10 @@
+@using Syncfusion.EJ2.LinearGauge;
+
+@Html.EJS().LinearGauge("gauge").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Axes(axes => axes.Minimum(0).Maximum(100)
+           .LabelStyle(labelStyle => labelStyle.Font(font => font.FontFamily("inherit")).Position(Syncfusion.EJ2.LinearGauge.Position.Outside))
+           .Pointers(pointer =>
+           {
+               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();
+           })
+           .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()
+

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

@@ -0,0 +1,20 @@
+@using Syncfusion.EJ2.LinearGauge
+
+@{
+     var labelFont = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { FontFamily = "inherit" };
+}
+<ejs-lineargauge id='container'
+                 style='display:block;height:100px;'
+                 Orientation='Horizontal'>
+    <e-lineargauge-axes>
+        <e-lineargauge-axis Minimum="0" Maximum="100" OpposedPosition="true">
+            <e-axis-majorticks Interval="20" Height="7" Width="1" Position=Inside></e-axis-majorticks>
+            <e-axis-minorticks Position=Inside Height="5"></e-axis-minorticks>
+            <e-axis-line Width="2"></e-axis-line>
+            <e-axis-labelstyle Position=Inside font=labelFont></e-axis-labelstyle>
+            <e-lineargauge-pointers>
+                <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>
+            </e-lineargauge-pointers>
+        </e-lineargauge-axis>
+    </e-lineargauge-axes>
+</ejs-lineargauge>

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

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using EJ2_Core_Application.Models;
+using Newtonsoft.Json;
+using Syncfusion.EJ2.Charts;
+using Syncfusion.EJ2.LinearGauge;
+
+
+namespace EJ2_Core_Application.Controllers
+{
+    public class HomeController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+    }
+}

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

@@ -0,0 +1,21 @@
+@using Syncfusion.EJ2.LinearGauge;
+
+@{
+     var textStyle = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { Size = "18px", FontWeight = "bold" };
+}
+
+@Html.EJS().LinearGauge("gauge").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Axes(axes => axes.Minimum(0).Maximum(100)
+           .Line(line => line.Width(0)).LabelStyle(labelStyle => labelStyle.Font(font => font.FontFamily("inherit")).Position(Syncfusion.EJ2.LinearGauge.Position.Outside))
+           .Pointers(pointer =>
+           {
+               pointer.Value(13).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Text).Text("Low").Color("Black").Offset("-35").TextStyle(textStyle).Add();
+               pointer.Value(48).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Text).Text("Moderate").Color("Black").Offset("-35").TextStyle(textStyle).Add();
+               pointer.Value(83).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Text).Text("High").Color("Black").Offset("-35").TextStyle(textStyle).Add();
+           })
+           .Ranges(range =>
+           {
+               range.Start(0).End(30).StartWidth(50).EndWidth(50).Color("#FB7D55").Position(Syncfusion.EJ2.LinearGauge.Position.Outside).Add();
+               range.Start(30).End(65).StartWidth(50).EndWidth(50).Color("#ECC85B").Position(Syncfusion.EJ2.LinearGauge.Position.Outside).Add();
+               range.Start(65).End(100).StartWidth(50).EndWidth(50).Color("#6FC78A").Position(Syncfusion.EJ2.LinearGauge.Position.Outside).Add();
+           }).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()
+

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

@@ -0,0 +1,27 @@
+@using Syncfusion.EJ2.LinearGauge
+
+@{
+    var labelFont = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { FontFamily = "inherit" };
+}
+<ejs-lineargauge id='container'
+                style='display:block;height:100px;'
+               Orientation='Horizontal'>
+    <e-lineargauge-axes>
+        <e-lineargauge-axis Minimum="0" Maximum="100" OpposedPosition="true">
+            <e-axis-majorticks Interval="20" Height="7" Width="1" Position=Inside></e-axis-majorticks>
+            <e-axis-minorticks Interval="10" Height="3" Position=Inside></e-axis-minorticks>
+            <e-axis-line Width="5"></e-axis-line>
+            <e-axis-labelstyle Position=Inside font=labelFont></e-axis-labelstyle>
+            <e-lineargauge-pointers>
+                    <e-lineargauge-pointer value="13" markerType="Text" text="Low" color="black" offset="-55" textStyle="textStyle"></e-lineargauge-pointer>
+                    <e-lineargauge-pointer value="48" markerType="Text" text="Moderate" color="black" offset="-55" textStyle="textStyle"></e-lineargauge-pointer>
+                    <e-lineargauge-pointer value="83" markerType="Text" text="High" color="black" offset="-55" textStyle="textStyle"></e-lineargauge-pointer>
+            </e-lineargauge-pointers>
+            <e-lineargauge-ranges>
+                <e-lineargauge-range Start="0" End="30" Color="#FB7D55" StartWidth="50" EndWidth="50" Position="Inside"></e-lineargauge-range>
+                <e-lineargauge-range Start="30" End="65" Color="#ECC85B" StartWidth="50" EndWidth="50"  Position="Inside"></e-lineargauge-range>
+                <e-lineargauge-range Start="65" End="100" Color="#6FC78A" StartWidth="50" EndWidth="50"  Position="Inside"></e-lineargauge-range>
+            </e-lineargauge-ranges>
+        </e-lineargauge-axis>
+    </e-lineargauge-axes>
+</ejs-lineargauge>