Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make DataVisualization Chart object zoom and scrollable by dragging the scroll bar

I'm using a System.Windows.Forms.DataVisualization.Charting.Chart control, and have the ChartArea's AxisX and Y both set Zoomable to true. When chart is zoomed in, I see the scrollbar, but cannot drag it. Is it possible to drag the scrollbar, and have the chart display move as I am dragging the scrollbar button? I want to make it intuitive and interactive for the user. Thanks!

like image 924
Jason Avatar asked May 20 '10 18:05

Jason


1 Answers

In order to zoom in and out of the chart i am using MouseWheel event. Solution which i will show below is far from perfect but it works, at least for me :).

  1. Values of maxChangeRange and minChangeRange should be calculated for each data series (21 and -1 are values I have used in my project). Additionally it is assumed that both axes have similar value range in case if they are different some kind of scaling needs to be added for one of them.

  2. Mouse positions received from MouseEventArgs (e.X and e.Y) are positions of mouse inside the chart control not inside The Chart :) so this positional zoom feature is kind of faulty.

  3. In order to make it work you need to have chart control with chart area and axes defined

  4. If axis labels auto fit is enabled chart may be a little "jumpy" while zooming.

  5. I am beginner of C# and winforms world so pls bear it in mind that this is probably not the best solution.

    // Actual total zoom value
    int deltaScrollTotal;
    private void chart_MouseWheel(object sender, MouseEventArgs e)
    {
        int maxChangeRange = 21;
        int minChangeRange = -1;
    
        int deltaScroll = e.Delta / Math.Abs(e.Delta);
        deltaScrollTotal += deltaScrollTotal + deltaScroll > minChangeRange
                         && deltaScrollTotal + deltaScroll < maxChangeRange
                          ? deltaScroll : 0;
        // Additional calculation in order to obtain pseudo
        // "positional zoom" feature
        double minXScale = (double)e.X / (double)chart.Width;
        double maxXScale = 1 - minXScale;
        double minYScale = (double)e.Y / (double)chart.Height;
        double maxYScale = 1 - minYScale;
    
        // Max and min values into which axis need to be scaled/zoomed
        double maxX = chart.ChartAreas[0].AxisX.Maximum 
                    - deltaScrollTotal * maxXScale;
        double minX = chart.ChartAreas[0].AxisX.Minimum 
                    + deltaScrollTotal * minXScale;
        double maxY = chart.ChartAreas[0].AxisY.Maximum 
                    - deltaScrollTotal * minYScale;
        double minY = chart.ChartAreas[0].AxisY.Minimum 
                    + deltaScrollTotal * maxYScale;
    
        chart.ChartAreas[0].AxisX.ScaleView.Zoom( minX, maxX);
        chart.ChartAreas[0].AxisY.ScaleView.Zoom( minY, maxY);
    }
    

This event needs to be attached to the chart control:

    chart.MouseWheel += new MouseEventHandler(chart_MouseWheel);
like image 127
Archibald Avatar answered Sep 27 '22 15:09

Archibald