Is it possible to animate the bubbles when the data changes? I mean that the attributes (x,y,size,color) transition from the current to the new.
(Syntax includes TypeScript)
var opt: kendo.dataviz.ui.ChartOptions = {};
opt.title = { text: 'Plot' };
opt.transitions = true;
opt.dataSource = this.dataSource;
opt.series = [{ type: 'bubble', yField: 'price', xField: 'time', sizeField: 'size', categoryField: 'id' }];//, overlay: { gradient:'glass'} }]; // colorField
opt.xAxis = [{ title: { text: 'Time' }, crosshair: { visible: true, tooltop: { visible: true, format: "n0" } } }];
opt.yAxis = [{ title: { text: 'Change' }, crosshair: { visible: true, tooltop: { visible: true, format: "n0" } } }];
opt.tooltip = { visible : true, format : "{3}", opacity : 1 };
////////////////////////////////////////////////////////////////////////////////
public mergeDataArray( items : Array<any> ) : void
{
//this.dataSource.data(item);
var item : any;
var src: any;
var i : number;
var j : number;
var n : number = this.dataSource.total();
var nout : number = items.length;
var found: boolean;
console.log('outter ' + nout + ' ' + n );
for(j = 0; j < nout; j++)
{
src = items[j];
found = false;
//console.log('outter ' + src['id']);
for(i = 0; i < n; i++)
{
item = this.dataSource.at(i);
if( src.id == item.id )
{
item.set('price', src.price);
item.set('time', src.time);
found = true;
break;
}
} // endfor
if(!found)
{
// add in new item
}
} // endfor
//this.dataSource.sync();
console.log('changed ' + this.dataSource.hasChanges() );
}
The data source does see that the data has changed, but it just does a quick set with no transition/animation from current condition to the new condition.
2 Answers, 1 is accepted
Animated transitions are not currently supported by the bubble chart.
Our long-term plans already include enhancing the animations, but please do vote for this feature on our UserVoice portal.
T. Tsonev
Telerik
Rank 2