<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.
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.
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. |
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
- jquery-1.4.2.min.js - A JavaScript jQuery library. Learn more at jQuery official site.
- jquery-ui-1.8.2.custom.min.js - A JavaScript UI library - a jQuery addon that helps to work with a calendar.
- AnyChartStock.js - A JavaScript library that is shipped with AnyChart Stock component. It is used to embed the component into HTML DOM and to comunicate with the Flash part.
Additional Files
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.