Integrating the Ignite UI Linear Gauge with the Grid

In this video, we’ll show you how to integrate the igLinearGauge with the igGrid. Working with our controls, often you have an opportunity to tell a story about the data you're presenting to your users. I'll show you how to marry these 2 controls together in order to make something a little more interesting rather than just some basic numbers within a grid.

You can find the code up on GitHub using this link. Make sure to download this code and follow along as we go through this video together!

Intro

Let's start off by taking a look at the running example of a code. This is the page that we'll construct during this demonstration. As you can see, we have an igGrid on the page. Inside of it, we have the igLinearGauge. You'll notice that some of the parts of the LinearGauge are removed. The ticks marks and the value indicator are all taken off in order to give you a chance to visualize your data in a little more of a creative way. So let's take a look at the code just behind this page. Here I am in visual studio code, where I'll take you through the basic structure of the page. This is the HTML for that page.

What you'll notice is that there's a div on the page here that has the ID of grid. We use that as we instantiate the igGrid by using this ID. Next we've included jQuery and jQuery UI onto the page as well as the Infragistics core, the line of business, and the data visualization controls which we use because the grid is found in the line of business file. The LinearGauge is found within the data visualization file. Now I've got some data that's a part of this application. This just represents the type of data that you'd get back say from a server. Consider we make an Ajax request, and we get data like this back.

I didn't build in any server piece to this. We'll just work with this data as an array much like what you'd get back from the server. Next we're including in the range calculator factory. I'll talk more about that in a few minutes. Then I have a file specifically for managing the grid which again we'll look at in a moment. Then app.js which has all the logic that we need in order to make the application work on its own. We’ll skip the column definition just for a moment. What we'll be doing is as the page loads, the jQuery ready function is fired and then we're instantiating the igGrid.

Tweaking the Grid

We give it a width, tell the primary key of the data that's coming in, and then we pass in the columns definitions and then the data source which you remember came from that data file I showed you a moment ago. Then we turn off auto-generate columns, and then handle the rows rendered event. Now the rows rendered event is really where all the magic comes together in order to make this page work as we want it to.

Looking back to our grid for a moment, you'll notice that we have the grid itself. Then as it's rendered, it creates a row for each one of the data items. As those rows are rendered, what we do is use JavaScript to go in and instantiate each one of the LinearGauge controls.

Now let's scroll back up for a minute. We can take a look at how we're defining the columns within the grid. Based off of our data, we have full name and then “hours” information that's associated with each person. The full name here is Tyler Martinez, and he worked these hours for 2 different weeks. As we're using it in app.js, you'll notice that we have a column defined for the full name and then one for week one and then week two. Now instead of placing data directly in each one of those cells, instead what we'll do is use a template. In this template here, you can see is a div with a class of LinearGauge and then we have some data dash values here to say that this is week one or week two. That builds up the structure for our grid.

Now as we come down, you'll notice that rows rendered is handled by this local function here called rows rendered. That reaches out to our file here that's specific for the grid that calls render rows and passes the data that we have for the application into the render rose function. Let's take a look at that for a moment. Here we'll look at app.grid.js and this is the render rows function. All that's happening at this point is as the grid has rendered each one of the rows, it fires off this event and this function is now handling that. It's taking the data that's being passed into it. Then what it will do is find each one of the divs that has the LinearGauge class applied to it and iterate through each one of those.

Creating the Gauge

At that point, all we have to do is create a LinearGauge, set it up correctly, and then we instantiate the LinearGauge itself making it a part of the grid. Now I'll quickly go through what's happening in each part of this code. The first thing that we're doing is finding the element that is the gauge container. That's the div that was in the template of the column itself. Then from there, we can extract out the week number and then subtract one from that item because that we're really looking for is the index. We can use jQuery to find the index of the row itself. After we have that information, we can take at the incoming data and find the employee data.

Populating with Data

From there, we can get the hours for that employee and then start to do something interesting with it. Now I have some code here for the range calculator and all that does is implement some basic business logic to say what the ranges are for the dates. I won't get into that at this time. If you want to check out the code, please feel free to do that. Basically it sets the start and end value for each one of the ranges. I have a range for free time, work time, plan time, plan other time and overtime. Once we have all that information and we can go down and instantiate an igLinearGauge. Again, we've got height and width.

We set the minimum value to zero and maximum value to 40 hours because there's 40 hours work in a week, then pass in the gauge ranges. Then set the front brush, backend brush, and the outline all the transparent because for this application we're taking the LinearGauge and customizing the look for it. We can pass in some hex values for the range brushes and then set the transition duration to 250 so that it grows pretty quickly as that page is loaded. Now again we're further customizing the gauge by sending the label extent to 1.5 and all of these needle items here basically to zero, so that the extra settings of the gauge disappear and all we have are the colored blocks in order to show the values that we want to communicate on the gauge.

Customizing and Finishing Your Design

For ticks post initial, those are the tick marks that show up on the gauge. Well, we're going to set that to 1000 because, again, we don't want them to show up. We'll make their value really, really big.

And as each one of the rows within the grid is rendered, a LinearGauge is created with the settings that you have here, which gives you an opportunity to integrate the igLinearGauge into the igGrid. And that’s it! Be sure to download the code from GitHub, and also get your free trial of Infragistics Ultimate to make the most of this code. You can also view more videos about the making of this dashboard on our YouTube playlist. Thanks for watching!