JavaScript
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter'
},
series: [{
data: [29.9, 71.5, 30, 54, 23,17,66,97,54]
}],
yAxis: {
min: 0,
max: 100
},
xAxis: {
min: 0,
max: 10
}
}, function(chart){
function animate(point, x, y, r) {
point.update({
x: x,
y: y,
marker: {
radius: r
}
}, true, {duration:2000});
}
$('button').click(function(){
animate(chart.series[0].data[0], 1, 10, 11);
animate(chart.series[0].data[1], 2, 20, 9);
animate(chart.series[0].data[2], 3, 30, 7);
animate(chart.series[0].data[3], 4, 40, 8);
animate(chart.series[0].data[4], 5, 50, 13);
animate(chart.series[0].data[5], 6, 60, 12);
animate(chart.series[0].data[6], 7, 70, 10);
animate(chart.series[0].data[7], 8, 80, 5);
animate(chart.series[0].data[8], 9, 90, 14);
chart.addSeries({type:'line', data:[29.9, 10]});
chart.addSeries({type:'line', data:[null,71.5, 20]});
chart.addSeries({type:'line', data:[null,null,30, 30]});
chart.addSeries({type:'line', data:[null,null,null,54, 40]});
chart.addSeries({type:'line', data:[null,null,null,null,23, 50]});
chart.addSeries({type:'line', data:[null,null,null,null,null,17, 60]});
chart.addSeries({type:'line', data:[null,null,null,null,null,null,66, 70]});
chart.addSeries({type:'line', data:[null,null,null,null,null,null,null,97, 80]});
chart.addSeries({type:'line', data:[null,null,null,null,null,null,null,null,54, 90]});
})
});