Wijmo 5 - FlexGrid and FlexChart

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.chart.min.js"></script>
<div id="theGrid"></div>

CSS

.wj-flexgrid {
  margin: 12px;
  width: 400px;
}

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
  for (var i = 0; i < countries.length; i++) {
    data.push({
      country: countries[i],
      downloads: Math.round(Math.random() * 100),
      sales: Math.random() * 200,
      expenses: Math.random() * 300,
      trading: Math.round(Math.random() * 400),
      purchase: Math.random() * 500,
      budget: Math.random() * 600
    });
  }

  // create CollectionView on the data (so grid and chart stay in sync)
  var view = new wijmo.collections.CollectionView(data);

  // initialize the grid
  var grid = new wijmo.grid.FlexGrid('#theGrid', {
    columns: [{
        binding: 'country',
        header: 'Country'
      }, {
        binding: 'sales',
        header: 'Sales'
      }, {
        binding: 'expenses',
        header: 'Expenses'
      }, {
        binding: 'downloads',
        header: 'Downloads',
        format: 'n0'
      }, {
        binding: 'trading',
        header: 'Trading'
      },

      {
        binding: 'purchase',
        header: 'Purchase'
      }, {
        binding: 'budget',
        header: 'Budget',
        format: 'n0'
      }
    ],
    autoGenerateColumns: false,
    itemsSource: view,
    selectionMode: wijmo.grid.SelectionMode.Row
  });
 grid.scrollIntoView(0,grid.columns.length-1);

}