<html>
	<head>
		<title>Custom Range Selector</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>	
		<script type="text/javascript" language="javascript" src="./../js/AnyChartStock.js?v=1.9.0r9317"></script>
		
		<!-- jQuery is used to work with DOM and create calendar control -->
		<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
		<!-- jquery ui for calendar control -->
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css?v=1.9.0r9317" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
		
		<!-- chart size settings -->
		<style type="text/css">
			#chartContainer {
				width: 800px;
				height: 450px;
			}			
		</style>
		<script type="text/javascript" language="javascript">
			// Creating new chart object. 
			var chart = new AnyChartStock("./../swf/AnyChartStock.swf?v=1.9.0r9317", "./../swf/Preloader.swf?v=1.9.0r9317");
			chart.wMode = "opaque";
			// Setting XML config file.
			chart.setXMLFile("config.xml");
			// Writing the flash object into the page DOM.
			chart.write("chartContainer");
			
			//--------------------------------------------------------------------------------
			//		Range text input
			//--------------------------------------------------------------------------------
			
			// Handler for chart draw event. It is needed to show initial range.
			chart.onChartDraw = function() {
				$("#startDate").datepicker("setDate", chart.getFirstVisibleDate());
				$("#endDate").datepicker("setDate", chart.getLastVisibleDate());
			}
			
			// Handler for range change event. It is needed to update information in Custom range inputs.
			chart.onSelectedRangeChange = function(startDate, endDate, phase) {
				if (phase == "finish") {
					$("#startDate")
						.datepicker('disable')
						.datepicker("setDate", startDate)
						.datepicker('enable');
					$("#endDate")
						.datepicker('disable')
						.datepicker("setDate", endDate)
						.datepicker('enable');
				}
			}
			
			// Select custom range based on input data
			function setCustomRangeFromInput() {
				// Get start and end of the range
				var startDate = $("#startDate").datepicker("getDate");
				var endDate = $("#endDate").datepicker("getDate");
				
				// Validate them and alert if something is wrong.
				if (startDate == null) {
					alert ("Invalid start date");
					return;
				}
				if (endDate == null) {
					alert ("Invalid end date");
					return;
				}
				
				// If start and end are valid - show this range on the chart
				chart.zoomTo(startDate, endDate);
			}
			
			//--------------------------------------------------------------------------------
			//		Auto ranges
			//--------------------------------------------------------------------------------
			
			// select YTD range
			function selectYTDRange() {
				chart.selectRange("YTD");
			}
			
			// select full range
			function selectMaxRange() {
				chart.selectRange("Max");
			}
			
			//--------------------------------------------------------------------------------
			//		Unit based presets
			//--------------------------------------------------------------------------------
			
			// current selected anchor (see html below)
			var anchor = "LastDate";
			
			// update current selected anchor
			function updateAnchor(newAnchor) { anchor = newAnchor; }
			
			// show 5 day period taking anchor in regard
			function select5DRange() {
				chart.selectRange("Unit", "Day", 5, anchor);
			}
			
			// show 1 week taking anchor in regard
			function select1WRange() {
				chart.selectRange("Unit", "Week", 1, anchor);
			}
			
			// show 10 days taking anchor in regard
			function select10DRange() {
				chart.selectRange("Unit", "Day", 10, anchor);
			}
			
			// show 1 month taking anchor in regard
			function select1MRange() {
				chart.selectRange("Unit", "Month", 1, anchor);
			}
			
			// show 1 year taking anchor in regard
			function select1YRange() {
				chart.selectRange("Unit", "Year", 1, anchor);
			}
			
			// show 2 years taking anchor in regard
			function select2YRange() {
				chart.selectRange("Unit", "Year", 2, anchor);
			}
			
			// show 5 years taking anchor in regard
			function select5YRange() {
				chart.selectRange("Unit", "Year", 5, anchor);
			}
			
			//--------------------------------------------------------------------------------
			//		Custom range presets
			//--------------------------------------------------------------------------------
			
			// Select range from 1st of January, 2004 года to 1st of January, 2006 
			function select2004To2006() {
				// NOTE! UTC date is used, not local!
				var startDate = new Date(Date.UTC(2004, 0, 1));
				var endDate = new Date(Date.UTC(2006, 0, 1));
				
				chart.zoomTo(startDate, endDate);
			}
			
			// Select range from 1st of January, 2006 to 1st of January, 2007
			function select2006To2007() {
				// NOTE! UTC date is used, not local!
				var startDate = new Date(Date.UTC(2006, 0, 1));
				var endDate = new Date(Date.UTC(2007, 0, 1));
				
				chart.zoomTo(startDate, endDate);
			}

			// Select range from 1st of January, 2007 to 11th of Octobet, 2008			
			function select2007Jan01To2008Oct11() {
				// NOTE! UTC date is used, not local!
				var startDate = new Date(Date.UTC(2007, 0, 1));
				var endDate = new Date(Date.UTC(2008, 9, 11));
				
				chart.zoomTo(startDate, endDate);
			}
			
			//---------------------------------------------------------------------------------------------------
			//		Enable html controls
			//---------------------------------------------------------------------------------------------------
			
			var onChartDraw = chart.onChartDraw;
			chart.onChartDraw = function() {
				// initialize jQuery UI date picker
				$('#startDate, #endDate').datepicker({
					dateFormat: 'yy-mm-dd',
					onSelect: setCustomRangeFromInput // update selected range
				});
				onChartDraw();
				
				$("input").removeAttr("disabled");
				
				chart.onChartDraw = null;
			}
			
		</script>
		
		<!-- table settings -->
		<style type="text/css">
			table.settings {
				width: 800px;
				border-style: solid;
				border-width: 1px;
				border-color: #D0CDC9;
			}

			table.settings tr th {
				font:normal 60% Verdana;
				background-color: #DCD9D5;
				font-weight:bold;
				padding-bottom:5px;
				padding-top:5px;
				padding-left:10px;
				text-align:left;
			}
			
			table.settings tr td {
				background-color: #F8F4F0;
				font:normal 70% Verdana;
				padding-bottom:2px;
				padding-top:2px;
				padding-left:10px;
				text-align:left;	
			}
			
			/* datetime picker */
			#startDate, #endDate {
				background-image: url(calendar.png);
				background-repeat: no-repeat;
				background-position: center right;
			}
			
			#ui-datepicker-div {
				font-size: 10pt;
			}
		</style>
	</head>
	<body>
		<div id="chartContainer"><!-- Chart Container --></div><br />
		<table class="settings">
			<!-- custom ranges -->
			<tr>
				<th width="200">Custom Range:</th>
				<td>
					<input type="text" id="startDate" autocomplete="off" /> - <input type="text" id="endDate" autocomplete="off"/>
				</td>
			</tr>
			<!-- auto ranges -->
			<tr>
				<th>Auto ranges:</th>
				<td>
					<input type="button" value="YTD" disabled="disabled" onclick="selectYTDRange()" />
					<input type="button" value="MAX" disabled="disabled" onclick="selectMaxRange()" />
				</td>
			</tr>
			<!-- unit based ranges -->
			<tr>
				<th>Unit based presets anchor:</th>
				<td>
					<input type="radio" name="presetAnchor" disabled="disabled" onclick="updateAnchor('FirstDate')" value="FirstDate">FirstDate</input>
					<input type="radio" name="presetAnchor" disabled="disabled" onclick="updateAnchor('FirstVisibleDate')" value="FirstVisibleDate">FirstVisibleDate</input>
					<input type="radio" name="presetAnchor" disabled="disabled" onclick="updateAnchor('Center')" value="Center">Center</input>
					<input type="radio" name="presetAnchor" disabled="disabled" onclick="updateAnchor('LastVisibleDate')" value="LastVisibleDate">LastVisibleDate</input>
					<input type="radio" name="presetAnchor" disabled="disabled" onclick="updateAnchor('LastDate')" value="LastDate" checked="true">LastDate</input>
				</td>
			</tr>
			<tr>
				<th>Unit based presets:</th>
				<td>
					<input type="button" value="5D" disabled="disabled" onclick="select5DRange()" />
					<input type="button" value="1W" disabled="disabled" onclick="select1WRange()" />
					<input type="button" value="10D" disabled="disabled" onclick="select10DRange()" />
					<input type="button" value="1M" disabled="disabled" onclick="select1MRange()" />
					<input type="button" value="1Y" disabled="disabled" onclick="select1YRange()" />
					<input type="button" value="2Y" disabled="disabled" onclick="select2YRange()" />
					<input type="button" value="5Y" disabled="disabled" onclick="select5YRange()" />
				</td>
			</tr>
			<!-- custom presets -->
			<tr>
				<th>Custom range presets:</th>
				<td>
					<input type="button" disabled="disabled" value="2004-2006" onclick="select2004To2006()"/>
					<input type="button" disabled="disabled" value="2006-2007" onclick="select2006To2007()"/>
					<input type="button" disabled="disabled" value="2007/01/01-2008/10/11"onclick="chart.zoomTo(new Date(Date.UTC(2007, 0, 1)), new Date(Date.UTC(2008, 9, 11)))" />
				</td>
			</tr>
		</table>
	</body>
</html>

Sample Description

How to use this sample?

Use timline navigation controls below the chart to show different time ranges in the chart. If you are using custom range - please note the date mask. Also note, that unit based presets depend on unit based preset anchors.

to top

How it works

Besides built-in Range Selector, AnyChart Stock offers developer several functions, that allow to control the timeline in the chart.

This sample shows how to create your own custom range selector: all you have to do is create control, decide what ranges you want to show and then use either selectRange , selectRangeById or zoomTo functions to show desired ranges.

to top

AnyChartStock JavaScript API

This sample uses the following methods, properties and events from AnyChartStock JavaScript API:

Item Type Description
wMode Property (String) Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser.
getFirstVisibleDate Method Gets the first visible date.
getLastVisibleDate Method Gets the last visible date.
selectRange Method Selects a dates range.
setXMLFile Method Sets chart XML configuration file path.
write Method Adds the chart to HTML DOM as a child of the specified container.
zoomTo Method Zooms the chart to a custom range.
onChartDraw Event This event is dispatched when the AnyChart Stock is drawn.
onSelectedRangeChange Event This event is dispatched when the selected range of the chart is changed.

to top

Prerequisites

This section lists all configuration, data and auxiliary files required for this sample.

Configuration file

CSV files

SWF files

  • AnyChartStock.swf - AnyChart Stock component.
  • Preloader.swf - AnyChart Stock helper component that loads the main component (AnyChartStock.swf) and displays loading progress.

JavaScript Libraries

Additional Files

to top

The information contained in this website is for general information purposes only. All sample data provided on this site is for demonstration purposes only.

The logos and names of other companies and products mentioned on this site are copyright and/or trademarks of their respective owners.

The content on this site, including news, quotes, data and other information, is provided for your personal information only, and is intended for demonstration purposes only. Content on this site is not appropriate for the purposes of making a decision to carry out a transaction or trade. Nor does it provide any form of advice (investment, tax, legal) amounting to investment advice, or make any recommendations regarding particular financial instruments, investments or products.

In no event AnyChart will be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.

This site may point to other Internet sites that may be of interest to you, however AnyChart does not endorse or take responsibility for the content on such other sites

Market data and News provided by and copyright RediNews, Incorporated.