This is a migrated thread and some comments may be shown as answers.

[Solved] Zoom window shifted out of position

7 Answers 141 Views

Chart (Obsolete)

This is a migrated thread and some comments may be shown as answers.

dingjing asked on 07 Jul 2010, 08:06 PM

zoomedin.png

zoomwindow.PNG

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

7 Answers, 1 is accepted

answered on 23 Jul 2010, 09:50 AM

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