Atul Rajput
Atul Rajput

Reputation: 4178

Google Chart Animation not working with Stacked chart

I am trying to apply animation on google chart on first load, its working with normal bar chart but when I am making it stacked, Animation not working. Please help me out Tried almost every option from documentation but nothing is helping out. there is no error in console.

google.charts.load('current', { 'packages': ['bar'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Months', 'EL', 'CL'],
            ['Jan', 2, 4],
            ['Feb', 1, 4],
            ['Mar', 6, 1],
            ['Apr', 3, 5],
            ['May', 1, 4],
            ['Jun', 3, 4],
            ['Jul', 2, 5],
            ['Aug', 2, 4],
            ['Sep', 1, 4],
            ['Oct', 6, 1],
            ['Dec', 1, 4]
        ]);

        var options = {
            chart: {
                title: 'Leave Info',
                subtitle: 'Total EL and CL consumed in a year',
            },
            bars: 'vertical',
            height: 300,
            width: 500,
            animation:{
                startup: 'true',
                duration: 1000,
                easing: 'out'

            },
            bar: {groupWidth: "40%"},
            isStacked: true,
            series: {
                0: { color: 'red' },
                1: { color: '#999' }
            }
        };

        var chart = new google.charts.Bar(document.getElementById('chart_div'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
    }
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Views: 91

Answers (1)

Atul Rajput
Atul Rajput

Reputation: 4178

With the great help by White-hat from comments above, I am able to get this result, Thought of posting it here if anyone else need the help

google.charts.load('current', {
        callback: function() {
            drawChart();
            window.addEventListener('resize', drawChart, false);
        },
        packages: ['corechart']
    });

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Months', 'EL', 'CL'],
            ['Jan', 2, 4],
            ['Feb', 1, 4],
            ['Mar', 6, 1],
            ['Apr', 3, 5],
            ['May', 1, 4],
            ['Jun', 3, 4],
            ['Jul', 2, 5],
            ['Aug', 2, 4],
            ['Sep', 1, 4],
            ['Oct', 6, 1],
            ['Dec', 1, 4]
        ]);

        var options = {
            animation: {
                duration: 1000,
                easing: 'linear',
                startup: true
            },
            isStacked: true,
            height: 600,
            theme: 'material',
            title: 'Company Performance'
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions