FlexChart

Stacked Bar Chart with Line series

by Troy Taylor

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.chart.min.js"></script>
<div class="container">
  <h1>FlexChart</h1>
  <h3>Stacked Bar Chart with Line Series</h3>
  <div id="flexChart"></div>
</div>

JavaScript

var flexChart = new wijmo.chart.FlexChart('#flexChart');

// initialize FlexChart's properties
flexChart.initialize({
  itemsSource: getData(),
  bindingX: 'country',
  stacking: 'Stacked',
  series: [
    { name: 'Sales', binding: 'sales', chartType: 'Line' },
    { name: 'Expenses', binding: 'expenses' },
    { name: 'Downloads', binding: 'downloads' }
  ]
});

function getData() {
	  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
	    data = [];
	  for (var i = 0; i < countries.length; i++) {
	    data.push({
	      country: countries[i],
	      sales: Math.random() * 10000,
	      expenses: Math.random() * 5000,
	      downloads: Math.round(Math.random() * 20000),
	    });
	  }
  	return data;
  }