Scrollable DateTimeContinuousAxis on Candlestick Chart

[Mike]

Hi,

I want to use the Pan and Zoom features of the RadChartView with a continuous date time axis and a candlestick chart.

I'd like to have only a fixed number of data points visible. When more data points are shown they should be scrolling out of the view on the left or right hand side. It's all working nicely once I zoom into the chart - with the exception, that the RadChartView always tries to fit all data points into the view when the horizontal zoom factor is 1. The result is, that the data points's width is influenced by the number of data points. Regardless of the zoom factor.

Is there a way to enforce a fixed with of the Olhc data points shown on the chart - regardless of the number of data points?

Regards,

Mike 

[Hristo]

Hello Mike,

Thank you for writing.

Indeed, the behavior by of RadChartView is to fit all of its data points in the view. The ChartPanZoomController handles a scenario in which two many data points are simultaneously visible and the end users can zoom in and zoom out.

The desired behavior is, however, achievable. You would need to zoom the chart initially to an appropriate value so that the desired data points count is visible. As I understand, you would also be adding items dynamically so you would need to zoom in every time you add a new item, so that the count of the visible data points remains the same. Please see below my sample implementation:

public partial class Form1 : Form
{
    public const int VisibleDataPoints = 5;

    private OhlcSeries ohlcSeries;
    private double offsetX;
    private double offsetY;
    private bool shouldUpdatePan;
    private double scaleFactor;

    public Form1()
    {
        InitializeComponent();

        ChartPanZoomController panZoomController = new ChartPanZoomController();
        panZoomController.PanZoomMode = ChartPanZoomMode.Horizontal;
        this.radChartView1.Controllers.Add(panZoomController);

        ohlcSeries = new OhlcSeries();
        for (int i = 0; i < 15; i++)
        {
            ohlcSeries.DataPoints.Add(new OhlcDataPoint(i + 10, i + 11, i + 7, i + 8, DateTime.Now.AddDays(i)));
        }

        this.radChartView1.Series.Add(ohlcSeries);

        this.radChartView1.View.ZoomChanging += View_ZoomChanging;
        this.radChartView1.View.PanChanging += View_PanChanging;

        double initialScaleFactor = this.ohlcSeries.DataPoints.Count / VisibleDataPoints;
        this.radChartView1.Zoom(initialScaleFactor, 1);
    }


    private void View_PanChanging(object sender, PanChangingEventArgs e)
    {
        if (!this.shouldUpdatePan)
        {
            this.offsetX = e.NewOffsetX;
            this.offsetY = e.NewOffsetY;
            this.shouldUpdatePan = false;
        }
    }

    private void View_ZoomChanging(object sender, ZoomChangingEventArgs e)
    {
        scaleFactor = e.NewHorizontalScaleFactor;
    }

    private void radButton1_Click(object sender, EventArgs e)
    {
        int count = this.ohlcSeries.DataPoints.Count;
        this.ohlcSeries.DataPoints.Add(new OhlcDataPoint(count + 10, count + 11, count + 7, count + 8, DateTime.Now.AddDays(count)));

        this.shouldUpdatePan = true;
        this.radChartView1.Zoom(scaleFactor + scaleFactor / count, 1);
        this.radChartView1.Pan(offsetX, offsetY);
        this.shouldUpdatePan = false;
    }
}

I am also sending you a short video showing the result on my end.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik