Configuration animation

Specifies animation options.

Type: Object

To make your gauge "live", enable animation for it by setting the enabled option of the animation object to true. In this instance, the gauge indicators will appear in motion. In addition, within the animation object, you can set an appropriate easing mode using the easing option and specify how long the animation should run using the duration option.

Show Example:
jQuery

In this example, the animation | duration option is changed to 2000 ms. In addition, the animation easing mode is changed to 'linear' using the animation | easing option. Switch between the radio buttons to see how the gauge animation performs with these settings.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
<div id="controlsContainer" style="height:20px;width:300px;margin:0px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="radio" name="newValue" value="0"> 0
    <input type="radio" name="newValue" value="25" checked> 25
    <input type="radio" name="newValue" value="50"> 50
    <input type="radio" name="newValue" value="75"> 75
    <input type="radio" name="newValue" value="100"> 100
</div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'peachpuff' },
        valueIndicator: { color: 'palegoldenrod' },
        value: 32,
        animation: {
            easing: 'linear',
            duration: 2500
        }
    });

    $("input[name='newValue']").change(function () {
        var newValue = +$(this).val();
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.value(newValue);
    });
});

duration

Determines how long animation runs.

Type: Number
Default Value: 1000

When animation is enabled for a gauge, you can specify how long the animation must run. To do this, set the animation | duration option to a numeric value in milliseconds. The bigger the value, the slower the animation.

Show Example:
jQuery

In this example, the animation | duration option is changed to 2000 ms. Switch between the radio buttons to see how the gauge behaves with the specified animation duration.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
<div id="controlsContainer" style="height:20px;width:300px;margin:0px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="radio" name="newValue" value="0"> 0
    <input type="radio" name="newValue" value="25" checked> 25
    <input type="radio" name="newValue" value="50"> 50
    <input type="radio" name="newValue" value="75"> 75
    <input type="radio" name="newValue" value="100"> 100
</div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'peachpuff' },
        valueIndicator: { color: 'palegoldenrod' },
        value: 32,
        animation: {
            duration: 2000
        }
    });

    $("input[name='newValue']").change(function () {
        var newValue = +$(this).val();
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.value(newValue);
    });
});

easing

Specifies the animation easing mode.

Type: String
Default Value: 'easeOutCubic'
Accepted Values: 'easeOutCubic' | 'linear'

The animation easing mode specifies the speed at which the animation progresses at different points within the animation. The following values are available.

  • easeOutCubic
    The animation progresses according to the Ease-out cubic interpolation function - quickly at the beginning and slowly at the end of the animation process.
  • linear
    The animation progresses at a constant pace.
Show Example:
jQuery

In the following example, you can see the difference between the 'ease-out cubic' and 'linear' algorithms of performing animation. To change the animation mode, choose the corresponding value from the drop-down menu in the bottom of the example. The animation performs in the chosen mode after you change the main gauge value using the radio buttons below.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
<div id="selectContainer" style="height:40px;width:250px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Animation Mode:
    <select id="dropdownListSelector">
        <option value="easeOutCubic">easeOutCubic</option>
        <option value="linear">linear</option>
    </select><br />
    <input type="radio" name="newValue" value="0"> 0
    <input type="radio" name="newValue" value="25" checked> 25
    <input type="radio" name="newValue" value="50"> 50
    <input type="radio" name="newValue" value="75"> 75
    <input type="radio" name="newValue" value="100"> 100
</div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'peachpuff' },
        valueIndicator: { color: 'palegoldenrod' },
        value: 25,
        animation: {
            easing: 'easeOutCubic'
        }
    });

    $('#dropdownListSelector').change(function () {
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.option({
            animation: { easing: this.value }
        });
    });

    $("input[name='newValue']").change(function () {
        var newValue = +$(this).val();
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.value(newValue);
    });
});

enabled

Indicates whether or not animation is enabled.

Type: Boolean
Default Value: true

When this option is set to true, gauge indicators move smoothly to the specified values.

Show Example:
jQuery

Use the check box under the gauge to enable/disable animation. Then, choose a new value to be displayed on the gauge using the set of radio buttons.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
<div id="controlsContainer" style="height:40px;width:300px;margin:0px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="animationEnabledCheckbox" checked> Enable Animation<br />
    <input type="radio" name="newValue" value="0"> 0
    <input type="radio" name="newValue" value="25" checked> 25
    <input type="radio" name="newValue" value="50"> 50
    <input type="radio" name="newValue" value="75"> 75
    <input type="radio" name="newValue" value="100"> 100
</div>

$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'peachpuff' },
        valueIndicator: { color: 'palegoldenrod' },
        value: 25,
        animation: {
            enabled: true
        }
    });
    
    $('#animationEnabledCheckbox').change(function () {
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.option({
            animation: { enabled: this.checked }
        });
    });
    
    $("input[name='newValue']").change(function () {
        var newValue = +$(this).val();
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.value(newValue);
    });
});