igDataChart - 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>
<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 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 CreateSeries(seriesType, seriesMemberPath) {
                var thickness = 10;
                var markerType = "none";

                var series = {
                    type: seriesType,
                    markerType: markerType,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    name: seriesMemberPath + "series",
                    title: seriesMemberPath,
                    valueMemberPath: seriesMemberPath,
                    isTransitionInEnabled: true,
                    isHighlightingEnabled: true,
                    showTooltip: true,
                    thickness: thickness
                }
                return series;
            }
  
  $('#waterfall').igDataChart({
  	dataSource: data,
  	width: "700px",
    height: "400px",
    title: 'Waterfall',
    horizontalZoomable: true,
    verticalZoomable: true,
    axes: [
    {
        name: "xAxis", type: "categoryX", label: "Year", title: "Per Year",
        labelTextStyle: "8pt Verdana",
    },
    {
        name: "yAxis", type: "numericY", minimumValue: 0, title: "Quadrillion Btu",
        labelTextStyle: "8pt Verdana",
    }
    ],
    series: [
    	CreateSeries('waterfall', "China"),
      CreateSeries('waterfall', "UnitedStates"),
      CreateSeries('waterfall', "Russia"),
      CreateSeries('waterfall', "Canada"),
     ...