Change the Animation

Building on the Quick Start example, you can change how the SparkLine draws onto the page using the duration, and easing attributes of the animation option. Alternatively, if you set the enabled attribute of the animation option to false, the SparkLine appears on the page like an image, all at once, with no animation.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the type to column, changes the animation duration to 4 seconds (twice the default time) and uses the easing option to make the columns bounce a few times as they finish drawing.

Script	Copy Code
<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: "column" }); }); }); </script>

Script

Copy Code

<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: "column"
    });
});
});
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the widget.
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below. Reload the frame to see the animation again.

Widgets

Concepts

Reference