ASP.NET MVC LinearGauge Overview
The LinearGauge is part of Telerik UI for ASP.NET MVC, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI LinearGauge HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI LinearGauge widget.
The LinearGauge represents values on a linear scale.
Initializing the LinearGauge
The following example demonstrates how to initialize the LinearGauge.
@(Html.Kendo().LinearGauge()
.Name("linearGauge") // The name of the LinearGauge is mandatory. It specifies the "id" attribute of the widget.
.Scale(scale => scale
.Min(0) // Set the min value of the LinearGauge.
.Max(200) // Set the min value of the LinearGauge.
)
.Pointer(pointer => pointer
.Value(10) // Set the value of the LinearGauge.
)
)
Basic Configuration
The LinearGauge configuration options are passed as attributes.
@(Html.Kendo().LinearGauge()
.Name("gauge")
.Pointer(pointer => pointer.Value(10))
.Scale(scale => scale
.MajorUnit(20)
.MinorUnit(2)
.Min(-40)
.Max(60)
.Ranges(ranges =>
{
ranges.Add().From(-40).To(-20).Color("#2798df");
ranges.Add().From(30).To(45).Color("#ffc700");
ranges.Add().From(45).To(60).Color("#c20000");
}
)
)
)
Functionality and Features
- Scale—The component's scale configuration renders the values, pointers and label.
-
Pointers—The
Pointers` configuration controls the values that will be marked on the scale. - Export—You can export the LinearGauge to a PDF, raster or vector image.
Next Steps
- Getting Started with the LinearGauge
- Basic Usage of the LinearGauge HtmlHelper for ASP.NET MVC (Demo)