Render Cycle in FlexChart

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:

1. Get the data: The chart has an itemsSource property that represents the overall data source, and each series may override this using its own local itemsSource property. Similarly, the chart has bindingX and binding properties that determine the values to be charted for each series. In most cases, you will set the itemsSource and bindingX properties on the chart object, and the binding property on each series.
2. Scale the data: You may set the chart's range by setting the min and max 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, axisX and axisY; but you may create additional axes and assign those axes to one or more series.
3. Raise the rendering event: At this point, the chart is empty. Event handlers may use engine parameter of the rendering event to add custom elements that will render behind the chart data. This can be used to add background elements such as alarm zones.
4. Render each series: In this step, the chart creates one or more SVG elements to represent each series. The simplest and most efficient chart types are 'Line' and 'Spline', which can usually be represented by a single SVG element. Other chart types require more elements to render bars and symbols. The chart invokes a callback specified by the itemFormatter property to allow customization of specific points in each series. Axes also have an itemFormatter property to allow customization of the axes labels.
5. Raise the rendered event: At this point, the chart has been fully rendered. Event handlers may use the engine parameter of the rendered event to add custom elements that will render above the chart data. This can be used to add elements such as point annotations.

Example: Output the time before and after rendering.

rendering: function(s, e) {
    var pt = myChart.dataToPoint(0, myChart.axisY.actualMax);
    e.engine.drawString('rendering ' + Date.now(), pt, 'annotation');
    },
rendered: function(s, e) {
    var pt = myChart.dataToPoint(0, myChart.axisY.actualMin);
    e.engine.drawString('rendered ' + Date.now(), pt, 'annotation');
    }