Wijmo 5 - Creating Controls

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>
    Creating Wijmo 5 Controls
  </h1>

  <p>
    And this is a <b>FlexChart</b> control showing the same data:
  </p>
  <button id="btnResize">resize</button>
  <button id="btnDispose">Dispose</button>
  <button id="btnCreate">Create</button>
  <div id="chartParent" style="width:400px;height:200px">
    <div id="theChart" style="width:100%;height:100%"></div>
  </div>

  <p>That's it for now...</p>
</div>

CSS

.wj-flexgrid {
  max-height: 300px;
}

.wj-flexchart {
  height: 350px;
}

JavaScript

onload = function() {

  // generate 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() * 20000),
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000
    });
  }

  // wrap data in a CollectionView to get updates 
  // (so editing the grid updates the chart)
  var view = new wijmo.collections.CollectionView(data);

  // create a chart and show the same data    
  var chart = new wijmo.chart.FlexChart('#theChart', {
    itemsSource: view,
    bindingX: 'country',
    series: [{
      name: 'Sales',
      binding: 'sales'
    }, {
      name: 'Expenses',
      binding: 'expenses'
    }, {
      name: 'Downloads',
      binding: 'downloads',
      chartType: wijmo.chart.ChartType.LineSymbols
    }]
  });
  document.getElementById('btnCreate').addEventListener('click', function() {
  	chart = new wijmo.chart.FlexChart('#theChart', {
    itemsSource: view,
    bindingX: 'country',
    series: [{
      name: 'Sales',
      binding: 'sales'
    }, {
      name: 'Expenses',
      binding: 'expenses'
    }, {
      name: 'Downloads',
      binding: 'downloads',
      chartType: wijmo.chart.ChartType.LineSymbols
    }]
  });
  });
	document.getElementById('btnDispose').addEventListener('click', function() {
  	if (chart) {
	  	//var host = chart.hostElement;
	    //host.parentElement.removeChild(host);
      chart.dispose(); // clean up
      chart = null;
	  }
  });
	document.getElementById('btnResize').addEventListener('click', function() {
  	if (chart) {
	  	var host = chart.hostElement.parentElement;
	    host.style.width = "700px";
      host.style.height = "400px";
	  }
  });
}