PabOffset - Zoom

5 posts, 0 answers
  1. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 28 Mar 2012 Link to this post

    I have a Chart with some LineSeries and a DateTimeContinousAxis.

    Depending on the device orientation I want to display (lets say) 8 (Portrait) or 14 (Landscape) Days on the grid.
    So I need to set a ZoomLevel and a PanOffset according to the data I get.
    -- I need the pan offset since I want to display the last datapoints at startup (data loading).

    This data sometimes contains just 2 days - and sometimes several months.

    Is there an easy way to achieve this?

    Manfred
  2. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 30 Mar 2012 Link to this post

    Just to be a bit more precise.
    What I want is:
    Display XXX Days - or in other words 1 Day per YYY pixels.
    -- I set a constant for YYY.
    Scroll to the end if zoom / Pan is needed.

    Manfred
  3. DevCraft banner
  4. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 02 Apr 2012 Link to this post

    Hello Manfred,

    Thank you for writing.
    Since your day count per orientation ratio is 14 / 8. When you rotate to display 8 days, you need to set the zoom factor of the chart to something around 1.75 (14 / 8). I found out that 1.8 is best on the test app that I am working with (see attachment). Then you just need to set the pan offset like this:

    double panOffset = this.chart.RenderSize.Width - this.chart.RenderSize.Width * 1.8;
    this.chart.PanOffset = new Point(panOffset, 0);

    Also, please keep in mind that RadChart currently does not process points that are outside the chart plot area, in this case, points that are outside the min/max range of the date time axis. You need to filter your data points so that all of the points in the filtered subset fit inside the min/max dates. Otherwise you will get undefined behavior.

    Please write again if you need further assistance.

    Regards,
    Victor
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  5. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 18 Apr 2012 Link to this post

    Hi Victor,

    thank you for your answer and sorry for my delay.
    Your answer solves landscape / portrait but not the general problem.

    What I need is some kind of formula to calculate a "fixed day width".
    I found out (just a number) that 10 days fit on my chart.
    So assume I have data with just two days.
    This will (of course) fit on the chart - so I have a zoom of One an no panning.

    Later I have 20 days of data.
    Now I have to zoom to 0.5 in X so that I'll see those 20 items in a way that 10 items are on my chart area.
    With 40 days this will be 0.25 and so forth.
    Panning (in these cases) should be set so that the last points are visible.

    To be more precise - I have the offset in pixels per day.
    I can  get these values just by checking out the results with test data.

    My need is a formula to calculate the zoom depending on the data I have.

    Manfred
  6. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 23 Apr 2012 Link to this post

    Hi Manfred,

    From what I understand you need to include the size of the data set in the formula since it is dynamic. That is, it can be 14 data items or 100 and therefore the 14/8 ration becomes invalid? If this is the case you can try this:

    const double dayCount = 10;
    public MainPage()
    {
        InitializeComponent();
     
        List<MyData> data = new List<MyData>();
        DateTime day = new DateTime(2012, 2, 1);
        for (int i = 0; i < 50; ++i)
        {
            data.Add(new MyData() { Value = i, Date = day.AddDays(i) });
        }
     
        this.chart.Series[0].ItemsSource = data;
     
        this.Loaded += (sender, args) =>
            {
                double zoomFactor = data.Count / dayCount;
                double panOffset = this.chart.RenderSize.Width - this.chart.RenderSize.Width * zoomFactor;
                this.chart.Zoom = new Size(zoomFactor, 1);
                this.chart.PanOffset = new Point(panOffset, 0);
            };
    }
    Just change the ratio to be data.Count / dayCount. This way it will always display 10 days.
    If the zoomFactor is less than 1 you should simply set zoom and pan to 0 and return from the handler.

    Please write again if you have other questions.

    Greetings,
    Victor
    the Telerik team

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

Back to Top
DevCraft banner