Zoom window shifted out of position

Thread is closed for posting
8 posts, 0 answers
  1. dingjing
    dingjing avatar
    42 posts
    Member since:
    Jul 2007

    Posted 07 Jul 2010 Link to this post

    I have a point chart with ScrollMode=XOnly. After I drag a rectangle on the chart, the zoom window doesn't match the position of the rectangle. It is shifted left or right.

    Here is the aspx page.
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="LabChart.aspx.cs" Culture="en-US" Inherits="IWChronicle.UI.LabChart" %> 
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Charting" tagprefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
        <head id="Head1" runat="server"
        <title>Laboratory Chart</title> 
        </head> 
        <body id="Body1" runat="server"
        <form id="Form1" method="post" runat="server"
                    <asp:ScriptManager ID="scriptManager1" runat="server" EnablePartialRendering="True" EnablePageMethods="True" EnableScriptGlobalization="True" EnableScriptLocalization="True" /> 
                        <telerik:RadChart ID="LabRadChart" runat="server" DefaultType="Point"  
                            Height="500px" Width="850px"
                            <Series> 
                                <telerik:ChartSeries DefaultLabelValue="#Y" Name="Series 1"  
                                Type="Point"
                                    <Appearance LegendDisplayMode="Nothing"
                                        <FillStyle MainColor="213, 247, 255"
                                        </FillStyle> 
                                    </Appearance> 
                                </telerik:ChartSeries> 
                            </Series> 
                            <PlotArea> 
                                <XAxis IsZeroBased="False" MaxItemsCount="5"
                                    <Appearance ValueFormat="ShortDate"
                                    </Appearance> 
                                </XAxis> 
                                <Appearance Dimensions-Margins="18%, 5%, 12%, 10%"
                                </Appearance> 
                            </PlotArea> 
                            <ClientSettings ScrollMode="XOnly" /> 
                        </telerik:RadChart> 
            <asp:Button ID="ResetButton" runat="server" Text="Reset"  
                        onclick="ResetButton_Click" /> 
        </form> 
        </body> 
    </html> 
     

    Here is the code-behind.
    #region "Using statements" 
     
    using System; 
    using System.Web.UI; 
    using Telerik.Charting; 
    #endregion 
     
     
    namespace IWChronicle.UI { 
     
        partial class LabChart : Page { 
     
            protected void Page_Load(object sender, EventArgs e) { 
                if (!IsPostBack) { 
                    LabRadChart.Series[0].Items.AddRange(GetItems(20)); 
                    LabRadChart.DataBind(); 
                } 
            } 
     
            private ChartSeriesItem[] GetItems(int count) { 
                DateTime startDate = new DateTime(2000, 1, 1); 
                ChartSeriesItem[] items = new ChartSeriesItem[count]; 
                for (int i = 0; i < count; i++) 
                    items[i] = new ChartSeriesItem(startDate.AddDays(i * 30).ToOADate(), i); 
     
                return items; 
            } 
     
            protected void ResetButton_Click(object sender, EventArgs e) { 
                LabRadChart.ClientSettings.XScale = 1.0f; 
            } 
     
     


    Also attached are 2 screenshots showing the rectangle and the zoomed window.

    This may cause confusion for end users. Is there a work-around?

    Thanks!

    Jing
  2. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 12 Jul 2010 Link to this post

    Hi dingjing,

    Indeed the zooming precision in some scenarios seems to be a bit off -- we would suggest you to try switching the layout mode of the XAxis to "Normal" in order to improve the behavior (XAxis.LayoutMode = "Normal").

    Hope this helps.


    Regards,
    Freddie
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. dingjing
    dingjing avatar
    42 posts
    Member since:
    Jul 2007

    Posted 20 Jul 2010 Link to this post

    When XAxis is set to "Normal" and XScale is greater than 1, the visible portion of XAxis is longer than the length of PlotArea.
  4. dingjing
    dingjing avatar
    42 posts
    Member since:
    Jul 2007

    Posted 21 Jul 2010 Link to this post

    Because of the zooming precision issue, I turned off zooming and put a RadSlider under the chart to control its XScale and XScrollOffset. However, the control is one-way. I can only set the chart's XScale and XScrollOffset in the slider's ValueChanged event handler. I cannot figure out how to update the slider's value after users scroll the chart.
  5. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 23 Jul 2010 Link to this post

    Hi dingjing,

    You can use these:

    • chart.get_xScrollOffset(),
    • chart.get_yScrollOffset(),
    • chart.get_xScale() and
    • chart.get_yScale
    to determine the current chart zoom/scroll state. Please, find more details in our help topic, dedicated to the Client Side API in RadCart here. You can also find an example, shown how to update RadSlider's values client-side here.

    Best regards,
    Ves
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. dingjing
    dingjing avatar
    42 posts
    Member since:
    Jul 2007

    Posted 23 Jul 2010 Link to this post

    I am aware of their client-side APIs. 

    RadSlider has several client-side events in which I can control a RadChart's zoom and scroll. However, I don't find any RadChart's client-side events to update the slider.
  7. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 29 Jul 2010 Link to this post

    Hello dingjing,

    Sorry for misleading you a bit with our previous reply -- unfortunately RadChart does not expose any client-side events for zooming / scrolling so it would not be possible to achieve the desired effect.


    Greetings,
    Freddie
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. dingjing
    dingjing avatar
    42 posts
    Member since:
    Jul 2007

    Posted 29 Jul 2010 Link to this post

    Never mind. I captured the chart scrolling event using jQuery.
Back to Top