Wijmo 5 (PureJS) - FlexChart Architecture

by Joel Parks

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.input.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 class="container">

  <h1>
    FlexChart Architecture
  </h1>

  <p>
    The FlexChart allows you to visualize tabular data as business 
    charts. It provides a variety of options about how to present 
    and interact with the data, including selection, zooming, 
    drill-down, formatting, etc.</p>
  <p>
    Like all Wijmo controls, the chart delegates all data-related
    tasks to the CollectionView class, so if you want to filter,
    sort, or group the data, you can do it using the CollectionView.
    It may be useful to think of the FlexChart as a special type
    of data grid, where columns are represented by series and
    rows are data points on the chart.</p>
  <p>
    When you set the chart's <b>itemsSource</b> property to an array,
    or <b>ObservableArray</b>, the chart automatically creates a
    CollectionView instance to wrap the original array. This
    CollectionView is exposed by the <b>collectionView</b> property 
    in case you want to access it.</p>
  <p>
    For example, the chart below has buttons that allow users to 
    sort the data by changing the <b>sortDescriptions</b> property
    of the chart's <b>collectionView</b>:</p>

  <p>
    Sort by: 
    <button id="btnNone" class="btn btn-default">None</button>
    <button id="btnCountry" class="btn btn-default">Country</button>
    <button id="btnSales" class="btn btn-default">Sales</button>
    <button id="btnExpenses" class="btn btn-default">Expenses</button>
    <button...

CSS

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

JavaScript

onload = function() {

	// create the chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
  	itemsSource: getData(),
    bindingX: 'country',
    series: [
    	{ binding: 'sales', name: 'Sales' },
      { binding: 'expenses', name: 'Expenses' },
      { binding: 'downloads', name: 'Downloads' }
    ]
  })

	// connect sort buttons
	sortOnClick('btnNone', null);
  sortOnClick('btnCountry', 'country');
  sortOnClick('btnSales', 'sales');
  sortOnClick('btnExpenses', 'expenses');
  sortOnClick('btnDownloads', 'downloads');
	function sortOnClick(id, prop) {
  	document.getElementById(id).addEventListener('click', function() {
    	var sd = theChart.collectionView.sortDescriptions;
      sd.clear();
      sd.push(new wijmo.collections.SortDescription(prop, true))
    })
  }
  
	// create some random data
  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;
  }

}