Customize Tooltip Animation

Building on the Quick Start example, you can customize the animation of the hint that shows when you mouse over the bars in your chart.

There are now two methods for doing this. The newer method, available since Wijmo 2013, uses wijmo.ChartTooltip.animations.

Note: The default value for the hint option's animated attribute is "fade." To use any other, you must create a custom animation. You can set the hideAnimated and showAnimated attributes to use different animations, or set them to null so that they default to the value you assign to animated.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, or if you have Wijmo 2013, you can opt to use the one below. The code for either one does the following:

Creates a Raphaël tooltip animation or a Wijmo ChartTooltip animation called scale using the s transform from a size of zero. (See transform in chartLabelStyle for information on transform options.)
Sets the hint object's animated attribute to "scale."
Sets the hint object's hideAnimated and showAnimated attributes to null so that both mousing in and mousing out of a bar shows the scale animation.

Customize Tooltip Animation Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijbarchart").wijbarchart({ hint: { animated: "scale", hideAnimated: null, showAnimated: null }, seriesList: [{ label: "2012 Auto Sales ", legendEntry: false, data: { x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda'], y: [.05, .04, .21, .27, .1, .24] } }], }); Raphael.fn.tooltip.animations.scale = function (options) { context = options.context, bBox = context.wijGetBBox(), w = bBox.width, h = bBox.height; if (options.show) { scaleSet(context, options.duration, options.easing); } else { context.wijAnimate({"transform": "...s0"}, options.duration, options.easing); } } function scaleSet(set, duration, easing) { $.each(set, function (i, s) { if (s.type === "set") { scaleSet(s, duration, easing); } else { var transform = s.attr("transform"); s.wijAttr("transform", "...s0"); s.wijAnimate({"transform": transform}, duration, easing); } }); } }); </script>

Customize Tooltip Animation Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijbarchart").wijbarchart({
            hint: {
                animated: "scale",
                hideAnimated: null,
                showAnimated: null
            },
            seriesList: [{
                label: "2012 Auto Sales ",
                legendEntry: false,
                data: { 
                    x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda'], 
                    y: [.05, .04, .21, .27, .1, .24] 
                }
            }],
        });
        Raphael.fn.tooltip.animations.scale = function (options) {
            context = options.context,
            bBox = context.wijGetBBox(),
            w = bBox.width,
            h = bBox.height;
            if (options.show) {
                scaleSet(context, options.duration, options.easing);
            } else {
                context.wijAnimate({"transform": "...s0"}, 
                options.duration, 
                options.easing);
            }
        }
        function scaleSet(set, duration, easing) {
            $.each(set, function (i, s) {
                if (s.type === "set") {
                    scaleSet(s, duration, easing);
                } else {
                    var transform = s.attr("transform");
                    s.wijAttr("transform", "...s0");
                    s.wijAnimate({"transform": transform}, duration, easing);
                }
            });
        }
    });
</script>

Or beginning with Wijmo v3 2013, you can use this code:

Customize Tooltip Animation Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijbarchart").wijbarchart({ hint: { animated: "scale", hideAnimated: null, showAnimated: null }, seriesList: [{ label: "2012 Auto Sales ", legendEntry: false, data: { x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda'], y: [.05, .04, .21, .27, .1, .24] } }], }); wijmo.ChartTooltip.animations.scale = function (options) { context = options.context, bBox = context.wijGetBBox(), w = bBox.width, h = bBox.height; if (options.show) { scaleSet(context, options.duration, options.easing); } else { context.wijAnimate({ "transform": "...s0" }, options.duration, options.easing); } } function scaleSet(set, duration, easing) { $.each(set, function (i, s) { if (s.type === "set") { scaleSet(s, duration, easing); } else { var transform = s.attr("transform"); s.wijAttr("transform", "...s0"); s.wijAnimate({"transform": transform}, duration, easing); } }); } }); </script>

Customize Tooltip Animation Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijbarchart").wijbarchart({
            hint: {
                animated: "scale",
                hideAnimated: null,
                showAnimated: null
            },
            seriesList: [{
                label: "2012 Auto Sales ",
                legendEntry: false,
                data: { 
                    x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda'], 
                    y: [.05, .04, .21, .27, .1, .24] 
                }
            }],
        });
        wijmo.ChartTooltip.animations.scale = function (options) {
            context = options.context,
            bBox = context.wijGetBBox(),
            w = bBox.width,
            h = bBox.height;
            if (options.show) {
                scaleSet(context, options.duration, options.easing);
            } else {
                context.wijAnimate({ "transform": "...s0" }, options.duration, options.easing);
            }
        }
        function scaleSet(set, duration, easing) {
            $.each(set, function (i, s) {
                if (s.type === "set") {
                    scaleSet(s, duration, easing);
                } else {
                    var transform = s.attr("transform");
                    s.wijAttr("transform", "...s0");
                    s.wijAnimate({"transform": transform}, duration, easing);
                }
            });
        }
    });
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
Save your HTML file and open it in a browser. When you mouse over a bar in the chart, the hint appears by scaling up from a small point to full size, and reverses when you mouse out of the bars.

Reference

Widgets

BarChart Quick Start