igDataChart - zoombar stacked chart

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js-data/financial-data-random"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>



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

JavaScript

$(function () {
	function CreateStackedFragment(memberPath, brush) {

 		// create stacked fragment
		var stackFragment = {
		  brush: brush == null ? "transparent": brush,
			outline: brush == null ? "transparent": brush,

			name: memberPath + "Fragment",
			title: brush == null ? "": memberPath,
			valueMemberPath: memberPath,
			type: "stackedFragment",
			showTooltip: true,
			tooltipTemplate: memberPath,
		};
		return stackFragment;
	}

	//set value 
	var baseDateTicks = new Date(2023, 1, 16, 9, 0).getTime();
	
  //data
	var dataTime = [
		{
			"Name":"Machine 1",
			"TS0":180000,
			"TS0Color":"#ff0000",
			"TS0Text":"Downtime",
			
			"TS1":180000,
			"TS1Color":"#ffff00",
			"TS1Text":"Maintenance",
			
			"TS2":240000,
			"TS2Color":"#00ff00",
			"TS2Text":"Uptime",
			
			"TS3":600000,
			"TS3Color":"#ff0000",
			"TS3Text":"Downtime",
			
			"TS4":1200000,
			"TS4Color":"#00ff00",
			"TS4Text":"Uptime"
		},
		{
			"Name":"Machine 2",
			"TS0":60000,
			"TS0Color":"transparent",
			"TS0Text":"Gap",
			
			"TS1":120000,
			"TS1Color":"#ff0000",
			"TS1Text":"Downtime",
			
			"TS2":180000,
			"TS2Color":"transparent",
			
			"TS2Text":"Gap",
			"TS3":240000,
			"TS3Color":"#00ff00",
			"TS3Text":"Uptime",
			
			"TS4":600000,
			"TS4Color":"#ff0000",
			"TS4Text":"Downtime",
			
			"TS5":1200000,
			"TS5Color":"#00ff00",
			"TS5Text":"Uptime"
		}
	]

	var renderTimeStackedChart = function(){
		var series = [
			{
				"name":"stackedBarSeriesMachine...