Available in the Full Version

Radial Gauge - Overview

The igRadialGauge control can display a gauge with visual elements including a scale with tick marks and labels, a needle, and a number of ranges.

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Create a scale by supplying minimumValue and maximumValue values and a needle can point to a value by setting the value property. The gauge also supports ranges, which provide visual cues for the scale. See the complete list of samples in the menu.

Code View

Show In JsFiddle

Copy to Clipboard

                    $("#radialgauge").igRadialGauge({
    height: "500px",
    width: "100%",
    maximumValue: 100,
    isNeedleDraggingEnabled: true
});

                    <!-- Target element for the igRadialGauge -->
<div id="radialgauge"></div>

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>

</head>
<body>

    <!-- Target element for the igRadialGauge -->
    <div id="radialgauge"></div>

    <script>

        $(function () {
            $("#radialgauge").igRadialGauge({
                height: "500px",
                width: "100%",
                maximumValue: 100,
                isNeedleDraggingEnabled: true
            });
        });

    </script>
</body>
</html>

             
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>

    <my-app>Loading...</my-app>

    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
    <script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.dv.js"></script>
    <script>
        System.config( {
            paths: {
                'npm:': 'https://unpkg.com/'
            },
            map: {
                '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
                '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
                '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
                'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
                'rxjs': 'npm:rxjs'
            },
            // packages tells the System loader how to load when no filename and/or no extension
            packages: {
                rxjs: {
                    defaultExtension: 'js'
                },
                'igniteui-angular-wrappers': {
                    main: './index.js',
                    defaultExtension: 'js'
                }
            },
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true }
        } );

        System.import( 'drag-needle.ts' ).then( null, console.error.bind( console ) );
    </script>
</body>
</html>

             
import { Component, NgModule } from '@angular/core';
import { IgRadialGaugeComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

declare var jQuery: any;

@Component({
    selector: 'my-app',
    template: `<ig-radial-gauge widgetId="radialgauge" [(options)]="config"></ig-radial-gauge>`
})
export class AppComponent {
    
    public config = {
        height: "500px",
        width: "100%",
        maximumValue: 100,
        isNeedleDraggingEnabled: true
    };
}

@NgModule({
    bootstraps: [AppComponent],
    declarations: [AppComponent, IgRadialGaugeComponent],
    imports: [BrowserModule]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

             
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- ReactJS library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.dv.js"></script>
    <!-- Ignite UI for jQuery ReactJS Files -->
    <script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
    <div id="app">
        <script type="text/babel">

            let App = React.createClass({
                
                render: function() {
                    let config = {
                        height: "500px",
                        width: "100%",
                        maximumValue: 100,
                        isNeedleDraggingEnabled: true
                    };
                    
                    return (
                        <IgRadialGauge id="radialgauge" options={config} />
                    );
                };
            });


            ReactDOM.render(
                <App />,
                document.getElementById('app')
            );
        </script>
    </div>
</body>
</html>

Ignite UI for jQuery | Samples

Search Results

Radial Gauge - Overview

Code View