Demo - FlexChart Render Cycle

by Joel Parks

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.chart.min.js"></script>
<body class="container">

  <h1>
    FlexChart Render Cycle
  </h1>
  <!--<p>
    The FlexChart is data-driven. When there are changes to the
    data it is bound to, or to any of its properties, the chart
    goes through a render cycle, which consists of these steps:</p>
  <ol>
    <li>
      <b>Get the data</b>:<br/>
      The chart has an <b>itemsSource</b> property that represents
      the overall data source, and each series may override this
      using its own local <b>itemsSource</b> property. Similarly,
      the chart has <b>bindingX</b> and <b>binding</b> properties
      that determine the values to be charted for each series.<br/>
      In most cases, you will set the <b>itemsSource</b> and
      <b>bindingX</b> properties on the chart object, and the
      <b>binding</b> property on each series.</li>
    <li>
      <b>Scale the data</b>:<br/>
      You may set the chart's range by setting the <b>min</b> and
      <b>max</b> properties on the chart's axes. By default, those
      properties are set to null, which causes the chart to scale
      itself automatically. By default, series use the chart's
      main set of axes, <b>axisX</b> and <b>axisY</b>; but you
      may create additional axes and assign those axes to one or
      more series.</li> 
    <li>
      <b>Raise the rendering event</b>:<br/>
      At this point, the chart is empty. Event handlers may use 
      <b>engine</b> parameter of the <b>rendering</b> event to
      add custom elements that will render behind the chart data.
      This can be used to add background elements such as alarm
      zones.</li>
   ...

CSS

.wj-flexchart {
  height: 250px;
}
.annotation {
  opacity: .5;
  font-size: 75%;
  font-style: italic;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

	// create a simple chart
	var theChart = new wijmo.chart.FlexChart('#theChart', {
		bindingX: 'country',
    chartType: 'Line',
    series: [
    	{ binding: 'sales', name: 'Sales' },
      { binding: 'expenses', name: 'Expenses' }
		],
    itemsSource: getData(),
    rendering: function(s, e) {
      var pt = theChart.dataToPoint(0, theChart.axisY.actualMax);
      e.engine.drawString('rendering ' + Date.now(), pt, 'annotation');
    },
    rendered: function(s, e) {
      var pt = theChart.dataToPoint(0, theChart.axisY.actualMin);
      e.engine.drawString('rendered ' + Date.now(), pt, 'annotation');
    },
	});
  
  console.log(theChart);
  
  // refresh the chart
  document.getElementById('btnRefresh').addEventListener('click', function() {
  	theChart.itemsSource = getData();
  });

  // get 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: new Date(2014, i % 12, i % 28),
	      sales: Math.random() * 10000,
	      expenses: Math.random() * 5000,
	    });
	  }
  	return data;
  }
}