Demo - FlexChart Chart Types

by c1alexi

HTML

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

  <h1>
    FlexChart Chart Types
  </h1>

  <p>
    The FlexChart has three properties that determine the 
    chart type:</p>
  <ol>
    <li>
      <b>chartType</b>:
      Determines the default chart type to be used for all series objects.
      Individual series can override this default.</li>
    <li>
      <b>stacking</b>:
      Determines whether series objects are plotted independently, stacked, 
      or stacked so their sum is 100%.</li>      
    <li>
      <b>rotated</b>:
      Determines whether axes should be flipped so the X axis becomes 
      vertical and the Y axis horizontal.</li>
  </ol>    
  <p>
    This example shows the effect of these properties:</p>

  <label for="chartType">Chart Type: </label>
  <div id="chartType"></div><br>
  <label for="stacking">Stacking: </label>
  <div id="stacking"></div><br>
  <label for="rotated">Rotated: </label>
  <input id="rotated" type="checkbox"><br>
  
  <div id="theChart"></div>

</div>

CSS

.wj-flexchart {
  height: 300px;
}
.wj-dropdown {
  margin-bottom: 3px;
}
label {
  width: 100px;
  text-align: right;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

	// create the chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
  	itemsSource: getData(),
    bindingX: 'country',
    options: {
      groupWidth : '100%' // 100% pixels
    },
    series: [
    	{ binding: 'sales', name: 'Sales' },
      //{ binding: 'expenses', name: 'Expenses' },
      //{ binding: 'downloads', name: 'Downloads' }
    ]
  });
  
  // customize the chart
  var theChartType = new wijmo.input.ComboBox('#chartType', {
  	itemsSource: 'Column,Bar,Scatter,Line,LineSymbols,Area,Spline,SplineSymbols,SplineArea'.split(','),
    selectedIndexChanged: function(s, e) {
    	theChart.chartType = s.text;
    }
  });
  var theStacking  = new wijmo.input.ComboBox('#stacking', {
  	itemsSource: 'None,Stacked,Stacked100pc'.split(','),
    selectedIndexChanged: function(s, e) {
    	theChart.stacking = s.text;
    }
  });
  document.getElementById('rotated').addEventListener('click', function(e) {
  	theChart.rotated = e.target.checked;
  })

	// 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;
  }

}