Using the Ignite UI Linear Gauge within the Project Management Dashboard

Today we're guiding you through how we were able to modify the linear gauge for use in the Resource Hour Allocation Overview Section of the new Project Management Dashboard.

Intro

In this section, we are looking to represent each resources’ weekly allocation of hours by showing the breakdown of planned, worked, free and overage times as ranges of the gauge.

Typically, the linear gauge is used with a primary value compared against a scale with one or more comparative values — or ranges — such as visualizing wind strength or a computer’s memory pressure. For our dashboard, we only needed the ranges, so we had to strip away the non-essentials such as the needle,   tick marks, and scale labels while modifying other properties such as the background, border, and ranges. So, let’s dive in and see how we can modify the linear gauge to achieve the desired result.

Base Dependencies

This tutorial is going to assume you already have the Ignite UI CSS and Javascript dependencies included on your main page as well as a container that the Linear Gauge control can latch onto. Now, that you have the base dependencies, let’s move on and take a quick look at the code.

Dive Into the Code

Let’s start by adding code to initialize the Linear gauge and that includes a lot of your base values such as height, width, value, minimumValue and maximumValue. We’ll first set the minimum and maximum values to 0 and 40 respectively to represent the work week. Next, we’ll add 15 to the value to represent worked hours. Finally, we’ll add some ranges to represent the hour allocation categories.

Running the code, you should now see the linear gauge as it normally would appear in other samples. The needle is currently set to worked hours, plus all of the color ranges represent the hour allocation categories. Now, we’re ready to clean t his up a bit and start removing the non-essentials items from the linear gauge.

Customizing the Gauge

We can first remove the needle from the gauge, but to do this we’ll need to modify a couple properties. The first property we need to modify is the needleBreadth. By setting needleBreadth to “0”, we force the needle width to be collapsed; however, if you were to run the code, you’ll still see a sliver of color. So, we’ll need to update and modify needleInnerExtent, needleInterPointExtent, and needleOuterExtent to “0” to fully hide the needle from the gauge.

By the running code now, you’ll now see that the needle is completely removed from the gauge. All that is left to hide now is the tick marks and the labels. Let’s hide the labels. To do that, you’ll need to set labelExtent to 1.5 or anything above 1. If you provided transitionDuration in your sample, please remember to set fontBrush to “Transparent”. This way it will hide the labels during an animation.

By running the code, you’ll now see that the labels are now hidden from the gauge. All that’s left to remove are the tick marks. In order to do that, we need to set the ticksPostInitial property to something equal to or greater than the maximumValue. Here, we’ll set it to 40.

Conclusion

Now, if we were to run the code again, we can see the final display of the gauge without the needle, labels, and tick marks. With this linear gauge display, we utilize the ranges to represent the data hour allocation.

If you haven’t done so already, please feel free to download the sample code for the Dashboard at the link below and explore the code for yourself. You can also view more videos about the making of this dashboard on our YouTube playlist. Thanks for watching!