Advanced reporting
and data visualization components for .NET
LIVE CHAT Welcome, guest

How to design gauges from scratch?

Creating gauges from scratch is simple. Full-featured visual designer allows you to build gauges of any complexity and functionality with just a few mouse clicks. You just need to pay attention to general instrument model and elements hierarchy.
This article contains step-by-step description of actions performed to design gauge from scratch.
The following requirements to the designed instrument are determined.
1. The instrument should contain a slider moving on the scale within the limited range from 0 to 100.
2. Ticks on the scale should be designed in different colors within the following ranges: [0-80) and [80-100).
3. When the slider exceeds the 80 mark it should change the color.
4. When the mouse is on the slider, the current value should be displayed alongside as text.

1. The instrument should contain a slider moving on the scale within the limited diapason from 0 to 100.
Add the linear trajectory to the instrument (). The trajectory is intended for assigning the scale shape. Add the Scale element to the instrument (). The scale assigns value range. To make scale lie on the trajectory you should place it into the trajectory (you can do it by dragging it in the Instrument elements tree).

The instrument structure should have the following look:



To visualize the scale element you should mark it by ticks and text marks. So add the Ticks and ScaleLabels elements from the Element toolbox to the Scale1 element. After that the instrument structure should have the following look.



The instrument itself.



Set the Distance property for the Ticks1 to 10. Set the Distance property for the NumericLabels to 20.



Add the Slider element () intended for representing the current value and its changing with the help of the mouse into the instrument. The instrument structure is as follows.



To visualize the slider you should add the Needle element () into the Slider1.



To bind Needle1 to the slider value you should write the following in the Needle1 expressions:
“r(0px)” expression for the StartPoint and "r(-50px)" expression for the EndPoint.
Now the slider is able to move with the help of the mouse.



2. Ticks on the scale should be designed in different colors within the following ranges: [0-80) and [80-100).

Change the Colorizer property for the Scale1 element using the Colorizer Editor.



After all changes the instrument should have the following look.



3. When the slider exceeds the 80 mark it should change the color.

Add two styles in the instrument styles collection (InstrumentStyles): ColdColor style with blue fill and HotColor style with red fill. Write the following expres