What is the best way to give users the ability to select an area over the x-axis and show this selection synchronized in all charts?

Question

Hello Syncfusion Support!We have a WPF dashboard with several charts on it. All charts are based on the same x-value (time).I'm trying to figure out how to give users the ability to select an area over the x-axis of one of the sfcharts and show this selection synchronized in all charts while the user still moves the mouse. It must be irrelevant which of the various charts he wants to use for this!For this experience, I don't want zooming or anything else. Only to show the selection in all sfcharts.Something like a combination of the "selectionzooming" experience (without zooming) and a stripline or annotation. We want to give the user the ability to point out the selected area on the x-axis. Last but not least, the selection has to oriented on the real x-values and not on an "artificial" coordinate because we continuously push new values to the charts and we use the great auto-scroll feature. And, of course, the selection has to scroll too. I hope I could explain the necessary user experience in enough depth. Thank you!!Sascha

Muneesh Kumar G · Answer

Hi Sascha, 
 
Thanks for using Syncfusion products.  
 
We have analyzed your query and we have achieved your requirement by using RectangleAnnotation with dynamic position changing as per the below code snippet.  
 
Code snippet 





public MainWindow() 
        { 
            InitializeComponent(); 
            ViewModel viewModel = new ViewModel(); 
 
            for (int i = 0; i < 5; i++) 
            { 
                SfChart chart = new SfChart(); 
                chart.Height = 200; 
                chart.Width = 300; 
                chart.Annotations.Add(new RectangleAnnotation() 
                { 
                    CoordinateUnit=CoordinateUnit.Axis 
                }); 
                .. 
 
                chart.MouseMove += Chart_MouseMove; 
                chart.MouseDown += Chart_MouseDown; 
                chart.MouseUp += Chart_MouseUp; 
 
                chart.Behaviors.Add(new ChartZoomPanBehavior()); 
 
                panel.Children.Add(chart); 
            } 
        } 
 
        private void Chart_MouseUp(object sender, MouseButtonEventArgs e) 
        { 
            isMouseDown = false; 
        } 
 
        bool isMouseDown; 
        private void Chart_MouseDown(object sender, MouseButtonEventArgs e) 
        { 
            UpdateAnnotation(true, sender, e); 
 
            isMouseDown = true; 
        } 
 
        private void Chart_MouseMove(object sender, MouseEventArgs e) 
        { 
            if (!isMouseDown) return; 
 
            UpdateAnnotation(false, sender, e); 
        } 
 
        private void UpdateAnnotation(bool isMouseDown, object sender, MouseEventArgs e) 
        { 
            var chart = sender as SfChart; 
            Point pt = e.GetPosition(chart); 
            pt = new Point(pt.X - chart.SeriesClipRect.Left - chart.Margin.Left, 
                pt.Y - chart.SeriesClipRect.Top - chart.Margin.Top); 
 
            foreach (SfChart item in panel.Children) 
            { 
                var x = item.PointToValue(item.PrimaryAxis, pt); 
                var y = item.PointToValue(item.SecondaryAxis, pt); 
 
                RectangleAnnotation annotation = item.Annotations[0] as RectangleAnnotation; 
 
                if(isMouseDown) 
                { 
                    annotation.X1 = x; 
                    annotation.Y1 = y; 
                } 
 
                annotation.X2 = x; 
                annotation.Y2 = y; 
            } 
        }  
 
We have prepared sample based on this, please find the sample from the following location.  
 
Sample: http://www.syncfusion.com/downloads/support/forum/140600/ze/WPF_Sample-1661420120.zip 
 
We have used CoordinateUnit as Axis in annotation, so annotation binds with the axis position. It will scroll according to the axis position in zooming and scrolling.  
 
UG : https://help.syncfusion.com/wpf/sfchart/annotations#annotation-based-on-axis 
 
Please let us know if you have any queries.  
 
Regards, 
Muneesh Kumar G

Sascha · Answer

Thank you very much for your quick support!

Your example has helped me to move forward!

I have one more question. Would it be possible to open a context menu within an annotation? This would allow users to select an action for the selected area.

Thank you very much

Sascha

Muneesh Kumar G · Answer

Hi Sascha,  
 
We have analyzed requirement and you can achieve this by setting ContextMenu for annotation rendered element as per the below code snippet.    
 
Code snippet [C#]:    




                RectangleAnnotation rectangleAnnotation = new RectangleAnnotation() 
                { 
                    CoordinateUnit = CoordinateUnit.Axis 
                }; 
 
                ContextMenu contextMenu = new ContextMenu(); 
                contextMenu.Items.Add("Item 1"); 
                contextMenu.Items.Add("Item 2"); 
 
                (rectangleAnnotation.GetRenderedAnnotation() as FrameworkElement).ContextMenu = contextMenu; 
 
                chart.Annotations.Add(rectangleAnnotation); 
 
While using context menu in your application change annotation formation in left mouse click action as per the below code snippet.  
 
Code snippet 




                chart.MouseMove += Chart_MouseMove; 
                chart.MouseLeftButtonDown += Chart_MouseDown; 
                chart.MouseLeftButtonUp += Chart_MouseUp; 
 
                panel.Children.Add(chart); 
 
 
We have modified our sample based on this, please find the sample from the following location.  
 
Sample : http://www.syncfusion.com/downloads/support/forum/140600/ze/WPF_Sample1393897326.zip 
 
Please let us know if you have any queries.  
 
Regards, 
Muneesh Kumar G.

Sascha · Answer

Hello Muneesh!That's exactly the behavior we need for the user experience. Thank you very much! Regards, Sascha

Muneesh Kumar G · Answer

Hi Sascha,   
 
Thanks for the update. 
  
We are glad to know that the given solution works. Please let us know if you need any further assistance. 
 
Thanks, 
Muneesh Kumar G.