CODEWITHSUNDEEP
javascriptanimationchartsgoogle-visualization
Ryder Brooks
Ryder Brooks

Reputation: 2119

google visualization line chart animation blank

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);

Upvotes: 0

Views: 582

Answers (1)

asgallant
asgallant

Reputation: 26340

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/

Upvotes: 1

Related Questions