How can I drag the "crosshair" series?

4 posts, 0 answers
  1. Auvo
    Auvo avatar
    34 posts
    Member since:
    Jul 2011

    Posted 21 Dec 2011 Link to this post

    Hi,

    I have added a crosshair(which is actually a line serie) to RadChart and currently I have functionality that crosshair follows the mouse cursor when I move cursor over the chart area, that seems to work ok.

    But now I need to change that functionality. Instead of following the mouse cursor I need to "drag" the crosshair and then move it to another location on the chart.

    Any idea how can I do that?

    I have trying to add onDrag event to crosshair series but for some reason I cannot do that?!
  2. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 23 Dec 2011 Link to this post

    Hello Auvo,

    I think you can keep the logic for moving the crosshair currently and add only 2 event handlers - 1 for MouseLeftButtonDown and 1 for MouseLeftButtonUp. You can raise a flag on mouse down that will allow the logic on MouseMove to work like before.

    If this approach doesn't work for you will it be possible for your to share more implementation details regarding this crosshair. A sample project can help us a lot in understanding you scenario.

    All the best,
    Yavor
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Auvo
    Auvo avatar
    34 posts
    Member since:
    Jul 2011

    Posted 23 Dec 2011 Link to this post

    Hello,

    First I tried to add both MouseLeftButtonDown and - up event to crosshairline but it not catch these events (it not doing anything), I don't no why?

    If I add those events to the chart area then I catch the events BUT in this solution when I "drag" the cursorline in another position the chart area is also zoomed in same time!?

    What I want is when I move mouse cursor top of the cursorline, cursor icon change and when I press "mouseleftdown", I can drag and move the cursor line until I release the mouse button. During this cursorline moving, chart area is not allowed to zoom.

    Here are some snapshot of the current code:
    private CustomGridLine cursorLine = new CustomGridLine();
    trendChart.DefaultView.ChartLegend.Header = "";
    trendChart.DefaultView.ChartArea.EnableAnimations = false;
    trendChart.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Collapsed;
    trendChart.DefaultView.ChartArea.AxisX.IsDateTime = true;
    trendChart.DefaultView.ChartArea.AxisX.AutoRange = false;
    trendChart.DefaultView.ChartArea.AxisX.LabelStep = 2;
    trendChart.DefaultView.ChartArea.Margin = new Thickness(0, 0, 10, 0);
    trendChart.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "HH:mm:ss";
    trendChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;
    trendChart.MouseMove += new MouseEventHandler(trendChart_MouseMove);
    trendChart.MouseEnter += new MouseEventHandler(trendChart_MouseEnter);
    trendChart.MouseLeave += new MouseEventHandler(trendChart_MouseLeave);

    cursorLine.Stroke = new SolidColorBrush(Colors.Red);
    cursorLine.StrokeThickness = 2;

    trendChart.DefaultView.ChartArea.Annotations.Add(cursorLine);
    trendChart.DefaultView.ChartArea.AxisX.IsDateTime = true;

            void trendChart_MouseMove(object sender, MouseEventArgs e)
            {
                try
                {
                    return;
                    var plotAreaPanel = trendChart.DefaultView.ChartArea.ChildrenOfType<ClipPanel>().FirstOrDefault();
                    var position = e.GetPosition(plotAreaPanel);
      
                    var x = trendChart.DefaultView.ChartArea.AxisX.ConvertPhysicalUnitsToData(position.X);
                    var y = trendChart.DefaultView.ChartArea.AxisY.ConvertPhysicalUnitsToData(position.Y);
      
                    if (trendChart.DefaultView.ChartArea.HasItems)
                    {
                        cursorLine.XIntercept = x;
    .
    .
    .

    Regards,
    Auvo
  5. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 28 Dec 2011 Link to this post

    Hi,

    The sample project attached demonstrates how to drag the crosshair as my colleague Yavor mentioned using a boolean variable that controls when MouseMove event should be fired.
    When you have enabled zooming & scrolling on your chart area it automatically changes its cursor to Hand to hint the user he can zoom using the selection rectangle. You can disable this selection rectangle by finding the DragZoomLayerControl, responsible for zooming & scrolling functionality, and disable its interactivity like this:

    var dragZoomLayer = RadChart1.ChildrenOfType<DragZoomLayerControl>().Single();
    dragZoomLayer.IsInteractive = false; // disable selection rectangle

    It will be hard for you to manually position the cursor on the crossing point of the crosshair to drag it. I suggest that you remove your ZoomScroll functionality so that your crosshair can be dragged whenever you click on the exact crossing point or anywhere on the Plot Area.

    Regards,
    Evgenia
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top