Bubble

3 posts, 1 answers
  1. Jorn
    Jorn avatar
    222 posts
    Member since:
    Jun 2009

    Posted 10 Oct 2012 Link to this post

    I'm considering moving my charts to the (relatively) new ChartView. Is there an easy way to implement a bubble chart or do I have to use the old Charting control for that?

    Edit: I don't necessarily need different bubble sizes.
  2. Answer
    Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 15 Oct 2012 Link to this post

    Hi Jorn,

    Even though the ChartView does not have built-in Bubble series, they could be implemented relatively easy by using ScatterPoint series with a custom PointTemplate.

    If all the data points have same size, then all you need is this:
    <telerik:RadCartesianChart x:Name="chartView">
                 
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:LinearAxis />
        </telerik:RadCartesianChart.HorizontalAxis>
                 
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis />
        </telerik:RadCartesianChart.VerticalAxis>
                 
        <telerik:RadCartesianChart.Series>
                     
            <telerik:ScatterPointSeries XValueBinding="XValue"
                            YValueBinding="YValue">
                <telerik:ScatterPointSeries.PointTemplate>
                    <DataTemplate>
                        <Ellipse Width="50" Height="50" Fill="LightBlue"/>
                    </DataTemplate>
                </telerik:ScatterPointSeries.PointTemplate>
            </telerik:ScatterPointSeries>
                     
        </telerik:RadCartesianChart.Series>
                 
    </telerik:RadCartesianChart>
    If you want you can bind the size of the bubble to a property of the underlying object. The only peculiarity in this case is that you need to define the max size of the ContentPresenter at design-time:
    <telerik:ScatterPointSeries XValueBinding="XValue"
                       YValueBinding="YValue">
        <telerik:ScatterPointSeries.Resources>
            <Style TargetType="ContentPresenter">
                <Setter Property="Height" Value="90" />
                <Setter Property="Width" Value="90" />
            </Style>
        </telerik:ScatterPointSeries.Resources>
        <telerik:ScatterPointSeries.PointTemplate>
            <DataTemplate>
                <Ellipse Width="{Binding DataItem.BubbleSize}"
                      Height="{Binding DataItem.BubbleSize}"
                      Fill="LightBlue"/>
            </DataTemplate>
        </telerik:ScatterPointSeries.PointTemplate>
    </telerik:ScatterPointSeries>

    You need to define a ContentPresenter, because by default ScatterPoint series items are identical (so as the size of their ContentPresenters) and ContentPresenter is only measured by the first item. So if you have bubbles larger than your first, they will be clipped.

    If you have any further questions feel free to ask.

    All the best,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Jorn
    Jorn avatar
    222 posts
    Member since:
    Jun 2009

    Posted 26 Nov 2012 Link to this post

    Yes, this will work, thanks!
Back to Top