CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
OneMoreVladimir
OneMoreVladimir

Reputation: 1673

On load Google LineChart animation

I'm trying to implement loading animation of chart using transition animations by adding rows and refreshing the chart. But it behaves completely differently from what I expect. Here is the Fiddle http://jsfiddle.net/jATUX/ Some code:

google.load('visualization', '1', { packages: ['corechart'], callback: function() {
        var data = new google.visualization.DataTable();
        data.addRows(5);

        data.addColumn('string', '');
        data.addColumn('number', 'Sales');

        var options = {
            title: 'Sales by months for 2013 year', curveType: 'function',
            "vAxis": { "minValue": "0" }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5",
            animation: { duration: 1000 }
        };
        var chart = new google.visualization.LineChart(document.getElementById('test'));

        var index = 0;
        var chartData = [
            ['Jan', 5 ], ['Feb', 1], ['Mar', 4], ['Apr', 2], ['May', 3]
        ]
        var drawChart = function() {
            console.log('drawChart index ' + index);
            if (index < chartData.length) {
                data.addRows([chartData[index++]]);
                chart.draw(data, options);
            }
        }

        google.visualization.events.addListener(chart, 'ready', drawChart);
        chart.draw(data, options);
    }});

Upvotes: 2

Views: 7624

Answers (1)

OneMoreVladimir
OneMoreVladimir

Reputation: 1673

Ok, I've managed to solve that. It's all a matter of using 'animationfinish' That now looks like http://jsfiddle.net/HDu8H/ or

google.load('visualization', '1', { packages: ['corechart'], callback: function() {
        var data = new google.visualization.DataTable();
        data.addRows(5);

        data.addColumn('string', '');
        data.addColumn('number', 'Sales');
        data.addRows(5);
        data.setValue(0, 0, 'Jan');
        data.setValue(1, 0, 'Feb');
        data.setValue(2, 0, 'Mar');
        data.setValue(3, 0, 'Apr');
        data.setValue(4, 0, 'May');

        var options = {
            title: 'Sales by months for 2013 year', curveType: 'function',
            "vAxis": { "minValue": "0", "maxValue": 6 }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5",
            animation: { duration: 250 }
        };
        var chart = new google.visualization.LineChart(document.getElementById('test'));

        var index = 0;
        var chartData = [ 5, 1, 4, 2, 3 ]
        var drawChart = function() {
            console.log('drawChart index ' + index);
            if (index < chartData.length) {
                data.setValue(index, 1, chartData[index++]);
                chart.draw(data, options);
            }
        }

        google.visualization.events.addListener(chart, 'animationfinish', drawChart);
        chart.draw(data, options);
        drawChart();
    }});

Upvotes: 6

Related Questions