ASP.NET Core

Search results

Pointers in ASP.NET Core Circular Gauge control

22 Jul 2021 / 4 minutes to read

Pointers are used to indicate values on the axis. Value of the pointer can be modified using the value property.

tagHelper

pointers.cs

@using Syncfusion.EJ2;

<ejs-circulargauge id="circular">
    <e-circulargauge-axes>
        <e-circulargauge-axis>
            <e-circulargauge-pointers>
                <e-circulargauge-pointer value="90"></e-circulargauge-pointer>
            </e-circulargauge-pointers>
        </e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>

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();
        }
    }
}

Gauge supports 3 types of pointers such as Needle, RangeBar and Marker. You can choose any one of the pointer by using type property.

Needle Pointers

A needle pointer contains three parts, a needle, a cap / knob and a tail. The length of the needle can be customized by using radius property. The length of the tail can be customized by using length property. The radius of the cap can be customized by using radius in cap object. The needle and tail length takes value either in percentage or pixel.

tagHelper

needle-pointers.cs

@using Syncfusion.EJ2;

<ejs-circulargauge id="circular">
    <e-circulargauge-axes>
        <e-circulargauge-axis>
            <e-circulargauge-pointers>
                <e-circulargauge-pointer value="90" radius="50%">
                    <e-pointer-cap radius="10"></e-pointer-cap>
                    <e-pointer-needletail length="25%"></e-pointer-needletail>
                </e-circulargauge-pointer>
            </e-circulargauge-pointers>
        </e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>

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();
        }
    }
}

Customization

Needle color and width can be customized by using color and pointerWidth property. Cap and tails can be customized by using cap and needleTail object.

tagHelper

customization.cs

@using Syncfusion.EJ2;

<ejs-circulargauge id="circular">
    <e-circulargauge-axes>
        <e-circulargauge-axis>
            <e-circulargauge-pointers>
                <e-circulargauge-pointer value="90" radius="50%" color="#007DD1" pointerWidth="25">
                    <e-pointer-cap radius="15" color="white">
                        <e-pointers-cap-border color="#007DD1" width="5"></e-pointers-cap-border>
                    </e-pointer-cap>
                    <e-pointer-needletail length="22%" color="#007DD1"></e-pointer-needletail>
                </e-circulargauge-pointer>
            </e-circulargauge-pointers>
        </e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>

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();
        }
    }
}

The appearance of the needle pointer can be customized by using NeedleStartWidth and NeedleEndWidth.

tagHelper

needle-customization.cs

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.CircularGauge;

@{
    var font = new CircularGaugeFont
    {
        Color = "#1E7145"
    };
}
<ejs-circulargauge id="circular">
    <e-circulargauge-axes>
        <e-circulargauge-axis minimum="0" maximum="100" startAngle="270" endAngle="90">
			<e-axis-labelstyle position="Outside" font="font">
            </e-axis-labelstyle>
			<e-axis-linestyle color="#1E7145" width="3"></e-axis-linestyle>
			<e-axis-majorticks interval="100" width="1" height="0"></e-axis-majorticks>
            <e-axis-minorticks width="0" height="0"></e-axis-minorticks>
			<e-circulargauge-annotations>
                <e-circulargauge-annotation content="#annotation-template" zIndex="1"></e-circulargauge-annotation>
            </e-circulargauge-annotations>
            <e-circulargauge-pointers>
                <e-circulargauge-pointer value="70" radius="80%" color="Green" pointerWidth="2" needleStartWidth="4" needleEndWidth="4">
                    <e-pointer-cap radius="8" color="green">
                    </e-pointer-cap>
                    <e-pointer-needletail length="0%"></e-pointer-needletail>
                </e-circulargauge-pointer>
            </e-circulargauge-pointers>
        </e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>
<script id='annotation-template' type="text/x-template">
    <div id='templateWrap'>
        <div class='des'>
            <div style="color:#757575; font-family:Roboto; font-size:14px;padding-top: 26px">Customized Needle</div>
        </div>
    </div>
</script>

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();
        }
    }
}

RangeBar Pointer

RangeBar pointer is like ranges in an axis, that can be placed on gauge to mark the pointer value. RangeBar starts from the beginning of the gauge and ends at the pointer value.

tagHelper

rangebar-pointer.cs

@using Syncfusion.EJ2;

<ejs-circulargauge id="circular">
    <e-circulargauge-axes>
        <e-circulargauge-axis>
            <e-circulargauge-pointers>
                <e-circulargauge-pointer value="50" type="RangeBar" radius="60%">
                </e-circulargauge-pointer>
            </e-circulargauge-pointers>
        </e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>

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();
        }
    }
}

Customization

RangeBar can be customized in terms of color, border and thickness by using color, border and pointerWidth property.

tagHelper

@using Syncfusion.EJ2;

<ejs-circulargauge id="circular">
    <e-circulargauge-axes>
        <e-circulargauge-axis>
            <e-circulargauge-pointers>
                <e-circulargauge-pointer value="50" type="RangeBar" radius="60%" color="#007DD1" pointerWidth="15">
                    <e-pointer-border color="grey" width="2"></e-pointer-border>
                </e-circulargauge-pointer>
            </e-circulargauge-pointers>
        </e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>

Rounded corner for range bar pointer

The start and end pointers of range bar in the circular gauge are rounded to form arc gauges.

tagHelper

rangebar-pointer.cs

@using Syncfusion.EJ2;

<ejs-circulargauge id="circular">
    <e-circulargauge-axes>
        <e-circulargauge-axis>
            <e-circulargauge-pointers>
                <e-circulargauge-pointer value="50" type="RangeBar" radius="60%" roundedCornerRadius="6">
                </e-circulargauge-pointer>
            </e-circulargauge-pointers>
        </e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>

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();
        }
    }
}

Marker Pointer

Different type of marker shape can be used to mark the pointer value in axis. You can change the marker shape using markerShape property in pointer. Gauge supports the below marker shape.

Circle
Rectangle
Triangle
InvertedTriangle
Diamond

We can use image instead of rendering marker shape to denote the pointer value. It can be achieved by setting markerShape to Image and assigning image path to imageUrl in pointer.

tagHelper

marker-pointer.cs

@using Syncfusion.EJ2;

<ejs-circulargauge id="circular">
    <e-circulargauge-axes>
        <e-circulargauge-axis>
            <e-circulargauge-pointers>
                <e-circulargauge-pointer value="90" type="Marker" radius="100%" markerShape="InvertedTriangle" markerHeight="15" markerWidth="15">
                </e-circulargauge-pointer>
            </e-circulargauge-pointers>
        </e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>

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();
        }
    }
}

Customization

The marker can be customized in terms of color, border, width and height by using color, border, markerWidth and markerHeight property in pointer.

tagHelper

@using Syncfusion.EJ2;

<ejs-circulargauge id="circular">
    <e-circulargauge-axes>
        <e-circulargauge-axis>
            <e-circulargauge-pointers>
                <e-circulargauge-pointer value="90" type="Marker" radius="100%" markerShape="Triangle" color="white" markerHeight="15" markerWidth="15">
                    <e-pointer-border color="#007DD1" width="2"></e-pointer-border>
                </e-circulargauge-pointer>
            </e-circulargauge-pointers>
        </e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>

Dragging Pointer

The pointers can be dragged over the axis line by clicking and dragging the same. To enable or disable the pointer drag, use the EnablePointerDrag property.

tagHelper

dragging-pointer.cs

@using Syncfusion.EJ2;

<ejs-circulargauge id="circular" enablePointerDrag="true" height="250px" width="250px">
    <e-circulargauge-axes>
        <e-circulargauge-axis>
            <e-circulargauge-pointers>
                <e-circulargauge-pointer value="50">
                </e-circulargauge-pointer>
            </e-circulargauge-pointers>
        </e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>

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();
        }
    }
}

Multiple Pointers

In addition to the default pointer, you can add n number of pointer to an axis by using pointers property.

tagHelper

multiple-pointer.cs

@using Syncfusion.EJ2;

<ejs-circulargauge id="circular">
    <e-circulargauge-axes>
        <e-circulargauge-axis>
            <e-circulargauge-pointers>
                <e-circulargauge-pointer value="90" type="Marker" radius="100%" markerShape="InvertedTriangle" markerHeight="15" markerWidth="15">
                </e-circulargauge-pointer>
                <e-circulargauge-pointer value="90" type="RangeBar" radius="60%" pointerWidth="10"></e-circulargauge-pointer>
                <e-circulargauge-pointer value="90" radius="60%" pointerWidth="25">
                    <e-pointer-cap radius="15">
                        <e-pointers-cap-border width="5"></e-pointers-cap-border>
                    </e-pointer-cap>
                    <e-pointer-needletail length="22%"></e-pointer-needletail>
                </e-circulargauge-pointer>
            </e-circulargauge-pointers>
        </e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>

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();
        }
    }
}

Animation

Pointer will get animate on loading the gauge, this can be handled by using animation property in pointer. The enable property in animation allows you to enable or disable the animation. The duration property specify the duration of the animation in milliseconds.

tagHelper

animation.cs

@using Syncfusion.EJ2;

<ejs-circulargauge id="circular">
    <e-circulargauge-axes>
        <e-circulargauge-axis>
            <e-circulargauge-pointers>
                <e-circulargauge-pointer value="90" type="Marker" radius="100%" markerShape="InvertedTriangle" markerHeight="15" markerWidth="15">
                    <e-pointer-animation enable="true"></e-pointer-animation>
                </e-circulargauge-pointer>
                <e-circulargauge-pointer value="90" type="RangeBar" radius="60%" pointerWidth="10">
                    <e-pointer-animation enable="true"></e-pointer-animation>
                </e-circulargauge-pointer>
                <e-circulargauge-pointer value="90" radius="60%" pointerWidth="25">
                    <e-pointer-cap radius="15">
                        <e-pointers-cap-border width="5"></e-pointers-cap-border>
                    </e-pointer-cap>
                    <e-pointer-needletail length="22%"></e-pointer-needletail>
                        <e-pointer-animation enable="false"></e-pointer-animation>
                </e-circulargauge-pointer>
            </e-circulargauge-pointers>
        </e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>

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();
        }
    }
}

Gradient Color

Gradient support allows to add multiple colors in the range and pointer of the circular gauge. The following gradient types are supported in the circular gauge.

Linear Gradient
Radial Gradient

Linear Gradient

Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient will be set using the startValue property. The end value of the linear gradient will be set using the endValue property. The color stop values such as color, opacity and offset are set using colorStop property.

The linear gradient can be applied to all pointer types like marker, range bar and needle. To do so, follow the below code sample.

lineargradient.cs

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();
        }
    }
}

Radial Gradient

Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the innerPosition property. The outer circle position of the radial gradient can be set using the outerPosition property. The color stop values such as color, opacity and offset are set using colorStop property.

The radial gradient can be applied to all pointer types like marker, range bar and needle. To do so, follow the below code sample.

radialgradient.cs

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();
        }
    }
}

Contents

Needle Pointers
RangeBar Pointer
Rounded corner for range bar pointer
Marker Pointer
Dragging Pointer
Multiple Pointers
Animation
Gradient Color
Linear Gradient
Radial Gradient

Contents

Needle Pointers
RangeBar Pointer
Rounded corner for range bar pointer
Marker Pointer
Dragging Pointer
Multiple Pointers
Animation
Gradient Color
Linear Gradient
Radial Gradient

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!