Available in the OSS Version
Zoombar - Overview
The igZoombar is a jQuery UI zooming slider control.
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.
The zoombar is similar to a slider and has two handles representing minimum and maximum values. You can use it with the igDataChart to easily display a subset of the data. See the complete list of samples in the menu.
Code View
Copy to Clipboard
<div id="chartOverview"></div>
<div id="zoomOverview"></div>
<div id="buttonset" class="buttonset">
<input type="radio" id="day" name="radio"></input><label for="day">Day</label>
<input type="radio" id="week" name="radio"></input><label for="week">Week</label>
<input type="radio" id="month" name="radio"></input><label for="month">Month</label>
</div>
<div id="date">
</div>
<div id="popoverLeft"></div>
<div id="popoverRight"></div>
.buttonset
{
position: absolute;
top: 0px;
left: 50px;
z-index: 10000;
}
.buttonset > label
{
width: 60px;
height: 26px;
margin-right: -4px!important;
}
.tooltip{
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/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="chartOverview"></div>
<div id="zoomOverview"></div>
<div id="buttonset" class="buttonset">
<input type="radio" id="day" name="radio" /><label for="day">Day</label>
<input type="radio" id="week" name="radio" /><label for="week">Week</label>
<input type="radio" id="month" name="radio" /><label for="month">Month</label>
</div>
<div id="date">
</div>
<div id="popoverLeft"></div>
<div id="popoverRight"></div>
<script src="/data-files/financial-data-random.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var chartOverview = $("#chartOverview"),
zoombarOverview = $("#zoomOverview"),
popoverTimeout = 0,
popoverLeft,
popoverRight,
lastTarget,
currentlyDragged,
zoomParams;
chartOverview.igDataChart({
width: "100%",
height: "300px",
axes: [
{
name: "xAxis",
type: "categoryDateTimeX",
dataSource: financialData1,
dateTimeMemberPath: "Date",
labelVisibility: "visible"
},
{
name: "yAxis",
type: "numericY"
}
],
series: [
{
name: "series1",
dataSource: financialData1,
title: "Price Series",
type: "financial",
isTransitionInEnabled: true,
displayType: "ohlc",
xAxis: "xAxis",
yAxis: "yAxis",
openMemberPath: "Open",
highMemberPath: "High",
lowMemberPath: "Low",
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
closeMemberPath: "Close",
thickness: 2,
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: 2,
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
trendLineBrush: "rgba(73, 73, 73, .8)",
trendLineThickness: 5,
trendLineType: "exponentialAverage",
negativeBrush: "rgba(198, 45, 54, .8)",
displayType: "ohlc"
}
],
horizontalZoomable: true,
verticalZoomable: false,
windowResponse: "immediate",
refreshCompleted: function (e, ui) {
if ($("#chartOverview")[0] !== undefined && $("#chartOverview")[0] !== null) {
var viewport = ui.chart.gridAreaRect,
leftMostValue = $("#chartOverview").igDataChart("unscaleValue", "xAxis", viewport.left),
rightMostValue = $("#chartOverview").igDataChart("unscaleValue", "xAxis", viewport.left + viewport.width);
// get the dates corresponding to the values
leftMostValue = new Date(leftMostValue);
rightMostValue = new Date(rightMostValue);
// set the dates to the popover
if (popoverLeft.data("igPopover")) {
popoverLeft.igPopover("setContent", $.ig.formatter(leftMostValue, "date", "date"));
}
if (popoverRight.data("igPopover")) {
popoverRight.igPopover("setContent", $.ig.formatter(rightMostValue, "date", "date"));
}
zoomParams = {
left: ui.chart.actualWindowRect ? ui.chart.actualWindowRect.left : 0.35,
width: ui.chart.actualWindowRect ? ui.chart.actualWindowRect.width : 0.30
}
}
}
});
$("#zoomOverview").igZoombar({
target: "#chartOverview",
zoomWindowMinWidth: 1.2,
windowResized: function (evt, ui) {
var target = $(evt.originalEvent.target),
handle = target.hasClass("ui-igzoombar-window-handle") ?
target : lastTarget,
handle = handle.igPopover({
direction: "top"
}),
container =handle ? handle.igPopover("container").parent().parent(): null;
if (target.hasClass("ui-igzoombar-window-handle")) {
lastTarget = target;
}
if (currentlyDragged && handle[0] !== currentlyDragged[0]) {
currentlyDragged.igPopover("hide");
}
// show the popover if it's not already visible
if (container && !container.is(":visible")) {
handle.igPopover("show");
}
if (handle) {
// update popovers position
handle.igPopover("setCoordinates", {
top: handle.offset().top - container.outerHeight(),
left: handle.offset().left - container.outerWidth() / 2 + 5
});
currentlyDragged = handle;
if (popoverTimeout > 0) {
clearTimeout(popoverTimeout);
}
popoverTimeout = setTimeout(function () {
popoverLeft.igPopover("hide");
popoverRight.igPopover("hide");
popoverTimeout = 0;
}, 2000);
// finally reset the buttonset
$("#buttonset input").removeAttr("checked");
$("#buttonset").buttonset("refresh");
}
}
});
var lastSelectedButton;
function onClick(button, label) {
var newWidth,
activeCss = "ui-state-active",
viewport = chartOverview.igDataChart("option", "gridAreaRect"),
leftMostValue = chartOverview.igDataChart("unscaleValue", "xAxis", viewport.left);
if (button === "day") {
newWidth = 24 * 60 * 60 * 1000;
} else if (button === "week") {
newWidth = 7 * 24 * 60 * 60 * 1000;
} else if (button === "month") {
newWidth = 30 * 24 * 60 * 60 * 1000;
}
// do not process same selected button twice
if (!newWidth || lastSelectedButton === button)
return;
lastSelectedButton = button;
newWidth = chartOverview.igDataChart("scaleValue", "xAxis", new Date(leftMostValue + newWidth));
zoombarOverview.igZoombar("zoom", zoomParams.left * 100, (newWidth * zoomParams.width / viewport.width) * 100);
// verify/fix appearance of active button
if (label) {
setTimeout(function () {
// condition when mouse-click of buttonset failed
if (label.className.indexOf(activeCss) < 0) {
var old = $("#buttonset").find("." + activeCss);
old.removeClass(activeCss).removeClass("ui-state-focus");
label.className += " " + activeCss;
}
}, 40);
}
}
// Note: buttonset has a bug with raising click events.
// To get around, use mouseup with check for "LABEL.htmlFor"
$("#buttonset").buttonset().click(function (evt) {
onClick(evt.target.id);
}).mouseup(function(evt) {
var label = evt.target;
if (label.nodeName !== "LABEL")
label = label.parentNode;
onClick(label.htmlFor, label);
});
popoverLeft = $("#zoomOverview_zoombar_mask_left_handle");
popoverRight = $("#zoomOverview_zoombar_mask_right_handle");
popoverLeft.igPopover({
direction: "top",
showOn: "focus"
});
popoverRight.igPopover({
direction: "top",
showOn: "focus"
});
});
</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
}];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.dv.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/js-data/financial-data-random"></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>
<div id="date">
</div>
<div id="popoverLeft"></div>
<div id="popoverRight"></div>
<script src="/js-data/financial-data-random"></script>
<script>
System.config( {
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
} );
System.import('financial-chart.ts').then(null, console.error.bind(console));
</script>
</body>
</html>
import { Component, NgModule, ViewChild } from '@angular/core';
import { IgDataChartComponent, IgZoombarComponent, IgPopoverComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
declare var jQuery: any;
@Component({
selector: 'my-app',
template: `<ig-data-chart [(options)]="chartOpts" #chart (refreshCompleted)="chartRefreshCompleted($event)" [widgetId]='"chart"'></ig-data-chart>
<ig-zoombar [(options)]="zoombarOpts" (windowResized)="zoombarWindowResized($event)" [widgetId]='"zoom"' #zoom></ig-zoombar>
<div id="buttonset" class="buttonset" #buttonset>
<input type="radio" id="day" name="radio" /><label for="day">Day</label>
<input type="radio" id="week" name="radio" /><label for="week">Week</label>
<input type="radio" id="month" name="radio" /><label for="month">Month</label>
</div>
<div id="date">
</div>
<ig-popover widgetId="popoverLeft" #popoverLeft [options]="popOpts1"></ig-popover>
<ig-popover widgetId="popoverRight" #popoverRight [options]="popOpts2"></ig-popover>`
})
export class AppComponent implements ngAfterViewInit{
private data: any;
private chartOpts: any;
private zoombarOpts: any;
private popOpts1: any;
private popOpts2: any;
private zoomParams: object = {};
private popoverTimeout: number = 0;
private $lastSelectedButton;
private $currentlyDragged;
private $lastTarget;
@ViewChild("buttonset") buttonset: ElementRef;
@ViewChild("chart") chart: IgDataChartComponent;
@ViewChild("zoom") zoombar: IgZoombarComponent;
@ViewChild("popoverLeft") popoverLeft: IgPopoverComponent;
@ViewChild("popoverRight") popoverRight: IgPopoverComponent;
ngAfterViewInit() {
var self = this;
this.$chart = jQuery("#chart");
this.$zoombar = jQuery(this.zoombar.nativeElement);
jQuery(this.buttonset.nativeElement).buttonset()
.click(function (evt) {
self.onClick(evt.target.id);
}).mouseup(function (evt) {
var label = evt.target;
label = (label.nodeName !== "LABEL") ? label.parentNode : label;
self.onClick(label.htmlFor, label);
});
}
onClick(button, label) {
var newWidth,
activeCss = "ui-state-active",
viewport = this.chart.option("gridAreaRect"),
leftMostValue = this.chart.unscaleValue("xAxis", viewport.left);
if (button === "day") {
newWidth = 24 * 60 * 60 * 1000;
} else if (button === "week") {
newWidth = 7 * 24 * 60 * 60 * 1000;
} else if (button === "month") {
newWidth = 30 * 24 * 60 * 60 * 1000;
}
// do not process same selected button twice
if (!newWidth || this.$lastSelectedButton === button)
return;
this.$lastSelectedButton = button;
newWidth = this.chart.scaleValue("xAxis", new Date(leftMostValue + newWidth));
this.zoombar.zoom(this.zoomParams.left * 100, (newWidth * this.zoomParams.width / viewport.width) * 100);
// verify/fix appearance of active button
if (label) {
setTimeout(function () {
// condition when mouse-click of buttonset failed
if (label.className.indexOf(activeCss) < 0) {
var old = jQuery("#buttonset").find("." + activeCss);
old.removeClass(activeCss).removeClass("ui-state-focus");
label.className += " " + activeCss;
}
}, 40);
}
}
zoombarWindowResized($event) {
var target = jQuery($event.event.originalEvent.target),
handle = target.hasClass("ui-igzoombar-window-handle") ?
target : this.$lastTarget,
self = this,
container = handle ? handle.igPopover("container").parent().parent() : null;
if (target.hasClass("ui-igzoombar-window-handle")) {
this.$lastTarget = target;
}
if (this.$currentlyDragged && handle[0] !== this.$currentlyDragged[0]) {
this.$currentlyDragged.igPopover("hide");
}
// show the popover if it's not already visible
if (container && !container.is(":visible")) {
handle.igPopover("show");
}
if (handle) {
// update popovers position
handle.igPopover("setCoordinates", {
top: handle.offset().top - container.outerHeight(),
left: handle.offset().left - container.outerWidth() / 2 + 5
});
this.$currentlyDragged = handle;
if (this.popoverTimeout > 0) {
clearTimeout(this.popoverTimeout);
}
this.popoverTimeout = setTimeout(function () {
popoverLeft.igPopover("hide");
popoverRight.igPopover("hide");
self.popoverTimeout = 0;
}, 2000);
// finally reset the buttonset
jQuery("#buttonset input").removeAttr("checked");
jQuery("#buttonset").buttonset("refresh");
}
}
constructor() {
this.buttonset
this.popOpts1 = {
direction: "top",
showOn: "focus"
}
this.popOpts2 = {
direction: "top",
showOn: "focus"
}
this.chartOpts = {
width: "100%",
height: "300px",
axes: [
{
name: "xAxis",
type: "categoryDateTimeX",
dataSource: financialData1,
dateTimeMemberPath: "Date",
labelVisibility: "visible"
},
{
name: "yAxis",
type: "numericY"
}
],
series: [
{
name: "series1",
dataSource: financialData1,
title: "Price Series",
type: "financial",
isTransitionInEnabled: true,
displayType: "ohlc",
xAxis: "xAxis",
yAxis: "yAxis",
openMemberPath: "Open",
highMemberPath: "High",
lowMemberPath: "Low",
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
closeMemberPath: "Close",
thickness: 2,
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: 2,
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
trendLineBrush: "rgba(73, 73, 73, .8)",
trendLineThickness: 5,
trendLineType: "exponentialAverage",
negativeBrush: "rgba(198, 45, 54, .8)",
displayType: "ohlc"
}
],
horizontalZoomable: true,
verticalZoomable: false,
windowResponse: "immediate"
};
this.zoombarOpts = {
target: "#chart",
zoomWindowMinWidth: 1.2,
};
}
chartRefreshCompleted ($event) {
var viewport = this.chart.option("gridAreaRect"),
leftMostValue = this.chart.unscaleValue("xAxis", viewport.left),
rightMostValue = this.chart.unscaleValue("xAxis", viewport.left + viewport.width);
// get the dates corresponding to the values
leftMostValue = new Date(leftMostValue);
rightMostValue = new Date(rightMostValue);
// set the dates to the popover
this.popoverLeft.setContent(jQuery.ig.formatter(leftMostValue, "date", "date"));
this.popoverRight.setContent(jQuery.ig.formatter(rightMostValue, "date", "date"));
this.zoomParams = {
left: $event.ui.chart.actualWindowRect ? $event.ui.chart.actualWindowRect.left : 0.35,
width: $event.ui.chart.actualWindowRect ? $event.ui.chart.actualWindowRect.width : 0.30
}
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, IgDataChartComponent, IgZoombarComponent, IgPopoverComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.dv.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.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>
<script src="/js-data/financial-data-random"></script>
<div id="app">
<!--Sample JSON Data-->
<script type="text/babel">
var chart, zoombar, popoverLeft, popoverRight,
popoverTimeout = 0, lastTarget,
currentlyDragged,
zoomParams;
var lastSelectedButton;
function onClick(button, label) {
var newWidth,
activeCss = "ui-state-active",
viewport = chart.igDataChart("option", "gridAreaRect"),
leftMostValue = chart.igDataChart("unscaleValue", "xAxis", viewport.left);
if (button === "day") {
newWidth = 24 * 60 * 60 * 1000;
} else if (button === "week") {
newWidth = 7 * 24 * 60 * 60 * 1000;
} else if (button === "month") {
newWidth = 30 * 24 * 60 * 60 * 1000;
}
// do not process same selected button twice
if (!newWidth || lastSelectedButton === button)
return;
lastSelectedButton = button;
newWidth = chart.igDataChart("scaleValue", "xAxis", new Date(leftMostValue + newWidth));
zoombar.igZoombar("zoom", zoomParams.left * 100, (newWidth * zoomParams.width / viewport.width) * 100);
// verify/fix appearance of active button
if (label) {
setTimeout(function () {
// condition when mouse-click of buttonset failed
if (label.className.indexOf(activeCss) < 0) {
var old = $("#buttonset").find("." + activeCss);
old.removeClass(activeCss).removeClass("ui-state-focus");
label.className += " " + activeCss;
}
}, 40);
}
}
var IgButtonset = React.createClass({
render: function () {
return <div id={this.props.id} className="buttonset">
<input type="radio" id="day" name="radio" /><label htmlFor="day">Day</label>
<input type="radio" id="week" name="radio" /><label htmlFor="week">Week</label>
<input type="radio" id="month" name="radio" /><label htmlFor="month">Month</label>
</div>
},
componentDidMount: function () {
$("#buttonset").buttonset()
.click(function (evt) {
onClick(evt.target.id);
}).mouseup(function(evt) {
var label = evt.target;
if (label.nodeName !== "LABEL")
label = label.parentNode;
onClick(label.htmlFor, label);
});
}
});
var App = React.createClass({
componentDidMount: function () {
popoverLeft = $("#popoverLeft");
popoverRight = $("#popoverRight");
chart = $("#chart");
zoombar = $("#zoom");
},
render: function () {
return <div>
<IgDataChart id="chart"
width="100%"
height="300px"
axes={[
{
name: "xAxis",
type: "categoryDateTimeX",
dataSource: financialData1,
dateTimeMemberPath: "Date",
labelVisibility: "visible"
},
{
name: "yAxis",
type: "numericY"
}
]}
series={[
{
name: "series1",
dataSource: financialData1,
title: "Price Series",
type: "financial",
isTransitionInEnabled: true,
displayType: "ohlc",
xAxis: "xAxis",
yAxis: "yAxis",
openMemberPath: "Open",
highMemberPath: "High",
lowMemberPath: "Low",
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
closeMemberPath: "Close",
thickness: 2,
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: 2,
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
trendLineBrush: "rgba(73, 73, 73, .8)",
trendLineThickness: 5,
trendLineType: "exponentialAverage",
negativeBrush: "rgba(198, 45, 54, .8)",
displayType: "ohlc"
}
]}
horizontalZoomable={true} verticalZoomable={false} windowResponse="immediate"
refreshCompleted={function (e, ui) {
if (chart && chart.igDataChart) {
var viewport = chart.igDataChart("option", "gridAreaRect"),
leftMostValue = chart.igDataChart("unscaleValue", "xAxis", viewport.left),
rightMostValue = $("#chart").igDataChart("unscaleValue", "xAxis", viewport.left + viewport.width);
// get the dates corresponding to the values
leftMostValue = new Date(leftMostValue);
rightMostValue = new Date(rightMostValue);
// set the dates to the popover
if (popoverLeft.data("igPopover")) {
popoverLeft.igPopover("setContent", $.ig.formatter(leftMostValue, "date", "date"));
}
if (popoverRight.data("igPopover")) {
popoverRight.igPopover("setContent", $.ig.formatter(rightMostValue, "date", "date"));
}
zoomParams = {
left: ui.chart.actualWindowRect ? ui.chart.actualWindowRect.left : 0.35,
width: ui.chart.actualWindowRect ? ui.chart.actualWindowRect.width : 0.30
}
}
}} />
<IgZoombar id="zoom" target="#chart" zoomWindowMinWidth={1.2}
windowResized={function (evt, ui) {
var target = $(evt.originalEvent.target),
handle = target.hasClass("ui-igzoombar-window-handle") ?
target : lastTarget,
container =handle ? handle.igPopover("container").parent().parent(): null;
if (target.hasClass("ui-igzoombar-window-handle")) {
lastTarget = target;
}
if (currentlyDragged && handle[0] !== currentlyDragged[0]) {
currentlyDragged.igPopover("hide");
}
// show the popover if it's not already visible
if (container && !container.is(":visible")) {
handle.igPopover("show");
}
if (handle) {
// update popovers position
handle.igPopover("setCoordinates", {
top: handle.offset().top - container.outerHeight(),
left: handle.offset().left - container.outerWidth() / 2 + 5
});
currentlyDragged = handle;
if (popoverTimeout > 0) {
clearTimeout(popoverTimeout);
}
popoverTimeout = setTimeout(function () {
popoverLeft.igPopover("hide");
popoverRight.igPopover("hide");
popoverTimeout = 0;
}, 2000);
// finally reset the buttonset
$("#buttonset input").removeAttr("checked");
$("#buttonset").buttonset("refresh");
}
}}/>
<IgButtonset id="buttonset"></IgButtonset>
<div id="date"></div>
<IgPopover id="popoverLeft" direction="top" showOn="focus"/>
<IgPopover id="popoverRight" direction="top" showOn="focus"/>
</div>
}
});
ReactDOM.render(
<App />,
document.getElementById("app"));
</script>
</div>
</body>
</html>