Bubble Chart

8 posts, 0 answers
  1. scorp
    scorp avatar
    59 posts
    Member since:
    Dec 2010

    Posted 22 Mar 2011 Link to this post

    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.
  2.
  3. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 25 Mar 2011 Link to this post

    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
    Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
  5. scorp
    scorp avatar
    59 posts
    Member since:
    Dec 2010

    Posted 25 Mar 2011 Link to this post

    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.
  7. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 28 Mar 2011 Link to this post

    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
    Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
  9. scorp
    scorp avatar
    59 posts
    Member since:
    Dec 2010

    Posted 11 Apr 2011 Link to this post

    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
  11. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 12 Apr 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  13. scorp
    scorp avatar
    59 posts
    Member since:
    Dec 2010

    Posted 12 Apr 2011 Link to this post

    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.
  14.
  15. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 15 Apr 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top