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.
  • 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 RadHtmlChart 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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.HtmlChart.Examples.Functionality.PanningZooming.DefaultCS" %>

<%@ 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