This is a migrated thread and some comments may be shown as answers.

Image on each Bubble of Bubble Chart.

4 Answers 42 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 2
Rahul asked on 05 Aug 2011, 12:36 PM
We want to place one small image at corner of each
bubble in Bubble Chart. Is it possible to place image
on bubbles.

For More clarification, check out the attached image.

4 Answers, 1 is accepted

Sort by
0
Sia
Telerik team
answered on 10 Aug 2011, 03:39 PM
Hello Rahul,

Unfortunately such behavior is not achievable out of the box with RadChart.

Greetings,
Sia
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

0
Rahul
Top achievements
Rank 2
answered on 16 Aug 2011, 07:48 PM
Hi Sia,
is there no any other way to achieve this result.
0
Accepted
Sia
Telerik team
answered on 19 Aug 2011, 01:48 PM
Hello Rahul,

You can set a custom template with image inside but you cannot position it precisely.  Please try this style where I have added a rectange with red background which you need to replace with image:
<system:String x:Key="BubbleData">M70.5,140.5 L70.6,140.5 70.6,140.6 70.5,140.6 z M140.5,70.5 L140.6,70.5 140.6,70.6 140.5,70.6 z M0.5,70.5 L0.6,70.5 0.6,70.6 0.5,70.6 z M70.5,5 C91.4,5 110.1,14.8 122.07,30.1 123.5,32 107.9,60.5 79.7,73.5 47.7,88.3 5,80.8 5,70.5 5,34.3 34.3,5 70.5,5 z M70.5,0.5 L70.6,0.5 70.6,0.6 70.5,0.6 z</system:String>
<LinearGradientBrush x:Key="BubbleMaskBrush"  EndPoint="0,0.7" StartPoint="0,0" MappingMode="RelativeToBoundingBox">
    <GradientStop Color="#7fffffff"/>
    <GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="BubbleMaskStroke" EndPoint="1,0.4" StartPoint="0,0.6">
    <GradientStop Color="#66FFFFFF" Offset="0.05"/>
    <GradientStop Color="Transparent" Offset="1"/>
    <GradientStop Color="Transparent" Offset="0.002"/>
    <GradientStop Color="Transparent" Offset="0.431"/>
</LinearGradientBrush>
<system:Double x:Key="BubbleMaskStrokeThickness">1</system:Double>
     
<Style x:Key="CustomBubble"
    TargetType="telerik:Bubble">
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="telerik:Bubble">
                <Canvas RenderTransformOrigin="{TemplateBinding RelativeCenterPoint}" x:Name="PART_MainContainer">
                    <Path x:Name="PART_BubbleElement"
                        Data="{TemplateBinding ItemGeometry}"
                        Style="{TemplateBinding ItemStyle}" />
                    <Path Stretch="Fill"
                        Canvas.Left="{TemplateBinding Left}"
                        Canvas.Top="{TemplateBinding Top}"
                        Width="{TemplateBinding Diameter}"
                        Height="{TemplateBinding Diameter}"
                        Data="{StaticResource BubbleData}"
                        Fill="{StaticResource BubbleMaskBrush}"
                        Stroke="{StaticResource BubbleMaskStroke}"
                        StrokeThickness="{StaticResource BubbleMaskStrokeThickness}" />
                    <Rectangle Width="10" Height="10" Fill="Red"
                                Canvas.Left="{TemplateBinding Left}"
                                Canvas.Top="{TemplateBinding Top}"/>
                        <Canvas.RenderTransform>
                            <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />
                        </Canvas.RenderTransform>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


All the best,
Sia
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

0
Rahul
Top achievements
Rank 2
answered on 19 Aug 2011, 05:00 PM
Thanks Sia,
I really appreciate your efforts for giving solution. I will try this out and let you know.
Thanks once again.
Tags
Chart
Asked by
Rahul
Top achievements
Rank 2
Answers by
Sia
Telerik team
Rahul
Top achievements
Rank 2
Share this question
or