magnify mouse over

[scorp]

I have a bubble chart with about 100's of bubbles in it. I need to be able to magnify the bubble to a certain size when the user hovers over the bubble with the mouse. How can I achieve this capability. Also how can I bring the bubble in the front on mouse hover ahead of other bubbles and on Mouse lost focus back to its original state.
Thanks.

[scorp]

any help on this one?

[Evgenia]

Hello scorp,

You can use scale transformation or some kind of animation to zoom the chart. You may find this public forum helpful - http://forums.silverlight.net/forums/p/66497/162589.aspx.
This is the Bubbles default Style in case you need it:

<Style
        TargetType="telerikCharting:Bubble">
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerikCharting: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}"
                            </Path>
                            <Canvas.RenderTransform>
                                <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />
                            </Canvas.RenderTransform>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

To be able to make a Bubble to appear in front of another one (when they are overlapping) you can set ZIndex property to increase the size of the one selected like this:

private UIElement selectedItem = null;
      void ChartArea_ItemClick(object sender, ChartItemClickEventArgs e)
      {
          if (selectedItem != null)
              selectedItem.ClearValue(Canvas.ZIndexProperty);
          var bubble = e.OriginalSource as Bubble;
          Canvas.SetZIndex(bubble, 1000);
          selectedItem = bubble;
      }

NOTE that this approach uses the ChartArea's ItemClick event.

Kind regards,
Evgenia
the Telerik team

[scorp]

Thanks I was able to add animation on mousehover using a storyboard in the hover state of the default template for the bubble.
Part 2.
I am trying to enlarge a bubble on the chart on a mousehover to an item in the treeview control. Some bubbles are really small on the chart and on mousehover I want the bubble to expand for a few seconds and then shrink to its original size via animation. Any direction would be helpful.

Thanks.

[scorp]

any help on this one?

[Evgenia]

Hi scorp,

You can find a sample project attached demonstrating Bubbles that Expand on Mouse Hover and Shrink after Duration="0:0:0:3".
Note that the project uses the Interactivity Effects feature (Hover effect) of the RadChart as described in our help topic. When HoverScope property is set to Item the Opacity of non-hovered items is set to 0 by default. The example provided changes the ScaleTransform of the selected item instead.
I hope this gets you started properly.

Best wishes,
Evgenia
the Telerik team

[scorp]

Doesn't really solve the problem I have. I need the bubble to do the animation on the item that corresponds to the bubble from a treeview.
Is there a way to add the animation to the individual bubble through BuildCustomItemStyle?

[Nipun Dhingra]

Evgenia,

I am having a similar kind of project requirement where by my line series chart has some very data. Does Telerik silverlight controls provide cross hair way of showing tooltip or a tooltip which shows everytime you hover over line series more like a javascript manner. This is required because tooltip shows up only on the datapoint and in my case it is required also in case of line connecting the two data points so that it gives a continuous tooltip effect.

Thanks,
Nipun

[Evgenia]

Hi,

@Scorp - The attached project demonstrates the requirement you have - on every TreeViewItem Click the corresponding Bubble expands for a few seconds and shrinks.
Feel free to modify the code so that it applies your requirement.

@Nipun - To be able to show tooltips by mouse over the Line Series you should retemplate the default series style so that it includes ToolTip:

<UserControl.Resources>
        <Style x:Key="LineStyle"
    TargetType="telerikCharting:Line">
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="telerikCharting:Line">
                        <Canvas x:Name="PART_MainContainer">
                            <Line x:Name="PART_LineGeometry"
                        Fill="Transparent"
                        Stroke="Transparent"
                        StrokeThickness="5"
                        X1="0"
                        Y1="{TemplateBinding StartPointY}"
                        X2="{TemplateBinding EndPointX}"
                        Y2="{TemplateBinding EndPointY}"
                        Style="{TemplateBinding ItemStyle}" />
                            <telerikCharting:PointMark x:Name="PART_PointMark"
                                            Canvas.Top="{TemplateBinding StartPointY}"
                                            PointMarkCanvasLeft="{TemplateBinding PointMarkCanvasLeft}"
                                            PointMarkCanvasTop="{TemplateBinding PointMarkCanvasTop}"
                                            Visibility="{TemplateBinding PointMarkVisibility}"
                                            ShapeStyle="{TemplateBinding PointMarkShapeStyle}"
                                            Style="{TemplateBinding PointMarkItemStyle}" />
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="HoverStates">
                                    <vsm:VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Hovered">
                                        <Storyboard>
                                            <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Hidden">
                                        <Storyboard>
                                            <DoubleAnimation To="0.15" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <ToolTipService.ToolTip>
                                <ToolTip Content="My custom tooltip here" />
                            </ToolTipService.ToolTip>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

The Style is set as follows:

RadChart.DefaultSeriesDefinition = new LineSeriesDefinition() { ItemStyle = this.Resources["LineStyle"] as Style };

Kind regards,
Evgenia
the Telerik team

[Nipun Dhingra]

Hi Evgenia,

Thanks for your response and directions in helping with the tool-tip issue. I am sorry I was not able to explain my issue properly. The requirement for my project is very quick responsive and vertical and horizontal axis showing tool-tip. I tried to search on some of the Telerik forums but could find much of the matching requirement. To give you an idea about the required implementation you can have a look at the following link 

http://www.forexpros.com/currencies/usd-inr-advanced-chart

Any help on this that how best or how close we can achieve this would be very helpful. 

Thanks in advance.

Nipun

[Evgenia]

Hi Nipun,

At present this functuonality is not possible with RadChart for Silverlight. However your feedback will be sent to our developers and they will decide whether and when it will be implamented.

Kind regards,
Evgenia
the Telerik team

[scorp]

Thanks for the example. In reference to the project attached if I have about hundred  bubbles the problem i am facing is after selection of item from the treeveiw the bubble stays beneath other bubbles. I would like the selected item's bubble show up on the top. I would assume this to be done by setting the zindex of the bubble. However I am not sure where can I apply that. Any help would be appreciated.

[Evgenia]

Hello scorp,

Add the following methods to the MainPage.xaml.cs class of the project I sent  to be able to make the Selected Item to appear above the others:

void ChartArea_SelectionChanged(object sender, ChartSelectionChangedEventArgs e)
      {
          if (e.AddedItems.Count == 1)
              SelectItem(e.AddedItems[0]);
      }
      private void SelectItem(DataPoint point)
      {
          var bubbles = this.RadChart1.DefaultView.ChartArea.ChildrenOfType<Bubble>();
          foreach (Bubble item in bubbles)
              item.ClearValue(Canvas.ZIndexProperty);
          Bubble selectedBubble = bubbles.SingleOrDefault(bubble => bubble.DataContext == point);
          if (selectedBubble != null)
              Canvas.SetZIndex(selectedBubble, 2000);
      }

 
All the best,
Evgenia
the Telerik team

[scorp]

Awesome thanks.

[jfkrueger]

Exactly what I need as well but am having trouble converting this line to vb.net (yes I have tried the telerik code converter):

Bubble selectedBubble = bubbles.SingleOrDefault(bubble => bubble.DataContext == point);

Anyone?

Thanks1

[Evgenia]

Hello Joe,

The code line you mentioned is a sample Lambda expression which you can substitute with the following in VB.NET:

Dim myBubbles = (
   From bubble In bubbles
   Where bubble.DataContext = point
   Select bubble).Any()
Bubble selectedBuble = bubbles.SingleOrDefault( myBubbles );

Best wishes,
Evgenia
the Telerik team

[jfkrueger]

This line:

Where bubble.DataContext = point

Gives me the following error:

Operator '=' is not defined for types 'Object' and 'Telerik.Windows.Controls.Charting.DataPoint'

Thanks for your help!

[Evgenia]

Hi Joe,

It's my typo, it should be comparison operator, not assignment operator (as shown in the code line I reconstructed - Bubble selectedBubble = bubbles.SingleOrDefault(bubble => bubble.DataContext == point);
Here is how yours should look like in VB.NET:

Dim myBubbles = (
   From bubble In bubbles
   Where bubble.DataContext == point
   Select bubble).Any()
Bubble selectedBuble = bubbles.SingleOrDefault( myBubbles );

Kind regards,
Evgenia
the Telerik team