igDataChart - stacked chart waterfall

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="stackedBar"></div>
<div id="zoomOverview"></div>

JavaScript

$(function () {

// your data item/ hidden value / visible value 1 and 2 (range)
var data =  [
		{ "Label": "Item1", "HiddenValue":   0, "VisibleValue1": 100, "VisibleValue2": 20 },
		{ "Label": "Item2", "HiddenValue": 120, "VisibleValue1":  40, "VisibleValue2":  0 },
		{ "Label": "Item3", "HiddenValue": 140, "VisibleValue1":  20, "VisibleValue2":  0 },
		{ "Label": "Item4", "HiddenValue": 160, "VisibleValue1":  10, "VisibleValue2":  0 },
		{ "Label": "Item5", "HiddenValue": 150, "VisibleValue1":  20, "VisibleValue2":  0 },
		{ "Label": "Item6", "HiddenValue": 170, "VisibleValue1":  10, "VisibleValue2":  0 },
		{ "Label": "Item7", "HiddenValue": 140, "VisibleValue1":  20, "VisibleValue2": 20 },
		{ "Label": "Item8", "HiddenValue":   0, "VisibleValue1": 180, "VisibleValue2": 20 },
		 
	];
  
  // create stacked fragment
  function CreateStackedFragment(memberPath, brush) {
		var stackFragment = {
      brush: brush,
      outline: brush,
			name: memberPath + "Fragment",
			title: memberPath,
			valueMemberPath: memberPath,
			type: "stackedFragment",
			showTooltip: true,
			tooltipTemplate: memberPath,
		};
		return stackFragment;
	}
  
  //create the chart
	$("#stackedBar").igDataChart({
		dataSource: data,
		height: "400px",
		width: "700px",
    //simulate waterfall
		title: "Stacked Bar - with hidden values",
		horizontalZoomable: true,
		verticalZoomable: true,
		windowResponse: "immediate",
		axes: [ 
				{ name: "xAxis", type: "numericX", title: "Quadrillion Btu", },
				{ name: "yAxis", type: "categoryY", label: "Label", gap: 0.5, overlap: 1.0, isInverted: true}
		],
		series: [
			{
			  name: "stackedBarSeries",
			  type: "stackedBar",
			  xAxis: "xAxis",
			  yAxis: "yAxis",
			  outline: "transparent",
			  series: [
				  CreateStackedFragment("HiddenValue", "transparent"),
				  CreateStackedFragment("VisibleValue1", "red"),
				  CreateStackedFragment("VisibleValue2", "blue"), 
			  ]
		  }
		], 
	});
});