Interaction and Animation

Interaction

Circular Gauge control contains Interaction feature. You can use this interaction feature to change the pointer values manually. You can achieve this by clicking and dragging the pointer over the Gauge and you can see the value of pointer changes dynamically while dragging. To Enable/Disable the user interaction you can use the Boolean property called readOnly. The user interaction option is enabled when you set the value as false for the property readOnly.By default it holds the true value.That is by default it does not support interaction.

  • html
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="CircularGaugeApp">
        <head>
            <title>Essential Studio for AngularJS: CircularGauge</title>
            <!--CSS and Script file References -->
        </head>
        <body ng-controller="CircularGaugeCtrl">
            <div id="circularframe">
                    <ej-circulargauge e-readonly="false"> 
                    </ej-circulargauge>
            </div>
            <script>
            angular.module('CircularGaugeApp', ['ejangular'])
            .controller('CircularGaugeCtrl', function ($scope) {
             });
        </script>
        </body>
    </html>

    Execute the above code to render the following output.

    Animations

    Circular Gauge contains an attractive concept called Animation. The animation option enables the pointer to rotate from the minimum value to the current value with animation effects. By using this animation you can change the pointer value dynamically.You can apply the animation on pointer either by clockwise or counterclockwise based on the scale direction. You can enable / disable it using the property enableAnimation. Animation is enabled when you set enableAnimation as ‘true’. By default it holds the true value. You can control the speed of the pointer during animating by using the property animationSpeed. It is a numerical value that holds the time in milliseconds. That is when the value is given as 1000, it is considered as 1 second.

  • html
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="CircularGaugeApp">
        <head>
            <title>Essential Studio for AngularJS: CircularGauge</title>
            <!--CSS and Script file References -->
        </head>
        <body ng-controller="CircularGaugeCtrl">
            <div id="circularframe">
                    <ej-circulargauge e-enableanimation="true" e-animationspeed="1000"> 
                    </ej-circulargauge>
            </div>
            <script>
            angular.module('CircularGaugeApp', ['ejangular'])
            .controller('CircularGaugeCtrl', function ($scope) {
             });
        </script>
        </body>
    </html>

    Execute the above code to render the following output.

    ## Gradient

    You can change the interior gradient of Circular Gauge by using InteriorGradient property. The IsRadialGradient property is used to check whether the gradient is circular or not.

  • html
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="CircularGaugeApp">
        <head>
            <title>Essential Studio for AngularJS: CircularGauge</title>
            <!--CSS and Script file References -->
        </head>
        <body ng-controller="CircularGaugeCtrl">
            <div id="circularframe">
                    <ej-circulargauge e-isRadialGradient="true"> 
                        //..
                        //..
                    </ej-circulargauge>
            </div>
            <script>
            angular.module('CircularGaugeApp', ['ejangular'])
            .controller('CircularGaugeCtrl', function ($scope) {
             });
        </script>
        </body>
    </html>

    Distance From Corner

    You can display the circular gauge from distance apart from the corner by specifying value for DistanceFromCorner property.

  • html
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="CircularGaugeApp">
        <head>
            <title>Essential Studio for AngularJS: CircularGauge</title>
            <!--CSS and Script file References -->
        </head>
        <body ng-controller="CircularGaugeCtrl">
            <div id="circularframe">
                    <ej-circulargauge e-isDistanceFromCorner="true"> 
                    </ej-circulargauge>
            </div>
            <script>
            angular.module('CircularGaugeApp', ['ejangular'])
            .controller('CircularGaugeCtrl', function ($scope) {
             });
        </script>
        </body>
    </html>

    Resize

    Circular gauge can be responsive while resizing by specifying EnableResize property as true.

  • html
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="CircularGaugeApp">
        <head>
            <title>Essential Studio for AngularJS: CircularGauge</title>
            <!--CSS and Script file References -->
        </head>
        <body ng-controller="CircularGaugeCtrl">
            <div id="circularframe">
                    <ej-circulargauge e-enableResize="true"> 
                    </ej-circulargauge>
            </div>
            <script>
            angular.module('CircularGaugeApp', ['ejangular'])
            .controller('CircularGaugeCtrl', function ($scope) {
             });
        </script>
        </body>
    </html>

    Localization

    The circular gauge can be localized based on name of culture specified in Locale property.

  • html
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="CircularGaugeApp">
        <head>
            <title>Essential Studio for AngularJS: CircularGauge</title>
            <!--CSS and Script file References -->
        </head>
        <body ng-controller="CircularGaugeCtrl">
            <div id="circularframe">
                    <ej-circulargauge e-locale="en-US"> 
                    </ej-circulargauge>
            </div>
            <script>
            angular.module('CircularGaugeApp', ['ejangular'])
            .controller('CircularGaugeCtrl', function ($scope) {
             });
        </script>
        </body>
    </html>

    Themes

    CircularGauge Theme is a set of pre-defined options that are applied to the control before CircularGauge is instantiated. Following predefined themes are available in JavaScript CircularGauge.

    1. flat-light
    2. flat-dark
    3. gradient-light
    4. gradient-dark
    5. azure
    6. azure-dark
    7. lime
    8. lime-dark
    9. saffron
    10. saffron-dark
    11. gradient-azure
    12. gradient-azure-dark
    13. gradient-lime
    14. gradient-lime-dark
    15. gradient-saffron
    16. gradient-saffron-dark

    The theme for circular gauge can be specified using Theme property.

  • html
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="CircularGaugeApp">
        <head>
            <title>Essential Studio for AngularJS: CircularGauge</title>
            <!--CSS and Script file References -->
        </head>
        <body ng-controller="CircularGaugeCtrl">
            <div id="circularframe">
                    <ej-circulargauge e-theme="saffron"> 
                    </ej-circulargauge>
            </div>
            <script>
            angular.module('CircularGaugeApp', ['ejangular'])
            .controller('CircularGaugeCtrl', function ($scope) {
             });
        </script>
        </body>
    </html>

    Circular Gauge Values

    The Minimum, Maximum, Radius and Value attributes of circular gauge are used to render the circular gauge with specified location.

  • html
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="CircularGaugeApp">
        <head>
            <title>Essential Studio for AngularJS: CircularGauge</title>
            <!--CSS and Script file References -->
        </head>
        <body ng-controller="CircularGaugeCtrl">
            <div id="circularframe">
                    <ej-circulargauge e-maximum="120" e-minimum="10" e-value="30" e-radius="100"> 
                    </ej-circulargauge>
            </div>
            <script>
            angular.module('CircularGaugeApp', ['ejangular'])
            .controller('CircularGaugeCtrl', function ($scope) {
             });
        </script>
        </body>
    </html>