igDataChart - stacked chart zoom

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://igniteui.com/js-data/world-energy-production"></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>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>

<div class="chart" id="stackedBar1"></div>
<div class="chart" id="stackedBar2"></div>

JavaScript

$(function () {

  var baseDateTicks = new Date(2023, 1, 16, 9, 0).getTime();
  
  //first data set
  var data1 = [{
			"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",
      
      "TS5":1600000,
			"TS5Color":"#ff0000",
			"TS5Text":"Downtime",
		}]
   
  //second data set
  var data2 = [
		{
			"Name":"Machine 2",
			"TS0":180000,
			"TS0Color":"transparent",
			"TS0Text":"Gap",
			
			"TS1":180000,
			"TS1Color":"#ff0000",
			"TS1Text":"Downtime",
			
			"TS2":240000,
			"TS2Color":"transparent",
      "TS2Text":"Gap",

			"TS3":600000,
			"TS3Color":"#00ff00",
			"TS3Text":"Uptime",
			
			"TS4":1200000,
			"TS4Color":"#ff0000",
			"TS4Text":"Downtime",
			
			"TS5":1600000,
			"TS5Color":"#00ff00",
			"TS5Text":"Uptime"
		}
	]
  
  //variables
  var count = 0;
  var dataset = 1;
  var brush = '';  	
  var tooltip = '';
  var data = [];

  // create stacked fragment
  function CreateStackedFragment(memberPath) {
    
    //check which data chart is call the function/ which data set to get 
    if(dataset === 1){
      data = data1;
    } else {
    	data = data2;
    } 
    
    //itterate througt data records
    //set color brush
    //set text tooltip
    if(count === 0){
       brush = data[0].TS0Color;
       tooltip = data[0].TS0Text;
    } else if(count === 1){
    	 brush = data[0].TS1Color;
       tooltip = data[0].TS1Text;
    } else if(count === 2){
    	 brush = data[0].TS2Color;
       tooltip = data[0].TS2Text;
    } else if(count === 3){
    	 brush = data[0].TS3Color;
       tooltip = data[0].TS3Text;
    } else if(count === 4){
    	 brush = data[0].TS4Color;
       tooltip = data[0].TS4Text;
    } else if(count === 5){
    	...