Available in the Full Version

Data Chart - Time X-Axis with Axis Breaks

This sample demonstrates the axis break feature that is displayed using the Time X-Axis.

This sample is designed for a larger screen size.

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

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <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>
	
    <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>
</head>
<body>


    <div id="chartOverview"></div>
    <div id="zoomOverview"></div>
  

    <script src="/data-files/financial-data-random.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
		    var chartOverview = $("#chartOverview"),
				
				popoverTimeout = 0,
				popoverLeft,
				popoverRight,
				lastTarget,
				currentlyDragged,                
				zoomParams;
		    chartOverview.igDataChart({
               
				width: "100%",
				height: "400px",
				axes: [
					{
						name: "xAxis",
						type: "time",
						dataSource: financialData1,
						dateTimeMemberPath: "Date",
						labelVisibility: "visible",

						breaks: [{
						    start: new Date("2009-12-26T00:00:00"),
						    end: new Date("2009-12-27T23:59:59.99"),
						    interval: 7 * 24 * 60 * 60 * 1000
						}],				
					},
					{
						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: true,
				windowResponse: "immediate"
			});
		    $("#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,
						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);
				}
			}
		});
    </script>

</body>
</html>