Bubble

[Trude]

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.

[Petar Kirov]

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

[Trude]

Yes, this will work, thanks!