ViewportWidth issues

2 posts, 0 answers
  1. Borislav
    Borislav avatar
    21 posts
    Member since:
    Nov 2016

    Posted 30 Oct 2017 Link to this post

    I used this code to get the points in the visible x range of the chart (I do not need the check on the y axis):

    private bool CheckIfDataPointIsInTheAvaialableXRange(IChartView view, CategoricalDataPoint cdp)
    {
          RadRect viewport = new RadRect(-view.PlotOriginX, -view.PlotOriginY, view.ViewportWidth, view.ViewportHeight);
          return (cdp.LayoutSlot.X >= viewport.X) && (cdp.LayoutSlot.X <= (viewport.X + viewport.Width));
    }
    However, I end up getting couple more points added to the end (128 instead of 122 points). So, I guess it has something to do with the ViewportWidth. Can you tell me what exactly is ViewportWidth? I thought I had this issue because of the legend, but I get unwanted points even when legend is not shown. How to be certain what width to take to get the visible width of the chart? By visible area of the chart I mean the area that contain values that are greater than 0 on both x and y axes, meaning only the first quadrant of the Cartesian system. If the chart title and labels on the chart interval values (eg. 0, 50, 100) are also included in the ViewportWidth, then how to subtract them from the ViewportWidth?
  2.
  3. Hristo
    Admin
    Hristo avatar
    1522 posts

    Posted 01 Nov 2017 Link to this post

    Hi Boris,

    The ViewPortWidth is the actual width which is used by the chart to paint the data points.It depends on the real size of the chart and it will remain constant even if you zoom or pan the control. The zoom and pan affect the PlotOriginX and PlotOriginY properties of the view and depending on their values the view port is translated to the left, top, bottom or right. Nevertheless, the width would remain constant unless you resize the control or for example remove the margin of the view element: 
    this.radChartView1.ChartElement.View.Margin = new Padding(0);

    Regarding your actual setup please also consider adding the layout slot which is occupied vertical axis. Its location and size will also need to be considered when checking for a particular data point if it is visible. The width of the axis is very small, by default, it is only 21 px so until now you have missed some border cases of having data points very close to the axis but outside of the calculated viewport. You can try changing your method this way: 
    private bool CheckIfDataPointIsVisible(IChartView view, CategoricalDataPoint cdp)
    {
        double width = ((ChartSeries)cdp.Presenter).Axes[1].Model.LayoutSlot.Width;
        RadRect viewport = new RadRect(-view.PlotOriginX + width, -view.PlotOriginY, view.ViewportWidth - width, view.ViewportHeight);
        return (cdp.LayoutSlot.X >= viewport.X) && (cdp.LayoutSlot.X <= (viewport.X + viewport.Width));
     
    }

    In case you need further assistance please set up a sample project according to your local setup and send it over.

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

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top