Search results

Ranges in ASP.NET MVC Linear Gauge control

You can categorize the axis values using start and end property in the ranges. You can add any number of range for an axis by using array of range objects.

razor
ranges.cs
@using Syncfusion.EJ2;
@Html.EJS().LinearGauge("linear").Load("gaugeLoad").Render()
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges=[{ start: 50, end: 80 }]
    }
</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;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}

Ranges Customization

Ranges can be customized using the following properties.

  • startWidth - Specifies start width of the range
  • endWidth - Specifies end width of the range
  • color - Specifies color of the range
  • position - Specifies the range bar position. Its possible values are ‘inside’ and ‘outside’
  • Offset - Specifies offset value from its default position
  • LinearGaugeRangeBorder - Specifies range bar border color and width.
razor
range-customization.cs
@using Syncfusion.EJ2;
@Html.EJS().LinearGauge("linear").Load("gaugeLoad").Render()
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges = [{
            start: 50,
            end: 80,
            startWidth: 10,
            endWidth: 20,
            color: 'red'
        }]
    }
</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;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}

Multiple Ranges

You can add multiple ranges to an axis as demonstrated below.

razor
multiple-ranges.cs
@using Syncfusion.EJ2;
@Html.EJS().LinearGauge("linear").Load("gaugeLoad").Render()
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges = [{
            start: 0,
            end: 30,
            startWidth: 10,
            endWidth: 10,
            color: '#41f47f'
        },
        {
            start: 30,
            end: 50,
            startWidth: 10,
            endWidth: 10,
            color: '#f49441'
        }, {
            start: 50,
            end: 100,
            startWidth: 10,
            endWidth: 10,
            color: '#cd41f4'
        }]
    }
</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;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


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 ranges and pointers 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 can 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.

To apply linear gradient to the range, follow the below code sample.

razor
lineargradient.cs
@Html.EJS().LinearGauge("container").Load("onGaugeLoad").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Container(
            new Syncfusion.EJ2.LinearGauge.LinearGaugeContainer { Width = 30,
                Offset = 30 }
           ).Margin(new Syncfusion.EJ2.LinearGauge.LinearGaugeMargin{ Bottom=50}).Axes(new List<Syncfusion.EJ2.LinearGauge.LinearGaugeAxis>
                {
                new Syncfusion.EJ2.LinearGauge.LinearGaugeAxis
                {
                Minimum = 0, Maximum = 100,
                Line = new Syncfusion.EJ2.LinearGauge.LinearGaugeLine { Width = 0 },
                MajorTicks = new Syncfusion.EJ2.LinearGauge.LinearGaugeTick { Interval= 25, Height= 0 },
                MinorTicks = new Syncfusion.EJ2.LinearGauge.LinearGaugeTick { Height=0 },
                LabelStyle = new Syncfusion.EJ2.LinearGauge.LinearGaugeLabel {  Offset = 55 },
                } }).Render();

<script type="text/javascript">
    function onGaugeLoad(sender) {
        sender.gauge.axes[0].pointers = [{
            value: 80, height: 25,
            width: 35, placement: 'Near',
            offset: -44, markerType: 'Triangle',
            color: '#f54ea2'
        }];
        sender.gauge.axes[0].ranges = [{
            start: 0, end: 80,
            startWidth: 30, endWidth: 30,
            offset: 30,
            linearGradient: {
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                { color: '#fef3f9', offset: '0%', opacity: 1 },
                { color: '#f54ea2', offset: '100%', opacity: 1 }]
            }
        }]
    }
</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;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


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.

To apply radial gradient to the range, follow the below code sample.

razor
radialgradient.cs
@Html.EJS().LinearGauge("container").Load("onGaugeLoad").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Container(
            new Syncfusion.EJ2.LinearGauge.LinearGaugeContainer { Width = 30,
                Offset = 30 }
           ).Margin(new Syncfusion.EJ2.LinearGauge.LinearGaugeMargin{ Bottom=50}).Axes(new List<Syncfusion.EJ2.LinearGauge.LinearGaugeAxis>
                {
                new Syncfusion.EJ2.LinearGauge.LinearGaugeAxis
                {
                Minimum = 0, Maximum = 100,
                Line = new Syncfusion.EJ2.LinearGauge.LinearGaugeLine { Width = 0 },
                MajorTicks = new Syncfusion.EJ2.LinearGauge.LinearGaugeTick { Interval= 25, Height= 0 },
                MinorTicks = new Syncfusion.EJ2.LinearGauge.LinearGaugeTick { Height=0 },
                LabelStyle = new Syncfusion.EJ2.LinearGauge.LinearGaugeLabel {  Offset = 55 },
                } }).Render();

<script type="text/javascript">
    function onGaugeLoad(sender) {
        sender.gauge.axes[0].pointers = [{
            value: 80, height: 25,
            width: 35, placement: 'Near',
            offset: -44, markerType: 'Triangle',
            color: '#f54ea2'
        }];
        sender.gauge.axes[0].ranges = [{
            start: 0, end: 80,
            startWidth: 30, endWidth: 30,
            offset: 30,
            radialGradient: {
                radius: '60%',
                outerPosition: { x: '50%', y: '50%' },
                innerPosition: { x: '50%', y: '50%' },
                colorStop: [
                { color: '#fff5f5', offset: '0%', opacity: 0.9 },
                { color: '#f54ea2', offset: '100%', opacity: 0.8 }]
            }
        }]
    }
</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;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}