pie chart mouse over highlight on both slice and label and selection event

8 posts, 1 answers
  1. Mingxue
    Mingxue avatar
    25 posts
    Member since:
    Apr 2016

    Posted 12 May Link to this post

    Hi,

     

    I am using the sample from Telerik Demo to create pie chart, and register to .LayoutUpdate event, at which doing following:

            private void pieChart_LayoutUpdated(object sender, System.EventArgs e)
            {
                var paths = ChildrenOfTypeExtensions.ChildrenOfType<Path>(PieChart.Series[0]).ToList();
                if (paths.Count == 0)
                    return;
                PieChart.LayoutUpdated -= pieChart_LayoutUpdated;
                foreach (var path in paths)
                {
                    var dataPoint = path.Tag as PieDataPoint;
                    if (dataPoint == null)
                        return;
                        path.MouseEnter += uiElement_MouseEnter;
                        path.MouseLeave += uiElement_MouseLeave;
                }
            }
            private void uiElement_MouseEnter(object sender, MouseEventArgs e)
            {
                var bar = (UIElement) sender;
                bar.Opacity = 0.5;
            }
            private void uiElement_MouseLeave(object sender, MouseEventArgs e)
            {
                var bar = (UIElement)sender;
                bar.Opacity = 1;
            }
     

    But I wanted more than just highlighting on pie "path", I want the associated label to be highlighted too.

    Which at the moment, I am doing something like this:

            <Style x:Key="SlicerNameTextBoxStyle" TargetType="TextBlock">
                <Setter Property="Foreground" Value="{Binding DataItem, Converter={StaticResource SlicerToBrushConverter}}"></Setter>
                <Setter Property="FontWeight" Value="{Binding DataItem, Converter={StaticResource SlicerToNameConverter}}"></Setter>
                <Setter Property="FontFamily" Value="Segoe UI" />
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{StaticResource MouseOverBrush}"></Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>

                    <telerik:PieSeries.LabelDefinitions>
                        <telerik:ChartSeriesLabelDefinition Margin="-4,0,0,0"
                                                            DefaultVisualStyle="{StaticResource SlicerNameTextBoxStyle}">
                            <telerik:ChartSeriesLabelDefinition.Template>
                                <DataTemplate>
                                    <StackPanel>
                                        <TextBlock Text="{Binding DataItem.DisplayName}"
                                                   HorizontalAlignment="Center"
                                                   Style="{StaticResource SlicerNameTextBoxStyle}"
                                                   MouseDown="SlicerPieLabel_OnMouseDown"/>
                                    </StackPanel>
                                </DataTemplate>
                            </telerik:ChartSeriesLabelDefinition.Template>
                        </telerik:ChartSeriesLabelDefinition>
                    </telerik:PieSeries.LabelDefinitions>

     

    As you can see, the problem is that I can't connect the pie slice and label highlight together, and I duplicated the pie selection changed event.

    Can you help me to provide a better solution here?

    Thanks,

    Mingxue

     

  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 13 May Link to this post

    Hi Mingxue,

    If you need hover interactivity, I suggest you do not use this custom approach you have at the moment. You can use the HoverMode property of the chart and legend. I am attaching a small project to demonstrate it.

    Let us know if you need more information.

    Regards,
    Petar Marchev
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Mingxue
    Mingxue avatar
    25 posts
    Member since:
    Apr 2016

    Posted 13 May in reply to Petar Marchev Link to this post

    Thanks for the sample code, it does help in some way, but there are still some questions regarding this approach with legend control:

     

    1. How to allow user to select from the legend control then?

    2. The legend control only display color and percentage, but not the label of my pie. For example, the palette has 8 colors, but I have 10 items in my pie chart, and same color would be reused for different slices. Even though the fade out works, but it would be better to see what item I can choose directly from Legend control by looking at the name instead of matching the color and fading out.

     

    Thanks.

  5. Answer
    Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 16 May Link to this post

    Hello Mingxue,

    1. How to allow user to select from the legend control then?
    The RadLegend does not currently support selection, so you need to implement this yourself. You can handle the MouseDown event of the RadLegend or LegendItemControl and get the DataContext of the clicked item. You should be able to get the corresponding DataPoint from the LegendItem and change its IsSelected property.

    2. The legend control only display color and percentage, but not the label of my pie.
    You can find information in out online documentation about how you can control the content of the item labels. You can also see this in many of our qsf examples and sdk demos.


    3. For example, the palette has 8 colors, but I have 10 items in my pie chart, and same color would be reused for different slices.
    You can consider creating a custom palette.

    4. Even though the fade out works, but it would be better to see what item I can choose directly from Legend control by looking at the name instead of matching the color and fading out.
    I am not sure what you need here. In general, we suggest not to have a legend when using a pie chart, because you can place all the needed information inside the pie slice label.

    Regards,
    Petar Marchev
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Carlos
    Carlos avatar
    4 posts
    Member since:
    Dec 2015

    Posted 27 May Link to this post

    Hi, is there a way to implement this hover mode when I select the datapoint instead of "hover" on it?

     

    Thanks

  7. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 30 May Link to this post

    Hello,

    I don't think that I understand what you need here. Hover interactivity and selection indication are two different things. One changes the appearance of the item when the mouse enters the item, and the other modifies its appearance when the item is selected, and sometimes selection is done via mouse. Hover interactivity usually modifies the opacity of the element, or the other elements in order to bring focus to the hovered item, where selection usually changes the color of the datapoint visual. We have this built-in. You can set a SelectionPalette for the chart and selected items will automatically get the color from this palette.

    Regards,
    Petar Marchev
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Carlos
    Carlos avatar
    4 posts
    Member since:
    Dec 2015

    Posted 30 May in reply to Petar Marchev Link to this post

    Hi,

    I know I can change colors on selection based on a Palette. What I need is when I select a slice, every slice on the chart set his opacity down except for the one selected. That's the same behaviour of the hover and since it's a built in resource I thought there was a way to use the same behaviour but when I select the the slice, not when I hover on it. 

     

    Thanks

  9. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 31 May Link to this post

    Hello Carlos,

    Unfortunately, there is no built-in mechanism to achieve such a behavior. You will need to implement it yourself.

    Regards,
    Petar Marchev
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for WPF is Visual Studio 2017 Ready