Bubble Chart

[scorp]

Can we achieve an animation similar to this link. Press the Play button for animation.
http://www.gapminder.org/world/#$majorMode=chart$is;shi=t;ly=2003;lb=f;il=t;fs=11;al=30;stl=t;st=t;nsl=t;se=t$wst;tts=C$ts;sp=5.59290322580644;ti=2009$zpv;v=0$inc_x;mmid=XCOORDS;iid=phAwcNAVuyj1jiMAkmq1iMg;by=ind$inc_y;mmid=YCOORDS;iid=phAwcNAVuyj2tPLxKvvnNPA;by=ind$inc_s;uniValue=8.21;iid=phAwcNAVuyj0XOoBL_n5tAQ;by=ind$inc_c;uniValue=255;gid=CATID0;by=grp$map_x;scale=log;dataMin=295;dataMax=79210$map_y;scale=lin;dataMin=19;dataMax=86$map_s;sma=49;smi=2.65$cd;bd=0$inds=
If so an example with a simple project would be appreciated.
Thanks.

[Yavor]

Hi scorp,

A similar setup can be achieved. The code below demonstrates one possible approach:

public partial class Empty2 : UserControl
   {
       ObservableCollection<int> datasource = new ObservableCollection<int>();
       int value = 0;
       public Empty2()
       {
           InitializeComponent();
           RadChart1.ItemsSource = datasource;
           DispatcherTimer timer = new DispatcherTimer();
           timer.Interval = new TimeSpan(0, 0, 0, 1);
           timer.Tick += new EventHandler(timer_Tick);
           timer.Start();
           RadChart1.DefaultSeriesDefinition = new BubbleSeriesDefinition();
           RadChart1.DefaultView.ChartArea.EnableAnimations = false;
           RadChart1.DefaultView.ChartArea.AxisY.AutoRange = false;
           RadChart1.DefaultView.ChartArea.AxisY.MinValue = 0;
           RadChart1.DefaultView.ChartArea.AxisY.MaxValue = 100;
           RadChart1.DefaultView.ChartArea.AxisY.Step = 5;
       }
       void timer_Tick(object sender, EventArgs e)
       {
           datasource.Add(value);
           value++;
       }

   }

I hope this gets you started properly.

Greetings,
Yavor
the Telerik team

[scorp]

Thanks. What are some other approaches. I would like one where the x or y scale doesn't change and just the bubble moves from point a to point b to point c.

[Yavor]

Hello scorp,

If you would like for an axis not to change, you can turn off it autoscale property. This may look something like this:

RadChart1.DefaultView.ChartArea.EnableAnimations = false;
RadChart1.DefaultView.ChartArea.AxisY.AutoRange = false;
RadChart1.DefaultView.ChartArea.AxisY.MinValue = 0;
RadChart1.DefaultView.ChartArea.AxisY.MaxValue = 100;
RadChart1.DefaultView.ChartArea.AxisY.Step = 10;
RadChart1.DefaultView.ChartArea.AxisX.AutoRange = false;
RadChart1.DefaultView.ChartArea.AxisX.MinValue = 0;
RadChart1.DefaultView.ChartArea.AxisX.MaxValue = 100;
RadChart1.DefaultView.ChartArea.AxisX.Step = 5;

In such a setup, the axes will be of fixed dimensions, and simply new points will be added once per tick.

Kind regards,
Yavor
the Telerik team

[scorp]

Great this one works. How can I now I achieve the trail of the bubble.
http://www.gapminder.org/world/#$majorMode=chart$is;shi=t;ly=2003;lb=f;il=t;fs=11;al=30;stl=t;st=t;nsl=t;se

[Yavor]

Hi scorp,

Presently, this precise animation is hard to achieve. Nevertheless, you can use the present approach to match the setup closely.

Kind regards,
Yavor
the Telerik team

[scorp]

Not sure if you got my question correctly. I was looking to get the trail of the bubble. There is a checkbox in the link I provided to get the trail.
Thanks.

[Yavor]

Hi scorp,

Presently, this trailing effect is not available. This can also be simulated, however. The default behavior of the control is to update each datapoint to a new value. You can alter this, by simply adding a new datapoint for each new value, and preserving the old ones. Thus the older values will also be available on the screen.
I hope this information helps.

Regards,
Yavor
the Telerik team