Alex
Alex

Reputation: 1692

Horizontal Scroll Bar in Oxyplot WPF

I'm trying to implement a utility for showing throughput over time in a system, and am using Oxyplot to visualise the data.

Currently, zoom and pan are working as expected, but I would like some visual indication to the user which clearly shows whether the graph can be zoomed or panned.

After ditching the idea of using a scroll bar (being neither able to accurately get the position of the visible section of the graph, nor correctly position the thumb of the scroll bar releative to the chart), I have settled on using icons to show whether there is any data on the chart which is hidden to the left or rightmost side.

I would like these icons to work as buttons which allow the user to page left and right on the graph, however as with all things OxyPlot related, the implementation is far more complex than it first seems.

I'm using the WPF implementation, which uses a ViewModel representing the overall data set, with each series item represented by its own model. This effectively renders almost every tutorial useless as the WPF implementation is significantly different to the basic OxyPlot package.

Currently, the code behind in the view handles the click on the page left/right buttons. I cannot put this in my ViewModel as it must interract directly with the PlotControl object.

 private void btnPageRight_Click(object sender, RoutedEventArgs e) {
        CategoryAxis axis = (CategoryAxis)PlotControl.ActualModel.Axes[0];
        double xAxisMin = axis.ActualMinimum;
        double xAxisMax = axis.ActualMaximum;

        double visibleSpan = xAxisMax - xAxisMin;
        double newMinOffset = xAxisMax + visibleSpan;

        PlotControl.Axes[0].Minimum = newMinOffset;
        PlotControl.Axes[0].Maximum = newMinOffset + visibleSpan;

        PlotControl.ActualModel.InvalidatePlot(true);

    }

As it stands, the above code throws no errors, but it does not work either.

If anybody can advise a possible way to make OxyPlot scroll to a given position using just code behind, I would be grateful. As a last resort, I have pondered trying to simulate a mouse drag event to make this finicky beast behave.

I find the need to work around the problem in that way quite offensive, but desparation leads to odd solutions...

Upvotes: 2

Views: 2256

Answers (1)

Alex
Alex

Reputation: 1692

In case anybody else runs into this issue, the following snippet will scroll the graph in pages based on the number of columns visible on the graph at the time.

The snippet takes the number of visible columns as the viewport, and will move the visible area by the viewport size.

Although this applies to the WPF implementation, the only way I could find to make this work was to run this method from the code behind in the View containing the OxyPlot chart.

This should work correctly regardless of the zoom amount at the time.

The CategoryAxis reference must be obtained from the ActualModel as the WPF.Axis does not provide the ActualMinumum and ActualMaximum needed to calculate the viewable area.

The visibleSpan in this case represents the number of columns, with panStep denoting the amount to pan by in pixels.

  private void ScrollInPages() {

        //To zoom on the X axis.
        CategoryAxis axis = (CategoryAxis)PlotControl.ActualModel.Axes[0];

        double visibleSpan = axis.ActualMaximum - axis.ActualMinimum;
        double panStep = 0;

        //Scrolling the chart - comment out as appropriate

        //Scroll right one page
        panStep = axis.Transform(0 - (axis.Offset + visibleSpan));

        //Scroll left one page
        panStep = axis.Transform(axis.Offset + visibleSpan);

        axis.Pan(panStep);
        PlotControl.InvalidateFlag++;
    }

Upvotes: 1

Related Questions