Skip to content

Commit 580616f

Browse files
Merge branch '871738-Asp-UG1' of https://github.com/syncfusion-content/ej2-asp-core-mvc-docs into 871738-Asp-UG1
2 parents 4e0e224 + 05a58d4 commit 580616f

File tree

174 files changed

+7208
-82
lines changed

Some content is hidden

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

174 files changed

+7208
-82
lines changed
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 %}
Loading
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+
}
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>
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>
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
2+
3+
<script>
4+
var documenteditor;
5+
var container;
6+
function onCreated() {
7+
var documenteditorElement = document.getElementById('container');
8+
container = documenteditorElement.ej2_instances[0];
9+
documenteditor = container.documentEditor;
10+
let mentionData = [
11+
{ "Name": "Selma Rose", "Eimg": "3", "EmailId": "selma@mycompany.com" },
12+
{ "Name": "Russo Kay", "Eimg": "8", "EmailId": "russo@mycompany.com" },
13+
{ "Name": "Camden Kate", "Eimg": "9", "EmailId": "camden@mycompany.com" },
14+
{ "Name": "Mary Kate", "Eimg": "4", "EmailId": "marry@mycompany.com" },
15+
{ "Name": "Ursula Ann", "Eimg": "2", "EmailId": "ursula@mycompany.com" },
16+
{ "Name": "Margaret", "Eimg": "5", "EmailId": "margaret@mycompany.com" },
17+
{ "Name": "Laura Grace", "Eimg": "6", "EmailId": "laura@mycompany.com" },
18+
{ "Name": "Robert", "Eimg": "8", "EmailId": "robert@mycompany.com" },
19+
{ "Name": "Albert", "Eimg": "9", "EmailId": "albert@mycompany.com" },
20+
{ "Name": "Michale", "Eimg": "10", "EmailId": "michale@mycompany.com" },
21+
{ "Name": "Andrew James", "Eimg": "7", "EmailId": "james@mycompany.com" },
22+
{ "Name": "Rosalie", "Eimg": "4", "EmailId": "rosalie@mycompany.com" },
23+
{ "Name": "Stella Ruth", "Eimg": "2", "EmailId": "stella@mycompany.com" },
24+
{ "Name": "Richard Rose", "Eimg": "10", "EmailId": "richard@mycompany.com" },
25+
{ "Name": "Gabrielle", "Eimg": "3", "EmailId": "gabrielle@mycompany.com" },
26+
{ "Name": "Thomas", "Eimg": "7", "EmailId": "thomas@mycompany.com" },
27+
{ "Name": "Charles Danny", "Eimg": "8", "EmailId": "charles@mycompany.com" },
28+
{ "Name": "Daniel", "Eimg": "10", "EmailId": "daniel@mycompany.com" },
29+
{ "Name": "Matthew", "Eimg": "7", "EmailId": "matthew@mycompany.com" },
30+
{ "Name": "Donald Krish", "Eimg": "9", "EmailId": "donald@mycompany.com" },
31+
{ "Name": "Yohana", "Eimg": "1", "EmailId": "yohana@mycompany.com" },
32+
{ "Name": "Kevin Paul", "Eimg": "10", "EmailId": "kevin@mycompany.com" },
33+
{ "Name": "Andrew Fuller", "Eimg": "3", "EmailId": "andrew@mycompany.com"}
34+
];
35+
container.documentEditorSettings.mentionSettings = { dataSource: mentionData, fields: { text: 'Name' }};
36+
}
37+
</script>
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
2+
<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
3+
4+
<script>
5+
var documenteditor;
6+
var container;
7+
function onCreated() {
8+
var documenteditorElement = document.getElementById('container');
9+
container = documenteditorElement.ej2_instances[0];
10+
documenteditor = container.documentEditor;
11+
let mentionData = [
12+
{ "Name": "Selma Rose", "Eimg": "3", "EmailId": "selma@mycompany.com" },
13+
{ "Name": "Russo Kay", "Eimg": "8", "EmailId": "russo@mycompany.com" },
14+
{ "Name": "Camden Kate", "Eimg": "9", "EmailId": "camden@mycompany.com" },
15+
{ "Name": "Mary Kate", "Eimg": "4", "EmailId": "marry@mycompany.com" },
16+
{ "Name": "Ursula Ann", "Eimg": "2", "EmailId": "ursula@mycompany.com" },
17+
{ "Name": "Margaret", "Eimg": "5", "EmailId": "margaret@mycompany.com" },
18+
{ "Name": "Laura Grace", "Eimg": "6", "EmailId": "laura@mycompany.com" },
19+
{ "Name": "Robert", "Eimg": "8", "EmailId": "robert@mycompany.com" },
20+
{ "Name": "Albert", "Eimg": "9", "EmailId": "albert@mycompany.com" },
21+
{ "Name": "Michale", "Eimg": "10", "EmailId": "michale@mycompany.com" },
22+
{ "Name": "Andrew James", "Eimg": "7", "EmailId": "james@mycompany.com" },
23+
{ "Name": "Rosalie", "Eimg": "4", "EmailId": "rosalie@mycompany.com" },
24+
{ "Name": "Stella Ruth", "Eimg": "2", "EmailId": "stella@mycompany.com" },
25+
{ "Name": "Richard Rose", "Eimg": "10", "EmailId": "richard@mycompany.com" },
26+
{ "Name": "Gabrielle", "Eimg": "3", "EmailId": "gabrielle@mycompany.com" },
27+
{ "Name": "Thomas", "Eimg": "7", "EmailId": "thomas@mycompany.com" },
28+
{ "Name": "Charles Danny", "Eimg": "8", "EmailId": "charles@mycompany.com" },
29+
{ "Name": "Daniel", "Eimg": "10", "EmailId": "daniel@mycompany.com" },
30+
{ "Name": "Matthew", "Eimg": "7", "EmailId": "matthew@mycompany.com" },
31+
{ "Name": "Donald Krish", "Eimg": "9", "EmailId": "donald@mycompany.com" },
32+
{ "Name": "Yohana", "Eimg": "1", "EmailId": "yohana@mycompany.com" },
33+
{ "Name": "Kevin Paul", "Eimg": "10", "EmailId": "kevin@mycompany.com" },
34+
{ "Name": "Andrew Fuller", "Eimg": "3", "EmailId": "andrew@mycompany.com"}
35+
];
36+
container.documentEditorSettings.mentionSettings = { dataSource: mentionData, fields: { text: 'Name' }};
37+
}
38+
</script>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
public ActionResult Default()
2+
{
3+
return View();
4+
}
5+
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).DocumentEditorSettings("settings").Render()
2+
<script>
3+
var settings = { colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true } };
4+
</script>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<ejs-documenteditorcontainer id="container" documentEditorSettings="settings" enableToolbar=true height="590px"></ejs-documenteditorcontainer>
2+
3+
<script>
4+
var settings = { colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true } };
5+
</script>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
public ActionResult Default()
2+
{
3+
return View();
4+
}
5+
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@Html.EJS().Button("export").Content("Export").Render()
2+
<div id="documenteditor" style="width:100%;height:100%">
3+
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableWordExport(true).Render()
4+
</div>
5+
6+
<script>
7+
var documenteditor;
8+
document.addEventListener('DOMContentLoaded', function () {
9+
var documenteditorElement = document.getElementById("container");
10+
documenteditor = documenteditorElement.ej2_instances[0];
11+
documenteditor.resize();
12+
document.getElementById('export').addEventListener('click', function () {
13+
documenteditor.save('sample', 'Dotx');
14+
});
15+
});
16+
</script>
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<ejs-button id="export">Export</ejs-button>
2+
<div id="documenteditor" style="width:100%;height:100%">
3+
<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true enableWordExprot=true id="container"></ejs-documenteditor>
4+
</div>
5+
<script>
6+
var documenteditor;
7+
document.addEventListener('DOMContentLoaded', function () {
8+
var documenteditorElement = document.getElementById("container");
9+
documenteditor = documenteditorElement.ej2_instances[0];
10+
documenteditor.resize();
11+
document.getElementById('export').addEventListener('click', function () {
12+
documenteditor.save('sample', 'Dotx');
13+
});
14+
});
15+
</script>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
public ActionResult Default()
2+
{
3+
return View();
4+
}
5+
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div>
2+
@Html.EJS().DocumentEditor("container").Created("onCreate").IsReadOnly(false).DocumentEditorSettings("settings").Render()
3+
</div>
4+
5+
<script>
6+
var container;
7+
var settings = { showNavigationPane: true };
8+
function onCreate() {
9+
var documenteditorElement = document.getElementById("container");
10+
container = documenteditorElement.ej2_instances[0];
11+
container.enableAllModules();
12+
}
13+
</script>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<ejs-documenteditor id="container">
2+
<ejs-documenteditorcontainerevent (created)="onCreate()" documentEditorSettings="settings" isReadOnly=false></ejs-documenteditorcontainerevent>
3+
</ejs-documenteditor>
4+
5+
<script>
6+
var container;
7+
var settings = { showNavigationPane: true };
8+
function onCreate() {
9+
var documenteditorElement = document.getElementById("container");
10+
container = documenteditorElement.ej2_instances[0];
11+
container.enableAllModules();
12+
}
13+
</script>
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+
}
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>

0 commit comments

Comments
 (0)