Timespan based zoom level

7 posts, 0 answers
  1. Flemming
    Flemming avatar
    12 posts
    Member since:
    Aug 2016

    Posted 12 Sep Link to this post

    I have a RadCartesianChart with a DateTimeContinuousAxis. 

    Is it possible to specify a zoom level based on a timespan? 

    So that I only see 10 minutes of the chart - even when adding more data. And off course being able to pan through the rest of the chart. 

    /Flemming Rosenbrandt

  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 14 Sep Link to this post

    Hi Flemming,

    The chart provides several properties that define the zoom level and pan offset.
    • HorizontalZoomRangeStart
    • HorizontalZoomRangeEnd
    • VerticalZoomRangeStart
    • VerticalZoomRangeEnd

    The properties work with relative values in the range between 0 and 1 which represent the range of the corresponding axis.

    <telerik:RadCartesianChart HorizontalZoomRangeStart="0.2" HorizontalZoomRangeEnd="0.6">

    So, based on the range of the date time axis you can calculate what percent is the timespan that you want to display and where you want to display it. And then you can set the zoom range start/end properties.

    Please let me know if you need any further assistance on the matter.

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Flemming
    Flemming avatar
    12 posts
    Member since:
    Aug 2016

    Posted 16 Sep in reply to Martin Link to this post

    That is the way I do it now – recalculating the zoom level every time I add data (every second).

    But when I add the data – the labels on the time axis starts slowly drifting to the left. Sometimes the last label to the right disappears.

    It is not a nice user experience. I am sure my zoom level calculations are correct – the actual range displayed is fine. 

    MajorStepUnit = Second 
    LabelInterval = 2 
    SmartLabelsMode= None

    If SmartLabelsMode = SmartStep - the labels and ticks jumps around. 

    /Flemming 

  5. Flemming
    Flemming avatar
    12 posts
    Member since:
    Aug 2016

    Posted 16 Sep in reply to Martin Link to this post

    I can send you a video of the drift effect?

    /Flemming

  6. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 20 Sep Link to this post

    Hello Flemming,

    You mention that "when I add the data – the labels on the time axis starts slowly drifting to the left". I suppose that you also remove data at the beginning of the collection. Is this right? If yes - this is the reason the labels drift, because the actual Minimum of the axis changes. If not, do you perhaps mean that the labels stay approximately the same position but bounce to the left and right with 1 pixel? If so, then this is the result of double rounding, because the axis range is now different and positions in relative values are different and the rounding of double calculations is inevitable.

    I am attaching a small project that demonstrates one approach to get a steady (static) view when data is live (dynamic). I hope you understand that the chartview was not created with the idea to solve such problems and this is why this approach demands some manual work. In the project you will see live charts that you can pan and zoom. When you start panning, the chart stops from getting new data, thus the view is steady. The slider bounces back and forth a little, again due to double rounding. You will see that the pan-zoom logic is not inside the chart, but implemented manually, so that this static view can be achieved. Also not all the data is being passed to the chart, but it is being filtered when panning or zooming.

    Let us know if you need more information.

    Regards,
    Petar Marchev
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  7. Flemming
    Flemming avatar
    12 posts
    Member since:
    Aug 2016

    Posted 22 Sep in reply to Petar Marchev Link to this post

    My scenario is that I read data from a hardware unit – once every second. I have up to six chart series plotted on vertical linear axis and a horizontal datetime axis.

    So I do not remove data at the start – only adding at the end. I want to have a fixed window of maybe 10 minutes – and I want to show the latest 10 minutes of data – until the user starts scrolling. I recalculate the window every time I add data.

    Here is a link to a video:

    https://1drv.ms/v/s!AhCDKZ7DuHd8mr9T4G69E98T29TNwA

    /Flemming

  8. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 26 Sep Link to this post

    Hi Flemming,

    The results that you see in the video are due to the constantly changing data range. When the data range changes, the axis recalculates its range and with a new range comes a new automatic step. This is the reason the labels change.

    There is no way that you will add more data to the chart (hence change the range) and the labels to keep displaying the same values as before. If this happened (and it actually can) then the labels will get cluttered in a while and start overlapping each other. You can test this by setting a manual MajorStep and MajorStepUnit. Set the label interval to 1 so that you can see what happens.

    I hope I was able to explain well what is going on and why. Now you see that when the range changes, it is inevitable for the axis to modify its range (thus modify the labels).

    If you can think of a strategy to resolve this, or if you have some output in mind, then perhaps we can suggest a way to achieve this. Until then I suggest you examine the project I sent you earlier as it deals with the dynamic/static case in a very representative way. Let us know if you need further assistance.

    Regards,
    Petar Marchev
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for WPF is Visual Studio 2017 Ready