Apply Animation Effects

When the ChartAnimation.Enabled option is true you can apply animation effects to the bar chart series. You can enhance your bar chart’s appeal by adding transition effects between the sliding or fading animated states to create a seamless flow between these states. Instead of the Bar chart series moving along smoothly from left to right while loading, the bar chart could bounce in as the series slides in and bounce out as the series slides out. By default the ChartAnimation.Easing option is set to EaseLinear and when you reload the bar chart each series loads with a smooth linear transition effect.

The following transitions effects are available for you to animate the transition between states so it looks smooth to help keep the user oriented while you loading the bar chart series:

Transition Name	Transition Description
EaseInBack	Back easing in. Begins slowly and then accelerates.
EaseInCubic	Cubic easing in. Begins at zero velocity and then accelerates.
EaseInOutCubic	Cubic easing in and out. Begins at zero velocity, accelerates until halfway, and then decelerates to zero velocity again.
EaseOutBack	Back easing out. Begins quickly and then decelerates.
EaseOutBounce	Bouncing easing out. Begins quickly and then decelerates. The number of bounces is related to the duration: longer durations produce more bounces.
EaseOutCubic	Cubic easing in and out. Begins at full velocity and then decelerates to zero.
EaseOutElastic	Quintic easing out. Begins at full velocity and then decelerates to zero.

You can set the length of C1BarChart’s animation effect takes using the ChartAnimation.Duration option. The unit of time used for specifying animation effect duration is in milliseconds, and the default setting for the Duration property is 500 milliseconds (or half a second). Increase this value for longer animation effect, and decrease this number for a shorter animation effect.

The following link shows how to use the various animation effects on the C1BarChart:

Animation Sample Code

<script id="scriptInit" type="text/javascript">
     $(document).ready(function () {
         $("#wijbarchart").wijbarchart({
             axis: {
                 y: {
                     text: "Number of Hits",
                     autoMax: false,
                     max: 100,
                     autoMin: false,
                     min: 0
                 },
                 x: {
                     text: "Month of the Year"
                 }
             },
             hint: {
                 content: function () {
                     return this.data.label + '<br/> ' + this.y + '';
                 }
             },
             stacked: true,
             clusterRadius: 5,
             seriesList: [createRandomSeriesList("2010")]
         });
     });
     function changeProperties() {
         var animation = {};
         enabled = $("#chkEnabled").is(":checked"),
                        duration = $("#inpDuration").val(),
                        easing = $("#selEasing").val();
         animation.enabled = enabled;
         if (duration && duration.length) {
             animation.duration = parseFloat(duration);
         }
         animation.easing = easing;
         $("#wijbarchart").wijbarchart("option", "animation", animation);
     }
     function reload() {
         $("#wijbarchart").wijbarchart("option", "seriesList", [createRandomSeriesList("2010")]);
     }
     function createRandomSeriesList(label) {
         var data = [],
                        randomDataValuesCount = 12,
                        labels = ["January", "February", "March", "April", "May", "June",
                              "July", "August", "September", "October", "November", "December"],
                        idx;
         for (idx = 0; idx < randomDataValuesCount; idx++) {
             data.push(createRandomValue());
         }
         return {
             label: label,
             legendEntry: false,
             data: { x: labels, y: data }
         };
     }
     function createRandomValue() {
         var val = Math.round(Math.random() * 100);
         return val;
     }
    </script>
}
<h2>
    Animation</h2>
<div class="main demo">
    <!-- Begin demo markup -->
    <input type="button" value="reload" onclick="reload()" />
    <div id="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 600px;
        height: 475px">
    </div>
    <!-- End demo markup -->
    <div class="demo-options">
        <!-- Begin options markup -->
        <div>
            <label for="chkEnabled">
                Animation Settings: Enabled
            </label>
            <input id="chkEnabled" type="checkbox" checked="checked" />
            <label for="inpDuration">
                Duration
            </label>
            <input id="inpDuration" type="text" value="1000" />
            <label for="selEasing">
                Easing
            </label>
            <select id="selEasing">
                <option value=">">></option>
                <option value="<"><</option>
                <option value="<>"><></option>
                <option value="backIn">backIn</option>
                <option value="backOut">backOut</option>
                <option value="bounce">bounce</option>
                <option value="elastic">elastic</option>
            </select>
            <input type="button" value="Apply" onclick="changeProperties()" />
        </div>
        <!-- End options markup -->
    </div>
</div>