How to express your data using Ignite UI’s jQuery Linear Gauge control.

Marina Stoyanova / Monday, November 4, 2013

When it comes to Data Visualization, there is an abundance of controls in the Ignite UI package, which can help you provide the best user interface. Depending on the type of information you wish to display you can choose which chart to use. In the new release of Ignite UI there are few new controls and the one we are going to focus on in the current blog is the Linear Gauge. It supports a great amount of options and features , by the use of which you can customize this chart and adapt it to your data.

basic linear gauge


Basic Configuration

If you consider adding this control to a HTML page then you will need an element on which to instantiate the control.


  1. <div id="linearGauge">div>

After that include the following JS  code:


  1. $("#linearGauge").igLinearGauge({
  2.     width: "500px",
  3.     height: "80px",
  4.     minimumValue: "0",
  5.     maximumValue: "50",
  6.     value: "20"
  7. });


Example image:

linear gauge

If you are making a MVC project first add the Infragistics references and then use the following lines:


  1. @(Html.Infragistics().LinearGauge()
  2.         .Width("100%")
  3.         .Height("80px")
  4.         .MinimumValue(0)
  5.         .MaximumValue(40)
  6.         .Value(22)
  7.         .Render()
  8. )

Those are the basic steps to configure the control. Of course you can add some options to the configured chart to make it correspond to your ideas. We are going to cover few of the options that Linear Gauge supports, but the entire list of features you can find in the API documentation.


As we said the igLinearGauge control is an Ignite UI control which displays data in a form of linear gauge. It consists of visual elements like scale, needle, ranges and labels. All of those elements can be customized.


The scale is composed of tick marks and labels. The size and the positions of the tick marks are relative to the Graph area(a frame of reference for positioning the visual elements of the scale). There are quite a few options related to the scale. For example you can decide whether you want your scale to be inverted or not by setting the isScaleInverted option to ‘true’ or ‘false’. You can manipulate the position of the scale using the scaleStartExtend and scaleEndExtend , having in mind that both- start position and the end position of the scale are relative to the left edge of the graph area. To specify the value range you need to use the maximumValue and minimumValue options and assign them the values you wish. You can set a background color with the backingBrush option.


  1. minimumValue: "0",
  2. maximumValue: "50",
  3. scaleEndExtent: ".7",
  4. scaleStartExtent: ".2",
  5. isScaleInverted: "true",
  6. backingBrush: "#99CCFF"


  1. .MinimumValue(0)
  2. .MaximumValue(50)         
  3. .BackingBrush("#99CCFF")
  4. .IsScaleInverted(true)
  5. .ScaleEndExtent(.7)
  6. .ScaleStartExtent(.2)

Example image:

inverted linear gauge


Ticks by themselves can be customized in few different ways. You can change the main ticks brush using the tickBrush option or you can change the mini ticks brush by the minorTickBrush option. You can also change the thickness of the main brushes by assinging them the desired value using the tickStrokeThickness option and respectively the mini brushes using minorTickStrokeThickness. The number of mini ticks that are displayed can be changed with minorTickCount.


  1. tickStrokeThickness: 4,
  2. minorTickBrush: "blue",
  3. tickBrush: "yellow",
  4. minorTickCount: 5


  1. .TickStrokeThickness(4)
  2. .TickBrush("yellow")
  3. .MinorTickBrush("blue")
  4. .MinorTickCount(5)

Example image:

linear gauge with custom ticks



To configure the needle actually means to set its shape, size and position. The position is set by the value option and the size can be changed by needleStrokeThickness option. The shape can be: “needle”, “triangle”,”rectangle”, “trapezoid” and the option that is used is needleShape. If you want a specific shape you can set this option to “custom” and then by using the following options you can create your own needle.


  1. value: "20",
  2. needleShape: "custom",
  3. needleInnerExtent: 0.3,
  4. needleOuterExtent: 0.7,
  5. needleOuterPointExtent: 0.9,
  6. needleInnerPointExtent: 0.3,
  7. needleInnerPointWidth: 0,
  8. needleOuterPointWidth: 0.3,
  9. needleInnerBaseWidth: 0,
  10. needleOuterBaseWidth: 0.07,
  11. needleBrush:"lightpink"


  1. .NeedleShape(LinearGraphNeedleShape.Custom)
  2. .NeedleBrush("lightpink")
  3. .NeedleInnerExtent(0.3)
  4. .NeedleOuterExtent(0.7)
  5. .NeedleOuterPointExtent(0.9)
  6. .NeedleInnerPointExtent(0.3)
  7. .NeedleInnerPointWidth(0)
  8. .NeedleOuterPointWidth(0.3)
  9. .NeedleInnerBaseWidth(0)
  10. .NeedleOuterBaseWidth(.07)

Example image:

custom needle



The igLinearGauge control supports multiple relative ranges. Each range can be configured individually by specifying its starting and ending value , brush and border thickness.


  1.   ranges: [
  2. {
  3.     name: 'first',
  4.     startValue: -275,
  5.     endValue: -192.5,
  6.     outerStartExtent: .7,
  7.     outerEndExtent: .55
  8. },
  9. {
  10.     name: 'second',
  11.     startValue: -192.5,
  12.     endValue: -82.5,
  13.     outerStartExtent: .55,
  14.     outerEndExtent: .35
  15. },
  16. {
  17.     name: 'third',
  18.     startValue: - 82.5,
  19.     endValue: 0,
  20.     outerStartExtent: .35,
  21.     outerEndExtent: .25
  22. }
  23.   ]

Example picture:


You can achieve the sloping effect for scale by changing the outer extent options. The Linear Gauge can be either horizontal or vertical. This change can be made by orientation option:


  1. orientation: "vertical"

Example image:

vertical linear gauge



Changing the label color can be done by fontBrush option. If you want your label to be more than numbers you can use the following event and change the it.

  1. formatLabel: function (evt, ui) {
  2.     ui.label += 'Kilos';
  3. }


custom labels

The position of the labels can be modified with labelExtent . This option gets or sets the position on which to put the label as a value from 0 to 1, measured form the bottom of the scale.

custom scale


Tooltips are always useful and you can have tooltips when you hover the needle or when you hover a particular area of the chart. If you want to enable the tooltips – first set the showTooltip option to true and then use the needleToolTipTemplate or the rangeToolTipTemplate like this:


  1. <script id="needleToolTip" type="text/x-jquery-tmpl">
  2.     <div class='ui-lineargauge-needle-tooltip'>
  3.         <span>The needle is on : ${label}span>
  4.     div>
  5. script>
  7. <script id="rangeToolTip" type="text/x-jquery-tmpl">
  8.     <span>Range: ${item.startValue} to ${item.endValue}span>
  9. script>
  1. showToolTip: true,
  2. needleToolTipTemplate: "needleToolTip",
  3. rangeTooltipTemplate: "rangeToolTip",

Example image:



The igLinearGauge control gives you the ability to create attractive data presentations and it provides a simple and concise view of a primary value compared against a scale. This jQuery UI widget visualize data in the form of a linear gauge. Like a classic thermometer, these gauges can read out one or more values over a straight line measurement scale that you can orient vertically or horizontally.


Coming soon a sample showing the dynamic use of this control.


You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!