jquery - How to update with animation a Pie Chart? -

i can't animate pie chart when clicking update new chart new content comes in, content updating chart remains , want update , @ same time chart should showing new lines , points.

here code:

<canvas id="chart-area-service_hours"></canvas>  <button class="button btn btn-md btn-block btn-default" id="update- statistic" style="width: 50%;margin: 0 auto;">Обнавить</button>  var randomhours = function() {     return math.round(math.random() * 12); };  var service_hours = {     type: 'pie',     data: {         datasets: [{             data: [                 {% service in current_user.services %}                     [                         randomhours(),                     ],                 {% endfor %}              ],             backgroundcolor: [                 {% service in current_user.services %}                     '#00ffff',                     window.chartcolors.purple,                     '#ff9900',                     window.chartcolors.grey,                     window.chartcolors.brown,                     // window.chartcolors.green,                     // window.chartcolors.yellow,                     // window.chartcolors.purple,                 {% endfor %}             ],             label: 'Распределение рабочих часов по услугам'         }],         labels: [             {% service in current_user.services %}                  "{{service.title}}",             {% endfor %}         ]     },     options: {         responsive: true,      } };      var ctx = document.getelementbyid("chart-area-service_hours").getcontext("2d");     window.mypie = new chart(ctx, service_hours);  document.getelementbyid('update-statistic').addeventlistener('click', function() {     all_brnoi_line.data.datasets.foreach(function(dataset) {         dataset.data = dataset.data.map(function() {             return randomscalingfactor();         });     });     $("#chart-area-1").hide().html('<canvas id="chart-area-1" class="all-broni">').fadein('fast');     window.mypie.update(); }); 

you need add chart.js version: 1.0.2 form here work.

html code:

<canvas id="piechart" style="height: 325px; width: 550px !important; margin-left:17%; margin-top:3%;"></canvas> 

jquery code:

 var piechartcanvas = $("#piechart").get(0).getcontext("2d");  var piechart = new chart(piechartcanvas);  var piedata = [ {          value: '7',          color: "#f56954",          highlight: "#f56954",          label: "abc"      },            {                value: '5',                color: "#605ca8",                highlight: "#605ca8",                label: "xyz"            },             {                 value: '9',                 color: "#37495f",                 highlight: "#37495f",                 label: "asdf"             },              {                  value: '4',                  color: "#2b908f",                  highlight: "#2b908f",                  label: "lkh"              }];  var pieoptions = {             //boolean - whether should show stroke on each segment             segmentshowstroke: true,             //string - colour of each segment stroke             segmentstrokecolor: "#fff",             //number - width of each segment stroke             segmentstrokewidth: 2,             //number - percentage of chart cut out of middle             percentageinnercutout: 50, // 0 pie charts             //number - amount of animation steps             animationsteps: 100,             //string - animation easing effect             animationeasing: "easeoutbounce",             //boolean - whether animate rotation of doughnut             animaterotate: true,             //boolean - whether animate scaling doughnut centre             animatescale: false,             //boolean - whether make chart responsive window resizing             responsive: true,             // boolean - whether maintain starting aspect ratio or not when responsive, if set false, take entire container             maintainaspectratio: true,             //string - legend template             legendtemplate: "<ul class=\"<%=name.tolowercase()%>-legend\"><% (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillcolor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"         };         //create pie or douhnut chart         // can switch between pie , douhnut using method below.         piechart.doughnut(piedata, pieoptions); 

hope helps.