SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy. We also have a tag=SciChart on Stackoverflow.com where you can earn rep for your questions!

Please note: SciChart team will only answer questions from customers with active support subscriptions. Expired support questions will be ignored. If your support status shows incorrectly, contact us and we will be glad to help.

0
0

Howdy! I’m Ross, and I’ve been trying out SciChart as a replacement for Dynamic Data Display in a program I’m working on. So far, SciChart has better documentation, support, and features, which is great. Once I’m at the level where I was with the previous tool, this will likely be the one I purchase. But there was a good behavior I liked in D3 that I’m struggling to implement in SciChart.

I want the scroll wheel behavior to only zoom on a single axis when the mouse is over that axis. So if I move my mouse over the x-axis and scroll, I want it to only change that axis’ space.

So, for example, “Drawing a line graph” here: http://research.microsoft.com/en-us/um/cambridge/projects/ddd/d3isdk/

I think the key is my inability to find the region that the axes occupy. I know I can trigger on entering or leaving the region to change behavior from there. Is there an easy way to find these values?

If this is in some example I haven’t seen or has been answered before, I’d be appreciative of a link, as well! Thanks!

  • You must to post comments
4
1

Got it working! I ended up using some different code to get the job done, which I’ll share here:

        // Custom mouse wheel usage 
        public override void OnModifierMouseWheel(ModifierMouseArgs e)
        {
            // Get region of axis
            Rect XAxisBounds = XAxis.GetBoundsRelativeTo(RootGrid);
            Rect YAxisBounds = YAxis.GetBoundsRelativeTo(RootGrid);

            // Only zoom in that axis if mouse over axis
            if      (XAxisBounds.Contains(e.MousePoint))
            {
                // If zooming in
                if      (e.Delta > 0)
                    XAxis.ZoomBy(-0.1, -0.1);
                // If zooming out
                else if (e.Delta < 0)
                    XAxis.ZoomBy( 0.1,  0.1);

                // Now don't do anything else
                e.Handled = true;
                return;
            }
            else if (YAxisBounds.Contains(e.MousePoint))
            {
                if      (e.Delta > 0)
                    YAxis.ZoomBy(-0.1, -0.1);
                else if (e.Delta < 0)
                    YAxis.ZoomBy( 0.1,  0.1);

                e.Handled = true;
                return;
            }

            // Otherwise, operate normally
            base.OnModifierMouseWheel(e);
        }

Your initial points and several key methods helped out a lot! I also simplified some parts I didn’t need. Thanks!

  • Andrew
    Cool, thanks for sharing your modifier code! Best regards, Andrew
  • You must to post comments
2
0

Hi Ross,

Nice to meet you! Glad you are finding SciChart good so far đŸ™‚

Did you know we have a selection of ChartModifiers which add interactivity to the chart? Also we have an API which you can use to create your own modifiers.

Take a look at the YAxisDragModifier / XAxisDragModifier. There is an online demo which shows how to use these here. Click on the ‘Pan’ button and drag the axes.

Ok so how to extend these to add mouse-wheel behaviour? Well you would need to create a class which derives from ChartModifierBase. We have methods to override, including OnModifierMouseWheel. To detect if the mouse is over an axis, we use this code:

var axisBounds = axis.GetBoundsRelativeTo(RootGrid); // RootGrid is SciChartSurface.MainGrid, or ChartModifierBase.RootGrid

// Exit if the mouse down was outside the bounds                        
if (!axisBounds.Contains(e.MousePoint))
   return;

Next, to pan (scroll) a specific axis, we use this API call

/// <summary>
        /// Peforms a pan on the assocaited <see cref="AxisBase" />. The pan is considered to be a drag from <paramref name="currentPoint" /> to <paramref name="lastPoint" />
        /// </summary>
        /// <param name="currentPoint">The current mouse point</param>
        /// <param name="lastPoint">The last mouse point</param>
        protected void PerformPan(Point currentPoint, Point lastPoint)
        {
            string axisIdToFind = "DefaultAxisId"; // Adjust as necessary
            var axis = GetYAxis(axisIdToFind); 

            var xDelta = currentPoint.X - lastPoint.X;
            var yDelta = lastPoint.Y - currentPoint.Y;

            axis.Scroll(axis.IsHorizontalAxis ? -xDelta : yDelta, ClipMode.None);
        }

Now you will have to fake currentPoint / lastPoint. These are pixels assuming the operation is a mouse-drag. In fact you could simplify this a lot by passing in +/- 10 to the axis.Scroll method.

I hope this helps! If you need further help creating a custom modifier just post back đŸ™‚

Best regards,
Andrew

  • boss1000
    Thanks a lot for the reply. I'll hopefully get to trying this out soon. I'm familiar with ChartModifiers since what I'm displaying are actually almost exclusively annotations. This tutorial was crucial: http://www.scichart.com/databinding-annotations-with-mvvm/ From looking at this for a bit, I assume what we're doing is co-opting the panning function to zoom.
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.