Display Icon after each bar

5 posts, 0 answers
  1. vijay
    vijay avatar
    46 posts
    Member since:
    Jul 2010

    Posted 07 Dec 2011 Link to this post

     

    Hi All,

    I have a requirement to display the icon after the each bar(HorizontalStackedBar100SeriesDefinition).

    Please find the attached image. the same functionality achieved in flux as showing in the image.

    Can you please send the solution as soon as possible?

    I tried placing the icon after the each bar by taking a stack panel separately and added the icons basing on chart count it is fine but it is not looking good with different resolutions and not aligned correctly..

    Thanks
    -Vijay Kommalapati

  2. vijay
    vijay avatar
    46 posts
    Member since:
    Jul 2010

    Posted 07 Dec 2011 Link to this post

    I achived the same functionility for bubble chart by changing the control template as show...but not able to fidn the solution for 100 stackbar series

    <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}" />
      
                        <Ellipse Width="25" Height="25" x:Name="RectSV" 

     

     

    Canvas.Left="{TemplateBinding Left}"

     

    Canvas.Top="{TemplateBinding Top}" >

     

     

    <Ellipse.Fill>

     

     

    <ImageBrush x:Name="BblImageSV" ImageSource="../Images/ico_specialityvisit2.png" ></ImageBrush>

     

     

    </Ellipse.Fill>

     

     

    </Ellipse>

     
                    </Canvas>
      
                </ControlTemplate>
      
            </Setter.Value>
      
        </Setter>
      
    </Style>
  3. DevCraft banner
  4. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 09 Dec 2011 Link to this post

    Hello Vijay,

    Thank you for the attached screenshot and XAML.

    If I have understood you correctly - you want to place these icons just outside of the chart area but keep the icon parallel to the corresponding bar. Unfortunately there is no way to achieve this out-of-the-box and you will need to handle this manually. Your idea with a stack panel seems very witty and I suggest you keep working in that direction.

    All the best,
    Petar Marchev
    the Telerik team

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

  5. vijay
    vijay avatar
    46 posts
    Member since:
    Jul 2010

    Posted 25 Oct 2012 Link to this post

    Hi Team,

    Any Update on this??

    i was achived this functionality by creating out side but it was not professionl and accurate.

    if any chnages on latest versions Please provide the solution.

    thanks
    -Vijay
  6. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 30 Oct 2012 Link to this post

    Hi Vijay,

    We have not extended the functionality of the RadChart to fit such a scenario.   

    Regards,
    Petar Marchev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner