Introduction

Today we’re going to be building the control for a real time radial temperature gauge. We will be using the Telerik RadControls toolset to accomplish the control layout in this tutorial, and then we’ll be using the Weather Underground API to call real time weather information via JSON in part 2.

Let’s begin.

Create The Project

For this project we’re using the Telerik RadControls toolset. You can download a free trial at Telerik’s web site.

Now open Visual Studio, and instead of starting a new C# project, locate the Telerik option in the left sidebar. Click on Web, then on C# RadControls Web Site. We’re naming our solution WeatherGuage.

Click OK.

start

Now you’ll be directed through the Telerik start wizard. All of the default settings are fine for the purpose of this tutorial, so don’t worry about changing any of them.

The Code

Navigate to the Default.aspx page to get started.

We’re going to find the empty div tag just below the RadAjaxManager control. This is where all of our controls will go.

Within this div we’re going to write our RadRadialGuage control and specify a few properties in the opening tag:

This code will wrap the rest of the control’s options and settings.

Next, we’re going to specify the pointer attribute by typing the following within our main Telerik control:

This code will initialize our pointer with the pointer and center cap colored black. The Value is the default value the pointer will be pointing to.

Third, we’re going to create our gauge’s scale. Type the following code directly after the closing pointer tag, but still within the main Telerik control:

The code above specifies the scaled lines that specify the values of the gauge. In this case, our gauge goes from 0 to 120 with major line increments on the multiples of 20, and minor line increments on the multiples of 5.

Within the Scale code, we can create Labels and Range settings. Let’s take a look at how these work:

In the above code we’re specifying that we want the Major Label to have the suffix of degrees Fahrenheit, with the text on the outside of the gauge. We’re also specifying the color red for the gauge from the range of 85 degrees to 120 degrees. We can include as many range colors as we like, but for now we will just use this one color setting.

Now your whole Default.aspx page should look something like this:

And if you load your code up in the browser:

guage

That’s it for this first half of the tutorial, keep a lookout for the next half where we’ll teach you how to populate the temperature gauge with a real time weather API.