Demo - Funnel Charts

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<div class="container">

  <h1>
    Funnel Charts
  </h1>

  <p>
    Funnel charts show values along multiple stages in a process.</p>
  <p>
    For example, you could use a funnel chart to show the number of
    sales prospects at each stage in a sales pipeline. Typically,
    the values decrease gradually, making the bars resemble a
    funnel.</p>
  <p>
    To create funnel charts with the FlexChart control, set the
    <b>bindingX</b> property to the name of the property that
    contains the step along the pipeline, and add a single series
    with <b>binding</b> set to the amount of transactions at the
    given step.</p>
  <p>
    You can adjust the funnel's height, width, and style using 
    the <b>options</b> property:</p>    

  <label for="neckWidth">Neck Width: </label>
  <div id="neckWidth"></div><br>
  <label for="neckHeight">Neck Height: </label>
  <div id="neckHeight"></div><br>
  <label for="neckStyle">Neck Style: </label>
  <div id="neckStyle"></div><br>

  <div id="theChart"></div>

</div>

CSS

.wj-flexchart {
  height: 300px;
}
.wj-control {
  margin-bottom: 3px;
}
label {
  width: 100px;
  text-align: right;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

	// create the chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
  	itemsSource: getData(),
    bindingX: 'stage',
    chartType: 'Funnel',
    options: {
  	  	funnel: {
        	neckWidth: .2,
    	  	neckHeight: .4,
      		type: 'rectangle'
				}
    },
    series: [
      { binding: 'count', name: 'Sales Pipeline' }
    ],
    dataLabel: {
    	content: '{item.count}'
		},
  });
  
  // adjust parameters
  var theNeckWidth = new wijmo.input.InputNumber('#neckWidth', {
  	min: 0,
    max: 1,
    step: .1,
    format: 'p0',
    value: theChart.options.funnel.neckWidth,
    valueChanged: function(s, e) {
			theChart.options.funnel.neckWidth = s.value;
	    theChart.refresh(true);
    }
  });
  var theNeckHeight = new wijmo.input.InputNumber('#neckHeight', {
  	min: 0,
    max: 1,
    step: .1,
    format: 'p0',
    value: theChart.options.funnel.neckHeight,
    valueChanged: function(s, e) {
			theChart.options.funnel.neckHeight = s.value;
	    theChart.refresh(true);
    }
  });
  var theNeckStyle = new wijmo.input.ComboBox('#neckStyle', {
    textChanged: function(s, e) {
    	theChart.options.funnel.type = s.text.toLowerCase();
      theChart.refresh(true);
    },
  	itemsSource: 'Default,Rectangle'.split(','),
  });
  
	// create some random data
  function getData() {
  	return [
  		{ stage: 'Prospects', count: 750 },
      { stage: 'Qualified Prospects', count: 520 },
      { stage: 'Needs Analysis', count: 200 },
      { stage: 'Price Quotes', count: 150 },
      { stage: 'Negotiations', count: 100 },
      { stage: 'Closed Sales', count: 90 },
  	]
  }

}