Adding igRadialGauge

Purpose

This topic demonstrates how to add the igRadialGauge™ control to a web page and bind it to data.

Required background

The following lists the materials required as a prerequisite to understanding this topic.

jQuery, jQuery UI

Topics

Ignite UI for jQuery Overview: General information on the Ignite UI for jQuery™ library.
Using JavaScript Resources in Ignite UI for jQuery: This topic provides general guidance on adding required JavaScript resources to use controls from the Ignite UI for jQuery library.
igRadialGauge Overview: This topic provides conceptual information about the igRadialGauge control including its main features, minimum requirements for using charts and user functionality.

In this topic

This topic contains the following sections:

Add Radial Gauge to a Web Page

Introduction

This procedure guides you through the process of adding a radial gauge control to a web page.

Preview

The following screenshot is a preview of the final result.

Overview

This topic takes you step-by-step toward adding a radial gauge to a web page The following is a conceptual overview of the process:

Adding references to the required resources
- Overview
- Referencing resources in JavaScript using the igLoader
- Referencing resources manually
Add HTML markup required by the igRadialGauge
Instantiate the radial gauge
(Optional) Verifying the result

Steps

The following steps demonstrate how to add an igRadialGauge control to a web page.

Add references to the required resources.

Overview

Reference the required resources. Referencing resources includes:
- Adding the jQuery, jQueryUI and Modernizr JavaScript resources to a folder named Scripts in your web site or web application.
- Adding the Ignite UI for jQuery CSS files to a folder named Content/ig in your web site or web application (see the Styling and Theming in Ignite UI for jQuery topic for details).
- Adding the Ignite UI for jQuery JavaScript files to a folder named Scripts/ig in your web site or web application (see the Using JavaScript Resources in Ignite UI for jQuery topic for details).
  
  The resources can be added either manually or using loaders (recommended).
  
  Referencing resources in JavaScript using the igLoader
  
  The igLoader™ control is the recommended way to load JavaScript and CSS resources required by the Ignite UI for jQuery library controls. First the igLoader script must be included in the page:
  
  In HTML:
```
<script  type="text/javascript" src="Content/ig/infragistics.loader.js"></script>
```
  For HTML views the igLoader must be instantiated this way:
  
  In HTML:
```
<script type="text/javascript">
$.ig.loader({
    scriptPath: "Scripts/ig/",
    cssPath: "Content/ig/",
    resources: "igRadialGauge"
});
<script>
```
  The resources option specifies that the igRadialGauge control will be rendered.
Add HTML markup required by the igRadialGauge.

HTML example

Add the div elements for the radial gauge which will be referred in the gauge instantiation code.

In HTML:
```
 <div id="gauge" class="gaugeContainer"></div>
```
Instantiate the radial gauge.

HTML example

For the gauge div tags to be wrapped and the gauge drawn, the igRadialGauge control must be instantiated and its main options set. Add the code below to the existing code in the <script> tag used above for data array definition:

In Javascript:
```
 $(function () {
     $("#gauge").igRadialGauge({
         width: "450px",
         height: "450px"
     });
 });
```
(Optional) Verify the result.

To verify the result, save the page and view the final result in a web browser. The radial gauge should render as shown in the Preview.

Ignite UI | Help Topics