bubble chart fades between datasets instead of animating

[Chris Randall]

Like the title says, I have my chart set up so that when you press a button it will animate through a series of datasets. The problem is that instead instead of the bubbles moving from one position to the next, they just fade out and then fade back in at the updated positions. Anyone know what's going on? I'm following the "Value Changes' example in the animation docs and it says bubble charts are supported.


Here's the code:

function drawGoogleBubbleChart(parentID, width, height, json) {

    var bcd = JSON.parse(json);

    var bubbles = bcd.Bubbles;

    var bubbleSeriesData = bcd.BubbleSeriesList;

    var keyframeData = bcd.Keyframes;

    var minX = 0;

    var minY = 0;

    var maxX = 0;

    var maxY = 0;

    var keyframeIndex = 0;

    var keyframes = [];

    var data = [];

    for (var k = 0; k < keyframeData.length; ++k) {

        var frame = [];

        frame.push(['Label', 'x', 'y', 'Type', 'Count']);

        var colors = [];

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

            var row = [];

            var index = bubbles[i].BubbleSeriesIndex;

            if (bubbles[i].KeyframeIndex == k) {

                maxX = bubbles[i].XValue > maxX ? bubbles[i].XValue : maxX;

                maxY = bubbles[i].YValue > maxY ? bubbles[i].YValue : maxY;

                row.push(bubbles[i].Label);

                row.push(bubbles[i].XValue);

                row.push(bubbles[i].YValue);

                row.push(bubbleSeriesData[index].Title);

                row.push(bubbles[i].Amount);

            } else {

                row.push("");

                row.push(0);

                row.push(0);

                row.push("");

                row.push(0);

            }

            colors.push(rgbToHex(bubbleSeriesData[index].Color.R, bubbleSeriesData[index].Color.G, bubbleSeriesData[index].Color.B));

            frame.push(row);

        }

        keyframes.push({

            Frame: frame,

            Colors: colors

        });

        data.push(google.visualization.arrayToDataTable(frame));

    }

    var xTitle = bcd.XAxis != null ? bcd.XAxis.Title : "";

    var yTitle = bcd.YAxis != null ? bcd.YAxis.Title : "";

    var options = {

        animation: {

            duration: 500,

            easing: 'out'

        },

        bubble: {

            textStyle: {

                color: 'none'

            }

        },

        hAxis: {

            title: xTitle,

            minValue: minX, 

            maxValue: maxX + (maxX * .05)

        },

        vAxis: {

            title: yTitle,

            minValue: minY,

            maxValue: maxY + (maxY * .05)

        },

        width: width,

        height: height,

        colors: keyframes[keyframeIndex].Colors

    };

    var chart = new google.visualization.BubbleChart(document.getElementById(parentID));

    var button = document.getElementById('PlayBubbleButton');

    chart.draw(data[keyframeIndex++], options);

    button.onclick = function () {

        if (keyframeIndex < keyframes.length) {

            options.colors = keyframes[keyframeIndex].Colors;

            chart.draw(data[keyframeIndex++], options);

        }

    }

}

[Daniel LaLiberte]

The animation code has to determine how to do the animation based on what appears to be the same item from one frame to the next.  For the BubbleChart, it uses the first column of ids.  If it doesn't animate between items with the same ids, then that would be a bug.  Could you give us a sample of the data you are using?

Here is an example of using animation with BubbleChart.  https://jsfiddle.net/dlaliberte/zxdq62nL/

Notice, by the way, that the gridlines fail to be recomputed each time it redraws.  That is a bug. 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/05572022-7546-461e-91a2-8a5fbcd44f41%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Chris Randall]

Hey Daniel,

The problem was my data, I was using the Label of each bubble as the first column and that was changing between data sets.

Thanks for the response!