Telerik Forums / UI for Silverlight Forum / Chart /

Chart : mouse over series

Telerik UI for Silverlight
Resources Buy Try

11 posts, 1 answers

Nicolas Wagener

6 posts

Member since:
Nov 2009

Posted 31 Aug 2010 Link to this post

Hello,

I want to have the same animation in my chart that in the Smart Labels exemples.

I mean, when my mouse is over a series I want to see just the series that I mouse over...
How do I change the opacity of the other series ?

Thank You.

Greetz
Nicolas.
Answer
Nikolay
Admin

397 posts

Posted 02 Sep 2010 Link to this post

Hi Nicolas Wagener,

You can achieve this by enabling the chart interactivity effects, here is a sample code snippet demonstrating how to do it :

BarSeriesDefinition def = new BarSeriesDefinition();

def.InteractivitySettings.HoverScope = InteractivityScope.Item;

For more information on this feature, please, have a look at this help topic. You may also refer to our InteractivityEffects example and review the code by clicking on the View Code button.

Hope this helps.

Kind regards,
Nikolay
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Nicolas Wagener

6 posts

Member since:
Nov 2009

Posted 02 Sep 2010 Link to this post

Tank you :)
Manish Kumar

62 posts

Member since:
Feb 2010
Posted 06 Dec 2010 Link to this post

Hi

I have a similar requirement but I need to trap the value of AxisY on mouse hover or LeftButtonClicked event. Is this possible?
for reference i have attached image document

Thanks,
Manish

testimage.PNG
Nikolay
Admin

397 posts

Posted 07 Dec 2010 Link to this post

Hello Manish Kumar,

Unfortunately it is not possible to show the exact Y value in a tooltip when hovering over any part of the series, the tooltips display the corresponding segment's value from the data source, but has no way of displaying the intermediate values between two individual points from the source.

For more information on tooltips, please, have a look at this help topic.

Greetings,
Nikolay
the Telerik team

Browse the videos here>> to help you get started with RadControls for Silverlight
Manish Kumar

62 posts

Member since:
Feb 2010
Posted 08 Dec 2010 Link to this post

Hi

Thanks for your reply. Just one small query regarding LineSeriesDefinition. Is there any workaround so that I can disable the clicking feature when the mouse hovers on the line between the two points of a line in the chart and is available only when the mouse hovers the points.

regards
Manish Kumar

testimage.PNG
Nikolay
Admin

397 posts

Posted 09 Dec 2010 Link to this post

Hello Manish Kumar,

You may achieve this behavior by setting the line's IsHitTestVisible property to False ( by retemplating the line ). This way you would be able to click only on the point marks.

Hope this helps.

All the best,
Nikolay
the Telerik team

Browse the videos here>> to help you get started with RadControls for Silverlight
Manish Kumar

62 posts

Member since:
Feb 2010

Posted 09 Dec 2010 Link to this post

Hi

Thanks, but may i know how do we retemplate out the line. I tried doing by creating a simple style as below, will this work ? and if yes where i am doing wrong.

Style

pathStyle1 = new Style(typeof(System.Windows.Shapes.Path));

pathStyle1.Setters.Add(

new Setter(System.Windows.Shapes.Path.IsHitTestVisibleProperty, "true"));

Style lineStyle1 = new Style(typeof(Telerik.Windows.Controls.Charting.LineSeries));

lineStyle1.Setters.Add(

new Setter(LineSeries.BorderLineStyleProperty, pathStyle1));

thanks
Manish
Manish Kumar

62 posts

Member since:
Feb 2010

Posted 09 Dec 2010 Link to this post

Hi
I also created a style as below but some where i am getting javascript error

Line: 55
Error: Unhandled Error in Silverlight Application
Code: 2012
Category: ParserError
Message: Unknown attribute PointMarkCanvasLeft on element PointMark.
File:
Line: 3
Position: 136

may be some dll version mismatch. I am using 2010.2.714.1030. can you please correct my script.

<Style x:Key="LineStyle" TargetType="charting:Line">

<Setter Property="Template" >

<Setter.Value>

<ControlTemplate TargetType="charting:Line">

<Canvas x:Name="PART_CanvasContainer">

<Line x:Name="PART_LineGeometry" StrokeThickness="1" X1="0"

Y1="{TemplateBinding StartPointY}" X2="{TemplateBinding EndPointX}" Y2="{TemplateBinding EndPointY}"

Style="{TemplateBinding ItemStyle}" />

<charting:PointMark x:Name="PART_PointMark" Canvas.Top="{TemplateBinding StartPointY}"

PointMarkCanvasLeft="{TemplateBinding PointMarkCanvasLeft}" PointMarkCanvasTop="{TemplateBinding PointMarkCanvasTop}"

Visibility="{TemplateBinding PointMarkVisibility}" ShapeStyle="{TemplateBinding PointMarkShapeStyle}"

Style="{TemplateBinding PointMarkItemStyle}" />

</Canvas>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

regards
Manish
Manish Kumar

62 posts

Member since:
Feb 2010

Posted 09 Dec 2010 Link to this post

Hi

I guess i have resolved the issue after removing the property from the style script namely
PointMarkCanvasLeft="{TemplateBinding PointMarkCanvasLeft}" PointMarkCanvasTop="{TemplateBinding PointMarkCanvasTop}"
is that correct ?...

thanks a lot!!
Manish
Nikolay
Admin

397 posts

Posted 11 Dec 2010 Link to this post

Hi Manish Kumar,

You can retemplate the line in the following way :

<Style x:Key="CustomStyle"

            TargetType="telerik:Line">

            <Setter Property="Template" >

                <Setter.Value>

                    <ControlTemplate TargetType="telerik:Line">

                        <Canvas x:Name="PART_MainContainer">

                            <Line x:Name="PART_LineGeometry"

                              Fill="Transparent" IsHitTestVisible="False"

                              Stroke="Transparent"

                              StrokeThickness="5"

                              X1="0"

                              Y1="{TemplateBinding StartPointY}"

                              X2="{TemplateBinding EndPointX}"

                              Y2="{TemplateBinding EndPointY}"

                              Style="{TemplateBinding ItemStyle}" />

                            <telerik:PointMark x:Name="PART_PointMark"

                                                   Canvas.Top="{TemplateBinding StartPointY}"

                                                   PointMarkCanvasLeft="{TemplateBinding PointMarkCanvasLeft}"

                                                   PointMarkCanvasTop="{TemplateBinding PointMarkCanvasTop}"

                                                   Visibility="{TemplateBinding PointMarkVisibility}"

                                                   ShapeStyle="{TemplateBinding PointMarkShapeStyle}"

                                                   Style="{TemplateBinding PointMarkItemStyle}" />

                        </Canvas>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

Then add the custom style :

<telerik:RadChart x:Name="RadChart1">

            <telerik:RadChart.SeriesMappings>

                <telerik:SeriesMapping>

                    <telerik:SeriesMapping.SeriesDefinition>

                        <telerik:LineSeriesDefinition ItemStyle="{StaticResource CustomStyle}"/>

                    </telerik:SeriesMapping.SeriesDefinition>

                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="FieldName1" />

                    <telerik:ItemMapping DataPointMember="YValue" FieldName="FieldName2" />

                </telerik:SeriesMapping>

            </telerik:RadChart.SeriesMappings>

        </telerik:RadChart>

Hope this helps.

Best wishes,
Nikolay
the Telerik team

Browse the videos here>> to help you get started with RadControls for Silverlight

Chart : mouse over series

Nicolas Wagener

Nikolay

Nicolas Wagener

Manish Kumar

Nikolay

Manish Kumar

Nikolay

Manish Kumar

Manish Kumar

Manish Kumar

Nikolay