Demo - Box and Whisker Series

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.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.analytics.min.js"></script>
<div class="container">

  <h1>
    Box and Whisker Series
  </h1>

  <p>
    Box and Whisker series (AKA boxplots) show groups of numerical
    data through their quartiles. They have lines extending 
    vertically from the boxes (whiskers) indicating variability
    outside the upper and lower quartiles.</p>
  <p>
    To create a Box and Whisker chart, follow these steps:</p>
    
  <ol>
    <li>
      Create one or more BoxWhisker series objects,</li>
    <li>
      Configure the BoxWhisker series by setting their
      <b>name</b> and <b>binding</b> properties (they
      should be bound to properties that contain number
      arrays), and</li>
    <li>
      Set additional properties such as <b>showOutliers</b>
      and <b>showInnerPoints</b> if you want to fine-tune
      the display.</li>
  </ol>
  
  <label for="innerPoints">Show Inner Points: </label>
  <input id="innerPoints" type="checkbox"><br/>
  <label for="outliers">Show Outliers: </label>
  <input id="outliers" type="checkbox"><br/>
  <label for="btnRandomize">Randomize Data</label>
  <button id="btnRandomize" class="btn btn-default">
    Go
  </button>
    
  <div id="theChart"></div>
</div>

CSS

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

JavaScript

onload = function() {

	// create the chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
  	itemsSource: getData(),
    bindingX: 'country',
    tooltip: { content: '{seriesName}: <b>{x}</b>' }
  });
  
  // create BoxWhisker series for 'sales' and add it to the chart
  var sales = new wijmo.chart.analytics.BoxWhisker();
  sales.name = 'Sales';
  sales.binding = 'sales';
  sales.groupWidth = .7;
  sales.gapWidth = .2;
  theChart.series.push(sales);

  // create BoxWhisker series for 'expenses' and add it to the chart
  var expenses = new wijmo.chart.analytics.BoxWhisker();
  expenses.name = 'Expenses';
  expenses.binding = 'expenses';
  expenses.groupWidth = .7;
  expenses.gapWidth = .2;
  theChart.series.push(expenses);

	// customize the BoxWhisker series
  document.getElementById('innerPoints').addEventListener('click', function(e) {
  	theChart.series.forEach(function(series) {
    	series.showInnerPoints = e.target.checked;
    });
  });
  document.getElementById('outliers').addEventListener('click', function(e) {
  	theChart.series.forEach(function(series) {
    	series.showOutliers = e.target.checked;
    });
  });

  // randomize the data
  document.getElementById('btnRandomize').addEventListener('click', function() {
  	theChart.itemsSource = getData();
  });

	// create some random data
  // the data items contain arrays of values rather than single values
  function getData() {
	  var countries = 'US,Canada,Mexico,Germany,UK,France,Japan,Korea,China'.split(','),
	      data = [];
	  for (var i = 0; i < countries.length; i++) {
	    data.push({
	      country: countries[i],
	      sales: getRandomArray(200, 1000),
	      expenses: getRandomArray(20, 1000),
	    });
	  }
  	return data;
  }
  function getRandomArray(count, max) {
  	var arr = [];
    for (var i = 0; i < count; i++) {
    	arr.push(
      	Math.random() * max / 3 +
      	Math.random() * max / 3 +
        Math.random() * max / 3 + 10000);
    }
    return arr;
  }
}