Available in the OSS Version

Zoombar - Financial Chart

TThis sample demonstrates the basic zoombar functionality along an igDataChart with financial series.

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Additional controls enable resizing of the zoom window to a specific period of time and show popovers with date information for the left and right borders.

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.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.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:&nbsp;</span><span>${item.Open}</span><br />
		<span class="tooltip">Low:&nbsp;</span><span>${item.Low}</span><br />
		<span class="tooltip">High:&nbsp;</span><span>${item.High}</span><br />
		<span class="tooltip">Close:&nbsp;</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>