It is possible to put an Animation in the Chart pie

Asked

Viewed 110 times

1

Is it possible to use some Animation in google’s pie-Chart? I put it like this, but it’s not working:

var options = {
            title: 'Tickets por prazo',
            series: {
                0: {"color": '#57c8f2'},
                1: {"color": '#ff6c60'}
            },
            animation:{
                duration: 1500,
                startup: true
            }
        };

If you can help, thank you.

1 answer

3


You can highlight the information:

 google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Tarefas', 'Horas por dia'],
      ['Trabalho', 11],
      ['Comida', 2],
      ['Comunitário', 2],
      ['TV', 2],
      ['Dormir', 7]
    ]);

    var options = {
      title: 'Atividades',          
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);

    var counter = 0;

    var handler = setInterval(function(){ 
        counter = counter + 0.1
        options = {
          title: 'Atividades',           
          slices: { 1: {offset: counter},                       
                    3: {offset: counter},                       
                    5: {offset: counter},
          }
        };
        chart.draw(data, options);

        if (counter > 0.3) clearInterval(handler);
    }, 200);        
  } 

Jsfiddle

This "animation" is called Exploding a Slice

I suggest you take a look at the documentation: Pie Chart.

  • Hello friend, in fact what I would like is an Animation, for example, you see the chart mounting, something like.

  • 1

    @Felipepaetzold, I understand what you want. I updated the code that shows the animation standing out, before Exploding.

  • I got it, I did it with other values, but just like you said, thank you very much.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.