Wijmo UI for the Web
Customize Tooltip Animation
Wijmo User Guide > Widgets > Chart Widgets > BubbleChart > BubbleChart How To > Customize Tooltip Animation

Show All
Hide All
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 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.

  1. 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 or higher, 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>
    Or beginning with Wijmo v3 2013, you can use this code:

    Drop down and copy code for Wijmo v3 2013+

    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] }
        }]
    });
    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>
  2. No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
  3. 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

wijbubblechart API
axis Option
chartLabelFormatString Option
hint Option
legend Option
seriesList Option

Widgets

Quick Start

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page