Available in the OSS Version
Zoombar - TypeScript
This sample demonstrates how to implement zoombar functionality and data chart with financial series alongside in TypeScript.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Some of the additional controls enable resizing the zoom window to a specific period of time and show tooltips with date information for the left and right borders. A template is used for the tooltip to define how the data will be displayed.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
<style type="text/css">
.buttonset {
position: absolute;
top: 0px;
left: 50px;
z-index: 10000;
}
.buttonset > label {
width: 60px;
height: 26px;
margin-right: -4px !important;
}
.tooltip {
font-weight: bold;
}
</style>
<script id="tooltipTemplate" type="text/x-jquery-tmpl">
<span class="tooltip">${item.DateString}</span>
<br />
<span class="tooltip">Open: </span>
<span>${item.Open}</span>
<br />
<span class="tooltip">Low: </span>
<span>${item.Low}</span>
<br />
<span class="tooltip">High: </span>
<span>${item.High}</span>
<br />
<span class="tooltip">Close: </span>
<span>${item.Close}</span>
<br />
</script>
</head>
<body>
<div id="chartTypeScript"></div>
<div id="zoombar"></div>
<script src="/data-files/financial-data-random.js"></script>
<script src="/TypeScriptSamples/zoombar/typescript.js"></script>
</body>
</html>
var financialData1 = [{
"Index": 0,
"Open": 1000,
"High": 1025.25,
"Low": 970.25,
"Close": 1025,
"Volume": 1982.25,
"Date": new Date(1262408400000),
"DateString": "1/2/2010",
"Category": null,
"Change": 25,
"ChangePerCent": 2.5
}, {
"Index": 1,
"Open": 1025,
"High": 1062.25,
"Low": 1006.25,
"Close": 1057,
"Volume": 1981.5,
"Date": new Date(1262494800000),
"DateString": "1/3/2010",
"Category": null,
"Change": 32,
"ChangePerCent": 3.1219512195121952
}, {
"Index": 2,
"Open": 1057,
"High": 1078.5,
"Low": 1019,
"Close": 1058,
"Volume": 1963.25,
"Date": new Date(1262581200000),
"DateString": "1/4/2010",
"Category": null,
"Change": 1,
"ChangePerCent": 0.0946073793755913
}, {
"Index": 3,
"Open": 1058,
"High": 1079.75,
"Low": 1027.5,
"Close": 1072,
"Volume": 1986.25,
"Date": new Date(1262667600000),
"DateString": "1/5/2010",
"Category": null,
"Change": 14,
"ChangePerCent": 1.3232514177693762
}, {
"Index": 4,
"Open": 1072,
"High": 1098,
"Low": 1048,
"Close": 1056,
"Volume": 1972,
"Date": new Date(1262754000000),
"DateString": "1/6/2010",
"Category": null,
"Change": -16,
"ChangePerCent": -1.4925373134328357
}, {
"Index": 5,
"Open": 1056,
"High": 1072.5,
"Low": 1026.75,
"Close": 1043,
"Volume": 1969,
"Date": new Date(1262840400000),
"DateString": "1/7/2010",
"Category": null,
"Change": -13,
"ChangePerCent": -1.231060606060606
}, {
"Index": 6,
"Open": 1043,
"High": 1062.5,
"Low": 1024.25,
"Close": 1029,
"Volume": 1956.75,
"Date": new Date(1262926800000),
"DateString": "1/8/2010",
"Category": null,
"Change": -14,
"ChangePerCent": -1.3422818791946309
}, {
"Index": 7,
"Open": 1029,
"High": 1063.5,
"Low": 999.5,
"Close": 1011,
"Volume": 1967,
"Date": new Date(1263013200000),
"DateString": "1/9/2010",
"Category": null,
"Change": -18,
"ChangePerCent": -1.749271137026239
}, {
"Index": 8,
"Open": 1011,
"High": 1037.75,
"Low": 996,
"Close": 1027,
"Volume": 1995,
"Date": new Date(1263099600000),
"DateString": "1/10/2010",
"Category": null,
"Change": 16,
"ChangePerCent": 1.5825914935707219
}, {
"Index": 9,
"Open": 1027,
"High": 1062,
"Low": 997,
"Close": 1026,
"Volume": 1969.75,
"Date": new Date(1263186000000),
"DateString": "1/11/2010",
"Category": null,
"Change": -1,
"ChangePerCent": -0.097370983446932818
}, {
"Index": 10,
"Open": 1026,
"High": 1041.5,
"Low": 998.5,
"Close": 1006,
"Volume": 1958.25,
"Date": new Date(1263272400000),
"DateString": "1/12/2010",
"Category": null,
"Change": -20,
"ChangePerCent": -1.9493177387914229
}, {
"Index": 11,
"Open": 1006,
"High": 1035.25,
"Low": 978.5,
"Close": 1018,
"Volume": 1947.75,
"Date": new Date(1263358800000),
"DateString": "1/13/2010",
"Category": null,
"Change": 12,
"ChangePerCent": 1.1928429423459244
}, {
"Index": 12,
"Open": 1018,
"High": 1035.75,
"Low": 990,
"Close": 1020,
"Volume": 1946,
"Date": new Date(1263445200000),
"DateString": "1/14/2010",
"Category": null,
"Change": 2,
"ChangePerCent": 0.19646365422396855
}, {
"Index": 13,
"Open": 1020,
"High": 1050,
"Low": 1003.25,
"Close": 1049,
"Volume": 1940.5,
"Date": new Date(1263531600000),
"DateString": "1/15/2010",
"Category": null,
"Change": 29,
"ChangePerCent": 2.8431372549019609
}, {
"Index": 14,
"Open": 1049,
"High": 1062.75,
"Low": 1027.5,
"Close": 1034,
"Volume": 1953.25,
"Date": new Date(1263618000000),
"DateString": "1/16/2010",
"Category": null,
"Change": -15,
"ChangePerCent": -1.4299332697807436
}, {
"Index": 15,
"Open": 1034,
"High": 1054.5,
"Low": 1011.75,
"Close": 1022,
"Volume": 1926.25,
"Date": new Date(1263704400000),
"DateString": "1/17/2010",
"Category": null,
"Change": -12,
"ChangePerCent": -1.1605415860735011
}, {
"Index": 16,
"Open": 1022,
"High": 1046,
"Low": 994.25,
"Close": 1021,
"Volume": 1956.25,
"Date": new Date(1263790800000),
"DateString": "1/18/2010",
"Category": null,
"Change": -1,
"ChangePerCent": -0.097847358121330719
}, {
"Index": 17,
"Open": 1021,
"High": 1056.25,
"Low": 982.75,
"Close": 1001,
"Volume": 1955.25,
"Date": new Date(1263877200000),
"DateString": "1/19/2010",
"Category": null,
"Change": -20,
"ChangePerCent": -1.9588638589618024
}, {
"Index": 18,
"Open": 1001,
"High": 1017,
"Low": 979,
"Close": 1014,
"Volume": 1976.25,
"Date": new Date(1263963600000),
"DateString": "1/20/2010",
"Category": null,
"Change": 13,
"ChangePerCent": 1.2987012987012987
}, {
"Index": 19,
"Open": 1014,
"High": 1037.75,
"Low": 982.25,
"Close": 1008,
"Volume": 1966.25,
"Date": new Date(1264050000000),
"DateString": "1/21/2010",
"Category": null,
"Change": -6,
"ChangePerCent": -0.591715976331361
}, {
"Index": 20,
"Open": 1008,
"High": 1021,
"Low": 983.5,
"Close": 984,
"Volume": 1949.75,
"Date": new Date(1264136400000),
"DateString": "1/22/2010",
"Category": null,
"Change": -24,
"ChangePerCent": -2.3809523809523809
}, {
"Index": 21,
"Open": 984,
"High": 1018.75,
"Low": 949.5,
"Close": 994,
"Volume": 1921.25,
"Date": new Date(1264222800000),
"DateString": "1/23/2010",
"Category": null,
"Change": 10,
"ChangePerCent": 1.0162601626016259
}, {
"Index": 22,
"Open": 994,
"High": 1018,
"Low": 970.75,
"Close": 971,
"Volume": 1948.5,
"Date": new Date(1264309200000),
"DateString": "1/24/2010",
"Category": null,
"Change": -23,
"ChangePerCent": -2.3138832997987926
}, {
"Index": 23,
"Open": 971,
"High": 998.25,
"Low": 948.5,
"Close": 981,
"Volume": 1946.75,
"Date": new Date(1264395600000),
"DateString": "1/25/2010",
"Category": null,
"Change": 10,
"ChangePerCent": 1.0298661174047374
}, {
"Index": 24,
"Open": 981,
"High": 995.5,
"Low": 947,
"Close": 991,
"Volume": 1930.5,
"Date": new Date(1264482000000),
"DateString": "1/26/2010",
"Category": null,
"Change": 10,
"ChangePerCent": 1.019367991845056
}, {
"Index": 25,
"Open": 991,
"High": 1024,
"Low": 962,
"Close": 970,
"Volume": 1905,
"Date": new Date(1264568400000),
"DateString": "1/27/2010",
"Category": null,
"Change": -21,
"ChangePerCent": -2.119071644803229
}, {
"Index": 26,
"Open": 970,
"High": 990.75,
"Low": 942.5,
"Close": 977,
"Volume": 1903.5,
"Date": new Date(1264654800000),
"DateString": "1/28/2010",
"Category": null,
"Change": 7,
"ChangePerCent": 0.72164948453608246
}, {
"Index": 27,
"Open": 977,
"High": 993,
"Low": 947.5,
"Close": 992,
"Volume": 1899.75,
"Date": new Date(1264741200000),
"DateString": "1/29/2010",
"Category": null,
"Change": 15,
"ChangePerCent": 1.5353121801432956
}, {
"Index": 28,
"Open": 992,
"High": 1009.5,
"Low": 960.5,
"Close": 979,
"Volume": 1889.25,
"Date": new Date(1264827600000),
"DateString": "1/30/2010",
"Category": null,
"Change": -13,
"ChangePerCent": -1.310483870967742
}, {
"Index": 29,
"Open": 979,
"High": 1011.75,
"Low": 956.5,
"Close": 994,
"Volume": 1896.75,
"Date": new Date(1264914000000),
"DateString": "1/31/2010",
"Category": null,
"Change": 15,
"ChangePerCent": 1.5321756894790604
}, {
"Index": 30,
"Open": 994,
"High": 1027.25,
"Low": 967.25,
"Close": 972,
"Volume": 1875.5,
"Date": new Date(1265000400000),
"DateString": "2/1/2010",
"Category": null,
"Change": -22,
"ChangePerCent": -2.2132796780684103
}, {
"Index": 31,
"Open": 972,
"High": 992.75,
"Low": 953,
"Close": 958,
"Volume": 1860.25,
"Date": new Date(1265086800000),
"DateString": "2/2/2010",
"Category": null,
"Change": -14,
"ChangePerCent": -1.440329218106996
}, {
"Index": 32,
"Open": 958,
"High": 994,
"Low": 933,
"Close": 972,
"Volume": 1876.5,
"Date": new Date(1265173200000),
"DateString": "2/3/2010",
"Category": null,
"Change": 14,
"ChangePerCent": 1.4613778705636742
}, {
"Index": 33,
"Open": 972,
"High": 981,
"Low": 947.75,
"Close": 970,
"Volume": 1885.5,
"Date": new Date(1265259600000),
"DateString": "2/4/2010",
"Category": null,
"Change": -2,
"ChangePerCent": -0.205761316872428
}, {
"Index": 34,
"Open": 970,
"High": 1005.5,
"Low": 948.75,
"Close": 955,
"Volume": 1886.25,
"Date": new Date(1265346000000),
"DateString": "2/5/2010",
"Category": null,
"Change": -15,
"ChangePerCent": -1.5463917525773196
}, {
"Index": 35,
"Open": 955,
"High": 984,
"Low": 932,
"Close": 958,
"Volume": 1895.25,
"Date": new Date(1265432400000),
"DateString": "2/6/2010",
"Category": null,
"Change": 3,
"ChangePerCent": 0.31413612565445026
}, {
"Index": 36,
"Open": 958,
"High": 972.25,
"Low": 918.5,
"Close": 967,
"Volume": 1901.25,
"Date": new Date(1265518800000),
"DateString": "2/7/2010",
"Category": null,
"Change": 9,
"ChangePerCent": 0.93945720250521914
}, {
"Index": 37,
"Open": 967,
"High": 992,
"Low": 937.5,
"Close": 960,
"Volume": 1889.75,
"Date": new Date(1265605200000),
"DateString": "2/8/2010",
"Category": null,
"Change": -7,
"ChangePerCent": -0.72388831437435364
}, {
"Index": 38,
"Open": 960,
"High": 981.25,
"Low": 935.25,
"Close": 941,
"Volume": 1866,
"Date": new Date(1265691600000),
"DateString": "2/9/2010",
"Category": null,
"Change": -19,
"ChangePerCent": -1.9791666666666665
}, {
"Index": 39,
"Open": 941,
"High": 974.5,
"Low": 913.25,
"Close": 916,
"Volume": 1866,
"Date": new Date(1265778000000),
"DateString": "2/10/2010",
"Category": null,
"Change": -25,
"ChangePerCent": -2.6567481402763016
}, {
"Index": 40,
"Open": 916,
"High": 933.5,
"Low": 899,
"Close": 904,
"Volume": 1874.5,
"Date": new Date(1265864400000),
"DateString": "2/11/2010",
"Category": null,
"Change": -12,
"ChangePerCent": -1.3100436681222707
}, {
"Index": 41,
"Open": 904,
"High": 928.5,
"Low": 886.75,
"Close": 901,
"Volume": 1873.75,
"Date": new Date(1265950800000),
"DateString": "2/12/2010",
"Category": null,
"Change": -3,
"ChangePerCent": -0.33185840707964603
}, {
"Index": 42,
"Open": 901,
"High": 942.5,
"Low": 874,
"Close": 916,
"Volume": 1857.25,
"Date": new Date(1266037200000),
"DateString": "2/13/2010",
"Category": null,
"Change": 15,
"ChangePerCent": 1.6648168701442843
}, {
"Index": 43,
"Open": 916,
"High": 929.75,
"Low": 887.25,
"Close": 894,
"Volume": 1880.75,
"Date": new Date(1266123600000),
"DateString": "2/14/2010",
"Category": null,
"Change": -22,
"ChangePerCent": -2.4017467248908297
}, {
"Index": 44,
"Open": 894,
"High": 908.5,
"Low": 866.75,
"Close": 869,
"Volume": 1868.75,
"Date": new Date(1266210000000),
"DateString": "2/15/2010",
"Category": null,
"Change": -25,
"ChangePerCent": -2.796420581655481
}, {
"Index": 45,
"Open": 869,
"High": 898.75,
"Low": 846.25,
"Close": 894,
"Volume": 1884,
"Date": new Date(1266296400000),
"DateString": "2/16/2010",
"Category": null,
"Change": 25,
"ChangePerCent": 2.8768699654775602
}, {
"Index": 46,
"Open": 894,
"High": 922.5,
"Low": 871.25,
"Close": 904,
"Volume": 1898.5,
"Date": new Date(1266382800000),
"DateString": "2/17/2010",
"Category": null,
"Change": 10,
"ChangePerCent": 1.1185682326621924
}, {
"Index": 47,
"Open": 904,
"High": 921,
"Low": 879.25,
"Close": 893,
"Volume": 1873,
"Date": new Date(1266469200000),
"DateString": "2/18/2010",
"Category": null,
"Change": -11,
"ChangePerCent": -1.2168141592920354
}, {
"Index": 48,
"Open": 893,
"High": 917.5,
"Low": 855,
"Close": 882,
"Volume": 1885.5,
"Date": new Date(1266555600000),
"DateString": "2/19/2010",
"Category": null,
"Change": -11,
"ChangePerCent": -1.2318029115341544
}, {
"Index": 49,
"Open": 882,
"High": 913,
"Low": 864.25,
"Close": 886,
"Volume": 1872,
"Date": new Date(1266642000000),
"DateString": "2/20/2010",
"Category": null,
"Change": 4,
"ChangePerCent": 0.45351473922902497
}];
var financialData2 = [{
"Index": 0,
"Open": 1000,
"High": 1021.5,
"Low": 963.75,
"Close": 1020,
"Volume": 1989,
"Date": new Date(1262408400000),
"DateString": "1/2/2010",
"Category": null,
"Change": 20,
"ChangePerCent": 2
}, {
"Index": 1,
"Open": 1020,
"High": 1044,
"Low": 988.5,
"Close": 1029,
"Volume": 1980,
"Date": new Date(1262494800000),
"DateString": "1/3/2010",
"Category": null,
"Change": 9,
"ChangePerCent": 0.88235294117647056
}, {
"Index": 2,
"Open": 1029,
"High": 1055.5,
"Low": 1001,
"Close": 1043,
"Volume": 1984.75,
"Date": new Date(1262581200000),
"DateString": "1/4/2010",
"Category": null,
"Change": 14,
"ChangePerCent": 1.3605442176870748
}, {
"Index": 3,
"Open": 1043,
"High": 1075,
"Low": 1025,
"Close": 1054,
"Volume": 1972,
"Date": new Date(1262667600000),
"DateString": "1/5/2010",
"Category": null,
"Change": 11,
"ChangePerCent": 1.0546500479386385
}, {
"Index": 4,
"Open": 1054,
"High": 1081.25,
"Low": 1034.75,
"Close": 1044,
"Volume": 1991.75,
"Date": new Date(1262754000000),
"DateString": "1/6/2010",
"Category": null,
"Change": -10,
"ChangePerCent": -0.94876660341555974
}, {
"Index": 5,
"Open": 1044,
"High": 1056.25,
"Low": 1025,
"Close": 1048,
"Volume": 2014,
"Date": new Date(1262840400000),
"DateString": "1/7/2010",
"Category": null,
"Change": 4,
"ChangePerCent": 0.38314176245210724
}, {
"Index": 6,
"Open": 1048,
"High": 1067.75,
"Low": 1009.75,
"Close": 1026,
"Volume": 2020,
"Date": new Date(1262926800000),
"DateString": "1/8/2010",
"Category": null,
"Change": -22,
"ChangePerCent": -2.0992366412213741
}, {
"Index": 7,
"Open": 1026,
"High": 1048,
"Low": 996.5,
"Close": 1014,
"Volume": 2017.5,
"Date": new Date(1263013200000),
"DateString": "1/9/2010",
"Category": null,
"Change": -12,
"ChangePerCent": -1.1695906432748537
}, {
"Index": 8,
"Open": 1014,
"High": 1032,
"Low": 980.5,
"Close": 1022,
"Volume": 2011.75,
"Date": new Date(1263099600000),
"DateString": "1/10/2010",
"Category": null,
"Change": 8,
"ChangePerCent": 0.78895463510848129
}, {
"Index": 9,
"Open": 1022,
"High": 1050.25,
"Low": 989.5,
"Close": 1036,
"Volume": 2013,
"Date": new Date(1263186000000),
"DateString": "1/11/2010",
"Category": null,
"Change": 14,
"ChangePerCent": 1.36986301369863
}, {
"Index": 10,
"Open": 1036,
"High": 1054.25,
"Low": 1021.25,
"Close": 1044,
"Volume": 2005.75,
"Date": new Date(1263272400000),
"DateString": "1/12/2010",
"Category": null,
"Change": 8,
"ChangePerCent": 0.77220077220077221
}, {
"Index": 11,
"Open": 1044,
"High": 1062.5,
"Low": 1012.75,
"Close": 1024,
"Volume": 2024.25,
"Date": new Date(1263358800000),
"DateString": "1/13/2010",
"Category": null,
"Change": -20,
"ChangePerCent": -1.9157088122605364
}, {
"Index": 12,
"Open": 1024,
"High": 1049.25,
"Low": 1001.25,
"Close": 1006,
"Volume": 2020,
"Date": new Date(1263445200000),
"DateString": "1/14/2010",
"Category": null,
"Change": -18,
"ChangePerCent": -1.7578125
}, {
"Index": 13,
"Open": 1006,
"High": 1013.75,
"Low": 983.5,
"Close": 1007,
"Volume": 2011.75,
"Date": new Date(1263531600000),
"DateString": "1/15/2010",
"Category": null,
"Change": 1,
"ChangePerCent": 0.09940357852882703
}, {
"Index": 14,
"Open": 1007,
"High": 1034.25,
"Low": 986.75,
"Close": 1027,
"Volume": 1986.25,
"Date": new Date(1263618000000),
"DateString": "1/16/2010",
"Category": null,
"Change": 20,
"ChangePerCent": 1.9860973187686197
}, {
"Index": 15,
"Open": 1027,
"High": 1048,
"Low": 995,
"Close": 996,
"Volume": 1969.75,
"Date": new Date(1263704400000),
"DateString": "1/17/2010",
"Category": null,
"Change": -31,
"ChangePerCent": -3.0185004868549172
}, {
"Index": 16,
"Open": 996,
"High": 1020,
"Low": 976.75,
"Close": 976,
"Volume": 1945.25,
"Date": new Date(1263790800000),
"DateString": "1/18/2010",
"Category": null,
"Change": -20,
"ChangePerCent": -2.0080321285140563
}, {
"Index": 17,
"Open": 976,
"High": 999.5,
"Low": 955.75,
"Close": 979,
"Volume": 1938.75,
"Date": new Date(1263877200000),
"DateString": "1/19/2010",
"Category": null,
"Change": 3,
"ChangePerCent": 0.30737704918032788
}, {
"Index": 18,
"Open": 979,
"High": 997.75,
"Low": 957.5,
"Close": 975,
"Volume": 1948.25,
"Date": new Date(1263963600000),
"DateString": "1/20/2010",
"Category": null,
"Change": -4,
"ChangePerCent": -0.40858018386108275
}, {
"Index": 19,
"Open": 975,
"High": 987.75,
"Low": 938.25,
"Close": 949,
"Volume": 1960.5,
"Date": new Date(1264050000000),
"DateString": "1/21/2010",
"Category": null,
"Change": -26,
"ChangePerCent": -2.666666666666667
}, {
"Index": 20,
"Open": 949,
"High": 970.5,
"Low": 924,
"Close": 946,
"Volume": 1972.75,
"Date": new Date(1264136400000),
"DateString": "1/22/2010",
"Category": null,
"Change": -3,
"ChangePerCent": -0.31612223393045313
}, {
"Index": 21,
"Open": 946,
"High": 972.75,
"Low": 927,
"Close": 944,
"Volume": 1970.75,
"Date": new Date(1264222800000),
"DateString": "1/23/2010",
"Category": null,
"Change": -2,
"ChangePerCent": -0.21141649048625794
}, {
"Index": 22,
"Open": 944,
"High": 975.5,
"Low": 930.25,
"Close": 960,
"Volume": 1948.75,
"Date": new Date(1264309200000),
"DateString": "1/24/2010",
"Category": null,
"Change": 16,
"ChangePerCent": 1.6949152542372881
}, {
"Index": 23,
"Open": 960,
"High": 999.25,
"Low": 925.5,
"Close": 957,
"Volume": 1965,
"Date": new Date(1264395600000),
"DateString": "1/25/2010",
"Category": null,
"Change": -3,
"ChangePerCent": -0.3125
}, {
"Index": 24,
"Open": 957,
"High": 991.5,
"Low": 928.75,
"Close": 949,
"Volume": 1948,
"Date": new Date(1264482000000),
"DateString": "1/26/2010",
"Category": null,
"Change": -8,
"ChangePerCent": -0.8359456635318705
}, {
"Index": 25,
"Open": 949,
"High": 968.5,
"Low": 924,
"Close": 929,
"Volume": 1956.25,
"Date": new Date(1264568400000),
"DateString": "1/27/2010",
"Category": null,
"Change": -20,
"ChangePerCent": -2.1074815595363541
}, {
"Index": 26,
"Open": 929,
"High": 948.25,
"Low": 899,
"Close": 905,
"Volume": 1950,
"Date": new Date(1264654800000),
"DateString": "1/28/2010",
"Category": null,
"Change": -24,
"ChangePerCent": -2.5834230355220669
}, {
"Index": 27,
"Open": 905,
"High": 917.25,
"Low": 888.25,
"Close": 900,
"Volume": 1937.25,
"Date": new Date(1264741200000),
"DateString": "1/29/2010",
"Category": null,
"Change": -5,
"ChangePerCent": -0.55248618784530379
}, {
"Index": 28,
"Open": 900,
"High": 923.75,
"Low": 885,
"Close": 905,
"Volume": 1955.5,
"Date": new Date(1264827600000),
"DateString": "1/30/2010",
"Category": null,
"Change": 5,
"ChangePerCent": 0.55555555555555558
}, {
"Index": 29,
"Open": 905,
"High": 922,
"Low": 889.5,
"Close": 920,
"Volume": 1967.25,
"Date": new Date(1264914000000),
"DateString": "1/31/2010",
"Category": null,
"Change": 15,
"ChangePerCent": 1.6574585635359116
}, {
"Index": 30,
"Open": 920,
"High": 950.75,
"Low": 893.75,
"Close": 941,
"Volume": 1968.75,
"Date": new Date(1265000400000),
"DateString": "2/1/2010",
"Category": null,
"Change": 21,
"ChangePerCent": 2.2826086956521738
}, {
"Index": 31,
"Open": 941,
"High": 951,
"Low": 911,
"Close": 935,
"Volume": 1973,
"Date": new Date(1265086800000),
"DateString": "2/2/2010",
"Category": null,
"Change": -6,
"ChangePerCent": -0.6376195536663124
}, {
"Index": 32,
"Open": 935,
"High": 944.5,
"Low": 924.5,
"Close": 924,
"Volume": 1982.75,
"Date": new Date(1265173200000),
"DateString": "2/3/2010",
"Category": null,
"Change": -11,
"ChangePerCent": -1.1764705882352942
}, {
"Index": 33,
"Open": 924,
"High": 943.5,
"Low": 909.25,
"Close": 923,
"Volume": 2001.25,
"Date": new Date(1265259600000),
"DateString": "2/4/2010",
"Category": null,
"Change": -1,
"ChangePerCent": -0.10822510822510822
}, {
"Index": 34,
"Open": 923,
"High": 949,
"Low": 895,
"Close": 929,
"Volume": 2000.75,
"Date": new Date(1265346000000),
"DateString": "2/5/2010",
"Category": null,
"Change": 6,
"ChangePerCent": 0.65005417118093178
}, {
"Index": 35,
"Open": 929,
"High": 957.75,
"Low": 906.25,
"Close": 935,
"Volume": 1987.25,
"Date": new Date(1265432400000),
"DateString": "2/6/2010",
"Category": null,
"Change": 6,
"ChangePerCent": 0.64585575888051672
}, {
"Index": 36,
"Open": 935,
"High": 965.25,
"Low": 913,
"Close": 927,
"Volume": 1973.25,
"Date": new Date(1265518800000),
"DateString": "2/7/2010",
"Category": null,
"Change": -8,
"ChangePerCent": -0.85561497326203206
}, {
"Index": 37,
"Open": 927,
"High": 953.25,
"Low": 913.5,
"Close": 944,
"Volume": 1974.25,
"Date": new Date(1265605200000),
"DateString": "2/8/2010",
"Category": null,
"Change": 17,
"ChangePerCent": 1.8338727076591153
}, {
"Index": 38,
"Open": 944,
"High": 957.75,
"Low": 923.75,
"Close": 923,
"Volume": 1962,
"Date": new Date(1265691600000),
"DateString": "2/9/2010",
"Category": null,
"Change": -21,
"ChangePerCent": -2.2245762711864407
}, {
"Index": 39,
"Open": 923,
"High": 951.25,
"Low": 903.5,
"Close": 912,
"Volume": 1970.5,
"Date": new Date(1265778000000),
"DateString": "2/10/2010",
"Category": null,
"Change": -11,
"ChangePerCent": -1.1917659804983749
}, {
"Index": 40,
"Open": 912,
"High": 929.75,
"Low": 888.25,
"Close": 896,
"Volume": 1959.25,
"Date": new Date(1265864400000),
"DateString": "2/11/2010",
"Category": null,
"Change": -16,
"ChangePerCent": -1.7543859649122806
}, {
"Index": 41,
"Open": 896,
"High": 921.75,
"Low": 885.5,
"Close": 915,
"Volume": 1942.5,
"Date": new Date(1265950800000),
"DateString": "2/12/2010",
"Category": null,
"Change": 19,
"ChangePerCent": 2.1205357142857144
}, {
"Index": 42,
"Open": 915,
"High": 926,
"Low": 883.25,
"Close": 902,
"Volume": 1937.5,
"Date": new Date(1266037200000),
"DateString": "2/13/2010",
"Category": null,
"Change": -13,
"ChangePerCent": -1.4207650273224044
}, {
"Index": 43,
"Open": 902,
"High": 923.5,
"Low": 868,
"Close": 897,
"Volume": 1941.25,
"Date": new Date(1266123600000),
"DateString": "2/14/2010",
"Category": null,
"Change": -5,
"ChangePerCent": -0.55432372505543237
}, {
"Index": 44,
"Open": 897,
"High": 922,
"Low": 877.5,
"Close": 920,
"Volume": 1927,
"Date": new Date(1266210000000),
"DateString": "2/15/2010",
"Category": null,
"Change": 23,
"ChangePerCent": 2.5641025641025639
}, {
"Index": 45,
"Open": 920,
"High": 961.5,
"Low": 903.25,
"Close": 923,
"Volume": 1923.25,
"Date": new Date(1266296400000),
"DateString": "2/16/2010",
"Category": null,
"Change": 3,
"ChangePerCent": 0.32608695652173914
}, {
"Index": 46,
"Open": 923,
"High": 948.25,
"Low": 891.25,
"Close": 934,
"Volume": 1940.25,
"Date": new Date(1266382800000),
"DateString": "2/17/2010",
"Category": null,
"Change": 11,
"ChangePerCent": 1.1917659804983749
}, {
"Index": 47,
"Open": 934,
"High": 958.75,
"Low": 915,
"Close": 932,
"Volume": 1946,
"Date": new Date(1266469200000),
"DateString": "2/18/2010",
"Category": null,
"Change": -2,
"ChangePerCent": -0.21413276231263384
}, {
"Index": 48,
"Open": 932,
"High": 948,
"Low": 903,
"Close": 938,
"Volume": 1942.25,
"Date": new Date(1266555600000),
"DateString": "2/19/2010",
"Category": null,
"Change": 6,
"ChangePerCent": 0.64377682403433478
}, {
"Index": 49,
"Open": 938,
"High": 965.25,
"Low": 923.25,
"Close": 947,
"Volume": 1905.5,
"Date": new Date(1266642000000),
"DateString": "2/20/2010",
"Category": null,
"Change": 9,
"ChangePerCent": 0.95948827292110883
}];
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
declare var financialData1;
declare var financialData2;
$(function () {
var chartTypeScript = $("#chartTypeScript");
var zoombar = $("#zoombar");
chartTypeScript.igDataChart({
width: "100%",
height: "300px",
axes: [
{
name: "xAxis",
type: "categoryX",
dataSource: financialData1,
label: "DateString",
interval: 1,
title: "Date"
},
{
name: "yAxis",
type: "numericY",
title: "Price"
}
],
series: [
{
name: "series1",
dataSource: financialData1,
title: "Price Series",
type: "financial",
isTransitionInEnabled: true,
displayType: "candlestick",
xAxis: "xAxis",
yAxis: "yAxis",
openMemberPath: "Open",
highMemberPath: "High",
lowMemberPath: "Low",
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
closeMemberPath: "Close",
thickness: 1,
trendLineBrush: "rgba(68, 172, 214, .8)",
trendLineThickness: 5,
trendLineType: "exponentialAverage",
negativeBrush: "rgba(198, 45, 54, .8)"
},
{
name: "series2",
dataSource: financialData2,
title: "Price Series",
type: "financial",
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
openMemberPath: "Open",
highMemberPath: "High",
lowMemberPath: "Low",
closeMemberPath: "Close",
thickness: 1,
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
trendLineBrush: "rgba(73, 73, 73, .8)",
trendLineThickness: 5,
trendLineType: "exponentialAverage",
negativeBrush: "rgba(198, 45, 54, .8)",
displayType: "candlestick"
}
],
horizontalZoomable: true,
verticalZoomable: false,
windowResponse: "immediate",
});
zoombar.igZoombar({
target: "#chartTypeScript",
zoomWindowMinWidth: 1.2,
});
});