<div>
    <div class="copy">
        <h3>ChartAnimation for FlexChart</h3>
        <div class="alert alert-info" role="alert"><b>Important!</b> This feature requires the <a href="http://wijmo.com/5/docs/topic/wijmo.chart.animation.Module.html">wijmo.chart.animation</a> extension module.</div>
        <p>
            This view shows ChartAnimation for FlexChart.
        </p>
        <p>
            You can use different animation modes for FlexChart by setting the <b>animationMode</b> property of the ChartAnimation.
        </p>
        <p>
            The ChartAnimation class has a <b>duration</b> property that allows you to set
            the number of periods for animation.
        </p>
    </div>
    <div>
        <div class="container-fluid well">
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <wj-menu id="chartType" value="ctx.chartType" header="chart type">
                        <wj-menu-item value="'Bar'">Bar</wj-menu-item>
                        <wj-menu-item value="'Column'">Column</wj-menu-item>
                        <wj-menu-item value="'Area'">Area</wj-menu-item>
                        <wj-menu-item value="'Line'">Line</wj-menu-item>
                        <wj-menu-item value="'LineSymbols'">LineSymbols</wj-menu-item>
                        <wj-menu-item value="'Spline'">Spline</wj-menu-item>
                        <wj-menu-item value="'SplineSymbols'">SplineSymbols</wj-menu-item>
                        <wj-menu-item value="'SplineArea'">SplineArea</wj-menu-item>
                        <wj-menu-item value="'Scatter'">Scatter</wj-menu-item>
                    </wj-menu>
                    <wj-menu id="animationMode" value="ctx.animationMode" header="animationMode">
                        <wj-menu-item value="'Point'">Point</wj-menu-item>
                        <wj-menu-item value="'Series'">Series</wj-menu-item>
                        <wj-menu-item value="'All'">All</wj-menu-item>
                    </wj-menu>
                    <wj-menu id="chartEasing" value="ctx.easing" header="Easing">
                        <wj-menu-item value="'Linear'">Linear</wj-menu-item>
                        <wj-menu-item value="'Swing'">Swing</wj-menu-item>
                        <wj-menu-item value="'EaseInQuad'">EaseInQuad</wj-menu-item>
                        <wj-menu-item value="'EaseOutQuad'">EaseOutQuad</wj-menu-item>
                        <wj-menu-item value="'EaseInOutQuad'">EaseInOutQuad</wj-menu-item>
                        <wj-menu-item value="'EaseInCubic'">EaseInCubic</wj-menu-item>
                        <wj-menu-item value="'EaseOutCubic'">EaseOutCubic</wj-menu-item>
                        <wj-menu-item value="'EaseInOutCubic'">EaseInOutCubic</wj-menu-item>
                        <wj-menu-item value="'EaseInQuart'">EaseInQuart</wj-menu-item>
                        <wj-menu-item value="'EaseOutQuart'">EaseOutQuart</wj-menu-item>
                        <wj-menu-item value="'EaseInOutQuart'">EaseInOutQuart</wj-menu-item>
                        <wj-menu-item value="'EaseInQuint'">EaseInQuint</wj-menu-item>
                        <wj-menu-item value="'EaseOutQuint'">EaseOutQuint</wj-menu-item>
                        <wj-menu-item value="'EaseInOutQuint'">EaseInOutQuint</wj-menu-item>
                        <wj-menu-item value="'EaseInSine'">EaseInSine</wj-menu-item>
                        <wj-menu-item value="'EaseOutSine'">EaseOutSine</wj-menu-item>
                        <wj-menu-item value="'EaseInOutSine'">EaseInOutSine</wj-menu-item>
                        <wj-menu-item value="'EaseInExpo'">EaseInExpo</wj-menu-item>
                        <wj-menu-item value="'EaseOutExpo'">EaseOutExpo</wj-menu-item>
                        <wj-menu-item value="'EaseInOutExpo'">EaseInOutExpo</wj-menu-item>
                        <wj-menu-item value="'EaseInCirc'">EaseInCirc</wj-menu-item>
                        <wj-menu-item value="'EaseOutCirc'">EaseOutCirc</wj-menu-item>
                        <wj-menu-item value="'EaseInOutCirc'">EaseInOutCirc</wj-menu-item>
                        <wj-menu-item value="'EaseInBack'">EaseInBack</wj-menu-item>
                        <wj-menu-item value="'EaseOutBack'">EaseOutBack</wj-menu-item>
                        <wj-menu-item value="'EaseInOutBack'">EaseInOutBack</wj-menu-item>
                        <wj-menu-item value="'EaseInBounce'">EaseInBounce</wj-menu-item>
                        <wj-menu-item value="'EaseOutBounce'">EaseOutBounce</wj-menu-item>
                        <wj-menu-item value="'EaseInOutBounce'">EaseInOutBounce</wj-menu-item>
                        <wj-menu-item value="'EaseInElastic'">EaseInElastic</wj-menu-item>
                        <wj-menu-item value="'EaseOutElastic'">EaseOutElastic</wj-menu-item>
                        <wj-menu-item value="'EaseInOutElastic'">EaseInOutElastic</wj-menu-item>
                    </wj-menu>
                    <label id="labelDuration" for="duration">Duration:</label>
                    <wj-input-number control="inputDuration" id="chartDuration" value="duration" min="200" max="5000" step="200" format="n0"> </wj-input-number>
                </div>
            </div>
            <div class="row" style="margin-top: 5px;">
                <div class="col-sm-12 col-xs-12 flexchart">
                    <button type="button" class="btn btn-default" ng-click="resetChartData()">reset data</button>
                    <wj-menu id="add" header="Add" item-clicked="itemAdd(s)">
                        <wj-menu-item>Add Series</wj-menu-item>
                        <wj-menu-item>Add First Point</wj-menu-item>
                        <wj-menu-item>Add Last Point</wj-menu-item>
                    </wj-menu>
                    <wj-menu id="remove" header="Remove" item-clicked="itemRemove(s)">
                        <wj-menu-item>Remove Series</wj-menu-item>
                        <wj-menu-item>Remove First Point</wj-menu-item>
                        <wj-menu-item>Remove Last Point</wj-menu-item>
                    </wj-menu>
                </div>
            </div>
        </div>
        <wj-flex-chart control="ctx.flexChart"
                       items-source="data"
                       chart-type="{{ctx.chartType}}"
                       binding-x="x">
            <wj-flex-chart-series binding="y"></wj-flex-chart-series>
            <wj-flex-chart-series binding="y1"></wj-flex-chart-series>
            <wj-flex-chart-series binding="y2"></wj-flex-chart-series>
            <wj-flex-chart-animation animation-mode="{{ctx.animationMode}}" easing="{{ctx.easing}}" duration="{{ctx.duration}}"></wj-flex-chart-animation>
        </wj-flex-chart>
    </div>
</div>
