google visualization line chart animation blank

Question

I have created a line chart with a 'select' event listener. When an item in the chart legend is clicked I alter the view of the chart.

I can get the data to change but I can't get the chart to animate.

The lines on the chart disappear for the animation 'duration' period and then new lines are drawn. When I remove the animation portion from the options map in the ChartWrapper the action of clearing the chart no longer takes place so it does seem to be registering my animation request.

I was wondering if anyone could give me some advice on how to trouble shoot these types of animation problems because I really have no idea what is going on.

I guess I'm kind of looking for the P.M.D.A.S.(mathematical order of operations) of google charts animation..

Code:

<html>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart', 'controls']});
function drawVisualization() {

    var chartData = new google.visualization.DataTable({
        'cols': [
            {'id': 'a', 'label': 'A','type': 'number', 'p': {'role': 'domain'}},
            {'id': 'a', 'label': 'A','type': 'number', 'p': {'role': 'data'}},
            {'id': 'a_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}},
            {'id': 'b', 'label': 'B','type': 'number', 'p': {'role': 'data'}},
            {'id': 'b_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}},
            {'id': 'c', 'label': 'C','type': 'number', 'p': {'role': 'data'}},
            {'id': 'c_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}}
        ],
        'rows':[
                {'c': [{'v': 0, 'f': 'date string'}, {'v': 1, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}]},
                {'c': [{'v': 1, 'f': 'date string'}, {'v': 2, 'f': null}, {'v': false, 'f': null}, {'v': 3, 'f': null}, {'v': true, 'f': null}, {'v': 4, 'f': null}, {'v': false, 'f': null}]},
                {'c': [{'v': 2, 'f': 'date string'}, {'v': 3, 'f': null}, {'v': true, 'f': null}, {'v': 2, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}]}
        ]
    });

    var score_chart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'score_chart',
        'dataTable': chartData,
        'options': {
            animation:{
                duration: 1000,
                easing: 'out'
                },
            curveType: "function"
        },
        view: {columns: [0,1,2]}
    });

    var score_check = google.visualization.events.addListener(score_chart, 'ready', function(){
        google.visualization.events.removeListener(score_check);
        var score_select = google.visualization.events.addListener(score_chart, 'select', function(){
        var selection = score_chart.getChart().getSelection();
        if (selection.length) {
            score_chart.setView({'columns': [0,3,4,5,6]});
            score_chart.draw();
        };
    });

    });
    score_chart.draw();
};
google.setOnLoadCallback(drawVisualization);

The lines disappearing could be due to a number of different issues, from data organization to API loading problems to bugs in the charts. If you could share the code that replicates the problem, I could take a look and help you figure out where the problem lies. — asgallant
thanks asgallant. I edited my question to include the code you asked for. The </script> tag and the </html> tag get cut off for some reason but they are in fact there. — Ryder Brooks

asgallant asgallant · Accepted Answer · 2014-03-25T15:32:19

The problem stems from your ID's. It seems that the charts have an undocumented behavior that tracks data series by column ID (if specified). Since your ID's for columns 1 and 3 are different, the chart removes the series with id "a" and adds two new series with id's "b" and "c". New series are not animated, which is why the animations appear broken. If you remove the ID's on columns 1, 3, and 5 (or give columns 1 and 3 the same ID) the chart will animate the way you expect it to:

var chartData = new google.visualization.DataTable({
    'cols': [
        {'id': 'a', 'label': 'A','type': 'number', 'p': {'role': 'domain'}},
        {'label': 'A','type': 'number', 'p': {'role': 'data'}},
        {'id': 'a_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}},
        {'label': 'B','type': 'number', 'p': {'role': 'data'}},
        {'id': 'b_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}},
        {'label': 'C','type': 'number', 'p': {'role': 'data'}},
        {'id': 'c_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}}
    ],
    'rows':[
        {'c': [{'v': 0, 'f': 'date string'}, {'v': 1, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}]},
        {'c': [{'v': 1, 'f': 'date string'}, {'v': 2, 'f': null}, {'v': false, 'f': null}, {'v': 3, 'f': null}, {'v': true, 'f': null}, {'v': 4, 'f': null}, {'v': false, 'f': null}]},
        {'c': [{'v': 2, 'f': 'date string'}, {'v': 3, 'f': null}, {'v': true, 'f': null}, {'v': 2, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}]}
    ]
});

See working example: http://jsfiddle.net/asgallant/b7W68/

google visualization line chart animation blank

1 Answers