Treemap animation
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
<button id="update">Update chart</button>
CSS
#container {
width: 300px;
width: 600px;
margin: 0 auto;
}
JavaScript
$(function () {
$('#container').highcharts({
"chart": {
type: "treemap",
animation: {
duration: 1000
}
},
series: [{
//showInLegend: true,
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
},
data: [{
'name': 'Americas',
'value': 52976, //y in pie chart
'color': 'rgba(47,126,216,1)'
}, {
'name': 'Australia',
'value': 41219,
'color': 'rgba(13,35,58,1)'
}, {
'name': 'Europe',
'value': 62756,
'color': 'rgba(139,188,33,1)'
}, {
'name': 'Asia',
'value': 14577,
'color': 'rgba(145,0,0,1)'
}]
}]
});
var i = 1;
$('#update').click(function () {
var chart = $('#container').highcharts();
if(i % 2){
} else {
}
chart.series[0].data[0].update(i % 2 ? {value:200000} : {value:60000},true,true);
// alert('update');
//chart.series[0].data[0].update(i % 2 ? 20000 : 60000);
i += 1;
});
});