Demo - Chart Grid

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>
<div class="container">
  <h1>
    Chart Grid
  </h1>
  <p>
    Data grids are great for showing and editing data. 
    They allow you to edit, organize, inspect, and change the data.
    Charts are great for visualizing data.
    They allow you to see trends and make comparisons instantly.</p>
  <p>
    The FlexGrid allows you to combine grids and charts into a single
    view which provides users with the best of both worlds. 
    All you have to do is use the <b>formatItem</b> event to add some
    bars to the grid cells:</p>

  <label>
    Group by Region
    <input id="group" type="checkbox" checked />
  </label>
  <label>
    Show Chart
    <input id="chart" type="checkbox" checked />
  </label>
  <div id="theGrid"></div>
</div>

CSS

.wj-flexgrid {
  max-height: 350px;
  margin: 1em 0;
}

.wj-flexgrid .wj-cell .spark-bar {
  position: absolute;
  opacity: 0.3;
  height: 100%;
  left: 0;
  top: 0;
  border: 3px solid white;
  border-radius: 0 8px 8px 0;
}

.wj-flexgrid .wj-cell .spark-bar.units {
  background: #0085c7;
}

.wj-flexgrid .wj-cell .spark-bar.revenue {
  background: #3b9200;
}

.container>label {
  margin-right: 3em;
}

body {
  font-size: 16px;
  margin-bottom: 48pt;
}

JavaScript

onload = function() {

  // create data source
  var view = new wijmo.collections.CollectionView();
  var url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRVhwWiWkXp_dqlf8jOSEJlP5DFGTAFwqYJdOweZ4WGJlBsMrcFW_-48eZVCoXMHdNxqFv1CMQXGinq/pub?gid=351800917&single=true&output=csv';
  wijmo.httpRequest(url, {
    success: function(xhr) {
      view.sourceCollection = parseCsv(xhr.responseText);
    }
  });
  showGroups(true);

  // create the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    showAlternatingRows: false,
    autoGenerateColumns: false,
    headersVisibility: 'Column',
    columns: [{
        binding: 'region',
        header: 'Region',
        visible: false
      },
      {
        binding: 'month',
        header: 'Period',
        format: 'MMM yyyy',
        width: '*'
      },
      {
        binding: 'product',
        header: 'Product',
        width: '2*'
      },
      {
        binding: 'units',
        header: 'Units Sold',
        width: '1.4*',
        format: 'n0'
      },
      {
        binding: 'revenue',
        header: 'Revenue',
        width: '1.4*',
        format: 'n2'
      }
    ],
    itemsSource: view,
    formatItem: showChart
  });

  // toggle grouping
  document.getElementById('group').addEventListener('click', function(e) {
    showGroups(e.target.checked);
  });

  // toggle charting
  document.getElementById('chart').addEventListener('click', function(e) {
    theGrid.formatItem.removeHandler(showChart);
    if (e.target.checked) {
      theGrid.formatItem.addHandler(showChart);
    }
  });

  // paint chart
  function showChart(s, e) {
    if (e.panel == s.cells) {
      var col = s.columns[e.col];
      switch (col.binding) {
        case 'units':
        case 'revenue':
          var bar = document.createElement('div'),
            val = s.getCellData(e.row, e.col, false),
            max = s.collectionView.getAggregate(wijmo.Aggregate.Max, col.binding);
          wijmo.addClass(bar, 'spark-bar ' +...