<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chart.aspx.cs" Inherits="RadControlsWebApp1.Chart" %>

<%@ 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 runat="server">
		<title></title>
		<style type="text/css">
			.style1 {
				width: 755px;
			}
	</style>
</head>
<body>
		<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
		</telerik:RadScriptManager>
		<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
			<ContentTemplate>
		<div>
			<telerik:RadChart ID="RadChart1" runat="server" DefaultType="Point" 
				Height="500px" Width="850px" CreateImageMap="False" >
				<Series>
					<telerik:ChartSeries Name="Series 1" Type="Point">
						<Appearance LegendDisplayMode="Nothing">
						</Appearance>
					</telerik:ChartSeries>
				</Series>
				<PlotArea>
					<XAxis AutoScale="False" MaxValue="7" MinValue="1" Step="1" LayoutMode="Inside">
						<Appearance ValueFormat="ShortDate">
						</Appearance>
						<Items>
							<telerik:ChartAxisItem Value="1">
							</telerik:ChartAxisItem>
							<telerik:ChartAxisItem Value="2">
							</telerik:ChartAxisItem>
							<telerik:ChartAxisItem Value="3">
							</telerik:ChartAxisItem>
							<telerik:ChartAxisItem Value="4">
							</telerik:ChartAxisItem>
							<telerik:ChartAxisItem Value="5">
							</telerik:ChartAxisItem>
							<telerik:ChartAxisItem Value="6">
							</telerik:ChartAxisItem>
							<telerik:ChartAxisItem Value="7">
							</telerik:ChartAxisItem>
						</Items>
					</XAxis>
					<YAxis AutoScale="False" MaxValue="20" MinValue="-5" Step="5">
						<Items>
							<telerik:ChartAxisItem Value="-5">
							</telerik:ChartAxisItem>
							<telerik:ChartAxisItem Value="0">
							</telerik:ChartAxisItem>
							<telerik:ChartAxisItem Value="5">
							</telerik:ChartAxisItem>
							<telerik:ChartAxisItem Value="10">
							</telerik:ChartAxisItem>
							<telerik:ChartAxisItem Value="15">
							</telerik:ChartAxisItem>
							<telerik:ChartAxisItem Value="20">
							</telerik:ChartAxisItem>
						</Items>
					</YAxis>
					<Appearance Dimensions-Margins="18%, 10px, 12%, 10%">
					</Appearance>
				</PlotArea>
				<ClientSettings ScrollMode="XOnly" EnableZoom="false" />
			</telerik:RadChart>
			<table style="width:850px;margin-top:-35px;z-index:1;position:relative;">
				<tr>
					<td >
						<asp:Button ID="ResetButton" runat="server" Text="Reset" OnClick="ResetButton_Click" />
					</td>
					<td width="765px">
			<telerik:RadSlider ID="RadSlider1" runat="server" Height="35px" ItemType="Item" 
							TrackPosition="TopLeft" Width="755px" IsSelectionRangeEnabled="True" 
							LiveDrag="False" ShowDecreaseHandle="False" OnValueChanged="SetZoom" OnClientValueChanged="zoom"
							ShowIncreaseHandle="False" AutoPostBack="False" >
			</telerik:RadSlider>
					</td>
				</tr>
			</table>
		</div>
			</ContentTemplate>
		</asp:UpdatePanel>

<script type="text/javascript">
	var chart;
	var slider;
	var maxEnd;
	var skipZoom = false;

	function zoom() {
		if (!skipZoom)
			__doPostBack('<%= RadSlider1.UniqueID %>', '');
		else
			skipZoom = false;
	}

	function chartScrolled() {
		var oldStart = slider.get_selectionStart();
		var oldEnd = slider.get_selectionEnd();
		var newStart = Math.round(chart.get_xScrollOffset() * maxEnd);
		var diff = newStart - oldStart;
		if (diff >= 1 || diff <= -1) {
			skipZoom = true;
			slider.set_selectionStart(newStart);
			skipZoom = true;
			slider.set_selectionEnd(oldEnd + diff);
		}
	}

	Sys.Application.add_load(function () {
		chart = $find('<%= RadChart1.ClientID %>');
		slider = $find('<%= RadSlider1.ClientID %>');

		if (!maxEnd)
			maxEnd = slider.get_selectionEnd();

		$telerik.$('#<%= RadChart1.ClientID %>' + '_rcPlotArea').scroll(chartScrolled);
	});
</script>
		</form>
</body>
</html>
