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

Display Icon after each bar

4 Answers 53 Views
Chart
This is a migrated thread and some comments may be shown as answers.
vijay
Top achievements
Rank 1
vijay asked on 07 Dec 2011, 06:40 AM

 

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

4 Answers, 1 is accepted

Sort by
0
vijay
Top achievements
Rank 1
answered on 07 Dec 2011, 08:23 AM
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>
0
Petar Marchev
Telerik team
answered on 09 Dec 2011, 01:29 PM
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 >>

0
vijay
Top achievements
Rank 1
answered on 25 Oct 2012, 02:47 PM
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
0
Petar Marchev
Telerik team
answered on 30 Oct 2012, 07:54 AM
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.

Tags
Chart
Asked by
vijay
Top achievements
Rank 1
Answers by
vijay
Top achievements
Rank 1
Petar Marchev
Telerik team
Share this question
or