New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    Pan and Zoom

    • Initially, panning is enabled for all directions. You can navigate by X and Y axis;
    • In order to perform a selection-zoom hold the Shift key and draw an area using the mouse;
    • Alternatively, use the mousewheel to perform a mousewheel-zoom.
    Sir Rodney's MarmaladeSir Rodney's SconesGustaf's KnäckebrödTunnbrödGuaraná FantásticaNuNuCa Nuß-Nougat-CremeGumbär GummibärchenSchoggi SchokoladeRössle SauerkrautThüringer RostbratwurstNord-Ost MatjesheringGorgonzola Telino020406080100120Quantity4031046120761549260100Units in Stock
    • Demo Configurator
    • Pan
    • Zoom-Mouse Wheel
    • Zoom-Selection
    Enable/Disable Pan
    Choose axis to lock
    None
    Choose Modifier Key for Panning
    None


    * If the key assigned is the same as the key for Zoom-Selection, it is expected both panning and zooming to be applied.
    Enable/Disable Mouse Wheel Zoom
    Choose axis to lock
    None
    Enable/Disable Selection Zoom
    Choose axis to lock
    None
    Choose Modifier Key for Selection Zoom
    Shift


    * If the key assigned is the same as the key for Pan, it is expected both panning and zooming to be applied.

    As of Q1 2016 the ASP.NET AJAX Chart exposes Pan and Zoom features for category and numeric series that can help you to navigate through the chart.

    In this demo you can test out the different configuration options for Pan and Zoom properties.

    To read more about the properties and what they do, you can follow the Panning and Zooming article.

    • DefaultVB.aspx
    • DefaultVB.aspx.vb
    • scripts.js
    <%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.HtmlChart.Examples.Functionality.PanningZooming.DefaultVB" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <script src="scripts.js" type="text/javascript"></script>
    </head>
     
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ProductName], [UnitsInStock] FROM [Products]"></asp:SqlDataSource>
        <qsf:MessageBox runat="server" Type="Info" Icon="Info">
            <ul>
                <li>Initially, panning is enabled for all directions. You can navigate by X and Y axis;</li>
                <li>In order to perform a selection-zoom hold the <em>Shift</em> key and draw an area using the mouse;</li>
                <li>Alternatively, use the mousewheel to perform a mousewheel-zoom.</li>
            </ul>
        </qsf:MessageBox>
        <div class="demo-container">
     
            <telerik:RadHtmlChart runat="server" Height="650px" Width="100%" ID="RadHtmlChart1" Transitions="false"
                DataSourceID="SqlDataSource1">
                <Pan Enabled="true" />
                <Zoom Enabled="true">
                    <MouseWheel Enabled="true" />
                    <Selection Enabled="true" ModifierKey="Shift" />
                </Zoom>
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries DataFieldY="UnitsInStock">
                            <TooltipsAppearance Color="White">
                                <ClientTemplate>#= dataItem.ProductName# :  #= dataItem.UnitsInStock#</ClientTemplate>
                            </TooltipsAppearance>
                        </telerik:ColumnSeries>
                    </Series>
                    <XAxis DataLabelsField="ProductName" MinValue="3" MaxValue="15">
                        <LabelsAppearance RotationAngle="90"></LabelsAppearance>
                        <MinorGridLines Visible="false" />
                    </XAxis>
                    <YAxis MinValue="0" MaxValue="125">
                        <MinorGridLines Visible="false" />
                        <TitleAppearance Text="Quantity">
                        </TitleAppearance>
                    </YAxis>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false">
                    </Appearance>
                </Legend>
                <ChartTitle Text="Units in Stock">
                    <Appearance Position="Bottom" />
                </ChartTitle>
                <ClientEvents OnLoad="chartLoad" />
            </telerik:RadHtmlChart>
     
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
     
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
        </div>
     
        <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
            <Views>
                <qsf:View Title="Pan">
                    <qsf:ConfiguratorColumn runat="server" Title="Enable/Disable Pan" Size="Narrow">
                        <asp:CheckBox runat="server" ID="Pan_TogglePan" Text="Enabled" Checked="true" AutoPostBack="true" />
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Title="Choose axis to lock" Size="Narrow">
                        <qsf:DropDownList runat="server" ID="Pan_LockAxis" Size="Narrow" AutoPostBack="true"></qsf:DropDownList>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Title="Choose Modifier Key for Panning" Size="Medium">
                        <qsf:DropDownList runat="server" ID="Pan_Key" Size="Narrow" AutoPostBack="true"></qsf:DropDownList>
                        <br />
                        <br />
                        <em>* If the key assigned is the same as the key for <strong>Zoom-Selection</strong>, it is expected both panning and zooming to be applied.</em>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
                <qsf:View Title="Zoom-Mouse Wheel">
                    <qsf:ConfiguratorColumn runat="server" Title="Enable/Disable Mouse Wheel Zoom" Size="Medium">
                        <asp:CheckBox runat="server" ID="MouseWheel_Toggle" Text="Enabled" Checked="true" AutoPostBack="true" />
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Title="Choose axis to lock" Size="Narrow">
                        <qsf:DropDownList runat="server" ID="MouseWheel_LockAxis" Size="Narrow" AutoPostBack="true"></qsf:DropDownList>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
                <qsf:View Title="Zoom-Selection">
                    <qsf:ConfiguratorColumn runat="server" Title="Enable/Disable Selection Zoom" Size="Medium">
                        <asp:CheckBox runat="server" ID="Selection_Toggle" Text="Enabled" Checked="true" AutoPostBack="true" />
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Title="Choose axis to lock" Size="Narrow">
                        <qsf:DropDownList runat="server" ID="Selection_LockAxis" Size="Narrow" AutoPostBack="true"></qsf:DropDownList>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" Title="Choose Modifier Key for Selection Zoom" Size="Medium">
                        <qsf:DropDownList runat="server" ID="Selection_Key" Size="Narrow" AutoPostBack="true"></qsf:DropDownList>
                        <br />
                        <br />
                        <em>* If the key assigned is the same as the key for <strong>Pan</strong>, it is expected both panning and zooming to be applied.</em>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance