Demo - FlexChart

by Manish Gupta

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

  <h1>
    FlexChart
  </h1>

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

</div>

CSS

.wj-flexgrid {
  height: 150px; 
  margin-top:10px;
 }
 .wj-flexchart {
   height: 300px;
 }

JavaScript

onload = function() {

	// wrap data in a CollectionView so the grid and chart 
  // get notifications
  var data = new wijmo.collections.CollectionView(getData());

	// create the chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
  	itemsSource: data,
    bindingX: 'country',
    series: [
    	{ binding: 'sales', name: 'Sales' },
      { binding: 'expenses', name: 'Expenses' },
      { binding: 'downloads', name: 'Downloads' }
    ],
    rendered:function(s,e){
    	window["chart"]=s;
		}
  })

	// create some random data
  function getData() {
	  var countries = 'US,Germany<br>GER,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;
  }

}