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

magnify mouse over

17 Answers 122 Views
Chart
This is a migrated thread and some comments may be shown as answers.
scorp
Top achievements
Rank 1
scorp asked on 03 Feb 2011, 04:50 PM
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.

17 Answers, 1 is accepted

Sort by
0
scorp
Top achievements
Rank 1
answered on 07 Feb 2011, 03:26 PM
any help on this one?
0
Evgenia
Telerik team
answered on 09 Feb 2011, 09:40 AM
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
Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
0
scorp
Top achievements
Rank 1
answered on 09 Feb 2011, 04:23 PM
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.
0
scorp
Top achievements
Rank 1
answered on 14 Feb 2011, 02:50 PM
any help on this one?
0
Accepted
Evgenia
Telerik team
answered on 14 Feb 2011, 04:08 PM
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
Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
0
scorp
Top achievements
Rank 1
answered on 15 Feb 2011, 03:30 PM
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?

0
Nipun Dhingra
Top achievements
Rank 1
answered on 16 Feb 2011, 02:51 PM
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
0
Evgenia
Telerik team
answered on 18 Feb 2011, 06:32 PM
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
0
Nipun Dhingra
Top achievements
Rank 1
answered on 21 Feb 2011, 12:53 PM
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
0
Evgenia
Telerik team
answered on 24 Feb 2011, 02:39 PM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
scorp
Top achievements
Rank 1
answered on 24 Feb 2011, 07:57 PM
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.
0
Accepted
Evgenia
Telerik team
answered on 02 Mar 2011, 12:42 PM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
scorp
Top achievements
Rank 1
answered on 02 Mar 2011, 03:44 PM
Awesome thanks.
0
jfkrueger
Top achievements
Rank 1
answered on 22 Aug 2011, 08:17 PM
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
0
Evgenia
Telerik team
answered on 25 Aug 2011, 11:50 AM
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

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
jfkrueger
Top achievements
Rank 1
answered on 25 Aug 2011, 05:31 PM
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!
0
Evgenia
Telerik team
answered on 30 Aug 2011, 02:44 PM
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

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Tags
Chart
Asked by
scorp
Top achievements
Rank 1
Answers by
scorp
Top achievements
Rank 1
Evgenia
Telerik team
Nipun Dhingra
Top achievements
Rank 1
jfkrueger
Top achievements
Rank 1
Share this question
or