Trouble Animating svgX of HighCharts Column Label

Question

BOUNTY UPDATE: I'm putting a bounty on this, so I wanted to give a little bit more information in case someone comes up with a different solution than modifying my code. The object is to animate the actual category position in HighCharts for bar and column charts. Animating the actual "bar/columns" seems to be built in to HighCharts, however, the label positions is what I'm having trouble with. See below for JSFiddle. Also, I know this question is dealing with SVG, but I need the animation support in IE8 as well.

I'm currently on a mission to animate the reorganization of categories in HighCharts for bar and column charts.

I have bar charts working fine, with the ability to reorganize categories and labels, with labels animating with the following code:

$(this).animate({'svgY': c.labelPositions[myX]}, {'duration': animDuration, 'queue': false});

Now I'm working on the columns, and I'm having significant trouble getting the labels to animate. The code is relatively the same:

$(this).animate({'svgX': c.labelPositions[myX]}, {'duration': animDuration, 'queue': false});

I'm using jQuery SVG to allow the animation of SVG elements, you can find it here.

You can view the jsFiddle I'm working on here. Just click the "Go" buttons under each chart to see them in action.

The actual "hack" to allow category animating is the Highcharts.Series.prototype.update = function(changes, callback){ function.

Just playing around trying to get something to work, I found that I could animate the svgY of the Column labels, but svgX just seems to not function at all.

Actual HighCharts.js hacks are welcome.

Answer 1

I took a look into your code and improved it a little bit. I did the following:

• Unified code for column/bar using single variable that stores the attribute we're going to update
• Removed jQuerySVG dependency, instead my code uses built-in Highcharts animate method
• Fixed some minor bugs

I tested this with IE7+/Chrome/Firefox, it works fine in all of them.

Here you can find my version of Highcharts.Series.prototype.update:

Highcharts.Series.prototype.update = function (changes, callback) {
    var series = this,
        chart = this.chart,
        options = chart.options,
        axis = chart.xAxis[0],
        ticks = axis.ticks,
        type = chart.options.chart.type,
        animDuration = 400,
        attr = type === 'bar' ? 'y' : 'x',
        animOpt = {},
        text;

    if (options.chart.animation && options.chart.animation.duration) {
        animDuration = options.chart.animation.duration;
    }

    if (type == "bar" || type == "column") {

        if (typeof chart.labelPositions === "undefined") {
            chart.labelPositions = [];

            $.each(ticks, function () {   
                chart.labelPositions.push(this.label[attr]);
            });
        }


        for (var category in changes) {

            for (var i = 0; i < series.points.length; i++) {

                if (typeof series.points[i].originalCategory === "undefined") {
                    series.points[i].originalCategory = series.points[i].category;
                }

                if (series.points[i].originalCategory == category) {

                    $.each(ticks, function () {
                        text = this.label.text || this.label.element.innerHTML; // use innerHTML for oldIE
                        if (text == category) {
                            var myX = (typeof changes[category].x !== "undefined") ? changes[category].x : series.points[i].x;
                            series.points[i].update(changes[category], false, {
                                duration: animDuration
                            });

                            animOpt[attr] = parseInt(chart.labelPositions[myX]);

                            // This is the line that animates the bar chart labels.
                            this.label.animate(animOpt, {
                                'duration': animDuration,
                                'queue': false
                            });

                            return false;
                        }
                    });
                }
            }
        }

        chart.redraw();

        if (typeof callback !== "undefined") {
            setTimeout(function () { callback(); }, animDuration);
        }
    }
}

Check out the demo: http://jsfiddle.net/evq5s/17