Chart : mouse over series

[Nicolas Wagener]

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.

[Nikolay]

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

[Nicolas Wagener]

Tank you :)

[Manish Kumar]

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

[Nikolay]

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

[Manish Kumar]

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

[Nikolay]

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

[Manish Kumar]

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]

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]

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]

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