Customize Tooltip Animation

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

There are now two methods for doing this. The older method uses Raphael.fn.tooltip.animations to extend animation behavior. The newer method, available only in 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 bubble shows the scale animation.

Drop down and copy code

Customize Tooltip Animation Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijbubblechart").wijbubblechart({ axis: { y: {text: "Number of Products"}, x: {text: "Sales", annoFormatString: "C0"} }, hint: { animated: "scale", hideAnimated: null, showAnimated: null }, legend: {visible: false}, seriesList: [ { label: "Company A Market Share", data: { y: [14], x: [12200], y1: [.15] } }, { label: "Company B Market Share", data: { y: [20], x: [60000], y1: [.23] } }, { label: "Company C Market Share", data: { y: [18], x: [24400], y1: [.1] } }] }); 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 () {
        $("#wijbubblechart").wijbubblechart({
            axis: {
                y: {text: "Number of Products"},
                x: {text: "Sales", annoFormatString: "C0"}
            },
            hint: {
                animated: "scale",
                hideAnimated: null,
                showAnimated: null
            },
            legend: {visible: false},
            seriesList: [
            {
                label: "Company A Market Share",
                data: { y: [14], x: [12200], y1: [.15] }
            }, {
                label: "Company B Market Share",
                data: { y: [20], x: [60000], y1: [.23] }
            }, {
                label: "Company C Market Share",
                data: { y: [18], x: [24400], y1: [.1] }
            }]
        });
        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:

Drop down and copy code for Wijmo v3 2013

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 bubble 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.

See Also

Reference

Widgets