Add Animation

You can add animation to the wijsparkline widget by setting duration and easing attribute of the animation option.

In Source View

Complete the following steps:

Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following reference within the <head></head> tags:

                        
    <!--RequireJs-->
    <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
    <script type="text/javascript">
        requirejs.config({
            baseUrl: "http://cdn.wijmo.com/amd-js/3.20143.59",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
        });
    </script>

Add the following script between the <head></head> tags to initialize the widget, add data and set the easing and duration attributes of the animation option.

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijsparkline"], function () {
        $(document).ready(function () {
            $("#wijsparkline").wijsparkline({
                animation: {
                    duration: 4000,
                    easing: "easeOutBounce"
                },
                data: [33, 11, 15, 26, 16, 27, 37, -13, 8, -8, -3, 17, 0, 22, -13, -29, 19, 8],
                type: "area"
            });
        });
    });
</script>

Add the following markup within the <body></body> tags of the page, just after @RenderBody() to create the wijsparkline widget.
```
<div id="wijsparkline" style="height:50px;width:200px" />
```
Press F5 to run the project.