igDataChart - different approaches

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>
<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="stackedBar" style="margin-bottom: 1rem"></div>
<div id="testStacked" style="margin-bottom: 1rem"></div>
<div id="waterfall"></div>
<div id="testWaterfall"></div>

JavaScript

$(function () {

var testDataWaterfall = [
                { "Country": "China", "China": 60 },
                { "Country": "India", "India": 50 },
                { "Country": "Russia", "Russia": 40 },
            ];

var testDataStacked =  [
		{
			"Country": "Total",
			"Total": 140,
		},
		{
			"Country": "Canada",
			"Canada": 20,
		},
		{
			"Country": "Russia",
			"Russia": 30,
		},
    {
			"Country": "Germany",
			"Germany": 40,
		},
    {
			"Country": "France",
			"France": 50,
		}
	];
            
    var data =  [
		{
			"Year": 2005,
			"Canada": 18.8932,
			"SaudiArabia": 25.4401,
			"Russia": 51.0796,
			"UnitedStates": 69.4437,
			"China": 63.9524,
		},
		{
			"Year": 2006,
			"Canada": 19.2273,
			"SaudiArabia": 24.6105,
			"Russia": 52.0557,
			"UnitedStates": 70.7539,
			"China": 68.2333,
		},
    {
			"Year": 2007,
			"Canada": 20.2273,
			"SaudiArabia": 25.6105,
			"Russia": 55.0557,
			"UnitedStates": 73.7539,
			"China": 70.2333,
		},
    {
			"Year": 2008,
			"Canada": 24.2273,
			"SaudiArabia": 29.6105,
			"Russia": 60.0557,
			"UnitedStates": 79.7539,
			"China": 75.2333,
		}
	];

	function CreateStackedFragment(memberPath) {

		var stackFragment = {
			name: memberPath + "Fragment",
			title: memberPath,
			valueMemberPath: memberPath,
			type: "stackedFragment",
			showTooltip: true,
			tooltipTemplate: memberPath,
		};
		return stackFragment;
	}
  
  $('#stackedBar').igDataChart({
		dataSource: data,
		height: "200px",
		width: "600px",
		title: "Stacked Bar",
		horizontalZoomable: true,
		verticalZoomable: true,
		windowResponse: "immediate",
		axes: [ 
				{ name: "xAxis", type: "numericX", title: "Quadrillion Btu" },
				{ name: "yAxis", type: "categoryY", label: "Year", gap: 0.5, }
		],
		series: [
			{
			  name: "stackedBarSeries",
			  type: "stackedBar",
			  xAxis: "xAxis",
			  yAxis: "yAxis",
			  outline: "transparent",
			  series: [
				  CreateStackedFragment("Canada"),
				  CreateStackedFragment("Russia"),
				 ...