Skip to content

Commit d41629d

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 11-13-2025 1:30:08 PM
1 parent 4ad414c commit d41629d

File tree

9 files changed

+192
-0
lines changed

9 files changed

+192
-0
lines changed

‎ej2-javascript/circular-gauge/how-to/arc-gauge.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
layout: post
3+
title: Arc Gauge in ##Platform_Name## Circular gauge control | Syncfusion
4+
description: Learn here all about Arc Gauge in Syncfusion ##Platform_Name## Circular gauge control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-javascript
6+
control: Arc Gauge
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
domainurl: ##DomainURL##
10+
---
11+
12+
# ##Platform_Name## Arc gauge control
13+
14+
An arc gauge in a Circular Gauge can be created by setting the startAngle and endAngle properties. These angles define the portion of the circle to be displayed as the gauge arc.
15+
16+
{% if page.publishingplatform == "typescript" %}
17+
18+
{% tabs %}
19+
{% highlight ts tabtitle="index.ts" %}
20+
{% include code-snippet/circular-gauge/how-to-cs3/index.ts %}
21+
{% endhighlight %}
22+
{% highlight html tabtitle="index.html" %}
23+
{% include code-snippet/circular-gauge/how-to-cs3/index.html %}
24+
{% endhighlight %}
25+
{% endtabs %}
26+
27+
{% previewsample "page.domainurl/code-snippet/circular-gauge/how-to-cs3" %}
28+
29+
{% elsif page.publishingplatform == "javascript" %}
30+
31+
{% tabs %}
32+
{% highlight js tabtitle="index.js" %}
33+
{% include code-snippet/circular-gauge/how-to-cs3/index.js %}
34+
{% endhighlight %}
35+
{% highlight html tabtitle="index.html" %}
36+
{% include code-snippet/circular-gauge/how-to-cs3/index.html %}
37+
{% endhighlight %}
38+
{% endtabs %}
39+
40+
{% previewsample "page.domainurl/code-snippet/circular-gauge/how-to-cs3" %}
41+
{% endif %}
42+
43+

‎ej2-javascript/code-snippet/circular-gauge/how-to-cs3/app.ts‎

Whitespace-only changes.

‎ej2-javascript/code-snippet/circular-gauge/how-to-cs3/index.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
#container {
2+
visibility: hidden;
3+
}
4+
5+
#loader {
6+
color: #008cff;
7+
font-family: 'Helvetica Neue','calibiri';
8+
font-size: 14px;
9+
height: 40px;
10+
left: 45%;
11+
position: absolute;
12+
top: 45%;
13+
width: 30%;
14+
}
15+
16+
#element {
17+
display: block;
18+
height: 350px;
19+
}

‎ej2-javascript/code-snippet/circular-gauge/how-to-cs3/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
var circulargauge = new ej.circulargauge.CircularGauge({
2+
axes: [
3+
{
4+
startAngle: -60,
5+
endAngle: 60,
6+
lineStyle: { width: 8, color: '#E0E0E0' },
7+
pointers: [
8+
{
9+
radius: '70%',
10+
needleEndWidth: 2,
11+
pointerWidth: 5,
12+
value: 70,
13+
cap: {
14+
radius: 8,
15+
border: { width: 2 },
16+
},
17+
},
18+
],
19+
20+
},
21+
],
22+
}, '#element');
23+

‎ej2-javascript/code-snippet/circular-gauge/how-to-cs3/index.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { CircularGauge } from '@syncfusion/ej2-circulargauge';
2+
let gauge: CircularGauge = new CircularGauge(
3+
{
4+
axes: [
5+
{
6+
startAngle: -60,
7+
endAngle: 60,
8+
lineStyle: { width: 8, color: '#E0E0E0' },
9+
pointers: [
10+
{
11+
radius: '70%',
12+
needleEndWidth: 2,
13+
pointerWidth: 5,
14+
value: 70,
15+
cap: {
16+
radius: 8,
17+
border: { width: 2 },
18+
},
19+
},
20+
],
21+
22+
},
23+
],
24+
},
25+
'#element'
26+
);

‎ej2-javascript/code-snippet/circular-gauge/how-to-cs3/js/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<title>EJ2 Animation</title>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="description" content="Typescript UI Controls">
6+
<meta name="author" content="Syncfusion">
7+
<link href="index.css" rel="stylesheet">
8+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet">
9+
10+
11+
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
12+
</head>
13+
14+
<body>
15+
<div id="container">
16+
<div id="element"></div>
17+
</div>
18+
<script>
19+
var ele = document.getElementById('container');
20+
if(ele) {
21+
ele.style.visibility = "visible";
22+
}
23+
</script>
24+
<script src="index.js" type="text/javascript"></script>
25+
</body></html>

‎ej2-javascript/code-snippet/circular-gauge/how-to-cs3/systemjs.config.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
System.config({
2+
transpiler: "typescript",
3+
typescriptOptions: {
4+
compilerOptions: {
5+
target: "umd",
6+
module: "commonjs",
7+
moduleResolution: "node",
8+
emitDecoratorMetadata: true,
9+
experimentalDecorators: true
10+
}
11+
},
12+
paths: {
13+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
14+
},
15+
map: {
16+
main: "index.ts",
17+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
20+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
21+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
22+
"@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
23+
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
24+
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
25+
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
26+
}
27+
});
28+
29+
System.import('index.ts').catch(console.error.bind(console)).then(function () {
30+
document.getElementById('loader').style.display = "none";
31+
document.getElementById('container').style.visibility = "visible";
32+
});

‎ej2-javascript/code-snippet/circular-gauge/how-to-cs3/ts/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>EJ2 Animation</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Typescript UI Controls" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="index.css" rel="stylesheet" />
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
13+
<script src="systemjs.config.js"></script>
14+
</head>
15+
16+
<body>
17+
<div id='loader'>Loading....</div>
18+
<div id='container'>
19+
<div id='element'></div>
20+
</div>
21+
</body>
22+
23+
</html>

‎ej2-typescript-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -640,6 +640,7 @@
640640
<li>How To
641641
<ul>
642642
<li><a href="/ej2-typescript/circular-gauge/how-to/gauge-range">Gauge Ranges</a></li>
643+
<li><a href="/ej2-typescript/circular-gauge/how-to/arc-gauge">Arc Gauge</a></li>
643644
</ul>
644645
</li>
645646
<li><a href="https://ej2.syncfusion.com/typescript/documentation/api/circular-gauge/">API Reference</a></li>

0 commit comments

Comments
 (0)