Image on each Bubble of Bubble Chart.

5 posts, 1 answers
  1. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 05 Aug 2011 Link to this post

    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.
  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 10 Aug 2011 Link to this post

    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 >>

  3. DevCraft banner
  4. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 16 Aug 2011 Link to this post

    Hi Sia,
    is there no any other way to achieve this result.
  5. Answer
    Sia
    Admin
    Sia avatar
    667 posts

    Posted 19 Aug 2011 Link to this post

    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 >>

  6. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 19 Aug 2011 Link to this post

    Thanks Sia,
    I really appreciate your efforts for giving solution. I will try this out and let you know.
    Thanks once again.
Back to Top
DevCraft banner