Animated Time-Line Pie Chart

This demo shows how you can use JavaScript's <code>setTimeout</code> function to update the chart's data dynamically without user intervention, by cycling through sets of data. It also makes use of our <a href="https://github.com/amcharts/animate">Animate plugin</a>, which makes the transition between data sets smooth and eye-pleasing. Normally, to update the chart data dynamically, you would update <code>dataProvider</code> and call chart's <code>validateData()</code> method. Animate plugin introduces a new method <code><a href="https://github.com/amcharts/animate#usage">animateData()</a></code> which takes in new data set and makes a smooth transition between current and new data. It not only animates values, though. It will also transition colors, opacity and label radius parameter smoothly, if those are in use.

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/animate/animate.min.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

//fake load of chartdata array:
function pushvalue(curyear,curmonth,monvalue){
        array.push({year: curyear, month: curmonth, count: monvalue});
}

var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
var currentYear = 1997;
var array = [];

for (var i = 0; i < 4; ++i) {
  for (var j = 4; j < 12; ++j) {
    pushvalue(currentYear + i, monthNames[j], Math.floor(Math.random() * 15) + 1);
  }
  
}

var chartData = {};
//corrected chartData loop below:
for (var i = 0; i < array.length; ++i) {
  if (!chartData[array[i].year]) {
    chartData[array[i].year] = [];
  }
  chartData[array[i].year].push({"Month": array[i].month, "Count": array[i].count });
}




var currentYear = 1997;

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [],
  "valueField": "Count",
  "titleField": "Month",
  "startDuration": 0,
  "innerRadius": 80,
  "pullOutRadius": 20,
  "marginTop": 30,
  "titles": [{
    "text": "Test chart"
  }],
  "allLabels": [{
    "y": "54%",
    "align": "center",
    "size": 25,
    "bold": true,
    "text": "1995",
    "color": "#555"
  }, {
    "y": "49%",
    "align": "center",
    "size": 15,
    "text": "Year",
    "color": "#555"
  }],
  "listeners": [ {
    "event": "init",
    "method": function( e ) {
      var chart = e.chart;

      function getCurrentData() {
        var data = chartData[currentYear];
        currentYear++;
        if (currentYear > 2000)
          currentYear = 1997;
        return data;
      }

      function loop() {
        chart.allLabels[0].text = currentYear;
        var data = getCurrentData();
        chart.animateData( data, {
          duration: 1000,
          complete: function() {
            setTimeout( loop, 3000 );
          }
        } );
      }

      loop();
    }
  } ],
   "export": {
   "enabled": true
  }
} );