seriesTransition Option

Creates the animation object to use when the seriesList data changes, allowing you to visually show changes in data for the same series.

Type: wijmo.chart.chart_animation object

Default value: {enabled:true, duration:400, easing: "easeInCubic"}

Syntax

Javascript (Usage)
Javascript (Specification)

$(function () {
    
    // Get value
    var returnsValue; // Type:  wijmo.chart.chart_animation
    returnsValue = $(".selector").wijbarchart("option", "seriesTransition");
    
    // Set value
    var newValue; // Type:  wijmo.chart.chart_animation
    $(".selector").wijbarchart("option", "seriesTransition", newValue);
        
});

var seriesTransition : chart_animation;

Example

This code creates a chart with random data that regenerates when you click the button created in the second code snippet below. Paste this code into the section of your HTML page, and the code below into the section, open the page in a browser, and click the button to see the seriesTransition animation. Notice that any series that happens to not change does not show the animation.

Javascript

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijbarchart").wijbarchart({
            seriesList: [createRandomSeriesList("2013")],
            seriesTransition:{ 
                duration: 800,
                easing: "easeOutBounce"
            }
        });
    });
    function reload() {
        $("#wijbarchart").wijbarchart("option", "seriesList", [createRandomSeriesList("2013")]);
    }
 
    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(Math.round(Math.random() * 100));
        }
        return {
            label: label,
            legendEntry: false,
            data: { x: labels, y: data }
        };
    }
</script>

Paste the following code into the section of your HTML page to create the chart and the button.

Javascript

<div id="wijbarchart" style="width: 500px; height: 250px; border: 2px solid grey"></div>
<input type="button" value="Reload Random Data" onclick="reload()" />

Remarks

To programmatically disable this animation, use code like the following:

seriesTransition: {enabled: false}

Note: This animation does not appear when you first load or reload the page--it only occurs when data changes.

Reference

options type
wijbarchart Method