THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
The FlexJS Chart components follow the same pattern as List: a dataProvider holds the information to be presented, a factory bead generates instances of the itemRenderers that will draw the visual representation of the beads, and a layout places those itemRenderers into the correct locations. Following this pattern, the outer-most element is the chart itself (a DIV in JavaScript) with nested DIV elements for the axes and one for the chart graphics. Each itemRenderer is a component (DIV) and within that is that the graphics for the presentation (an SVG plus a RECT for a BoxItemRenderer). Within each axis there is a SPAN for the tick labels and an SVG+PATH for the axis line and each label.
Optimization
The optimized version flattens this out by using no DIV elements within the chart area and using a single SVG for each axis and one for the chart graphics area. The presentation is delivered by having the itemRenderer itemRenderers create the RECT elements right in the chart's SVG. Similarly, the axis uses SVG TEXT elements for the labels and a PATH for the line and tick marks. The result is a much flatter display structure. When run in browsers that have any SVG optimization, the results show that the optimized charts perform better.
Next: how was this done?
Performance
The charts below (created with FlexJS Chart package) show the difference between the optimized (orange) and regular (red) chart components; shorter bars are faster. The performance data were gather from two FlexJS LineCharts of a sine wave: one with optimized components and one without. The charts used BoxItemRenderers for each point plotted along with a LineSegmentItemRenderer to display the line connecting the points. The vertical axis is the average of ten runs in milliseconds.
The results show that the best performance comes from the optimized chart components with the difference most notable in the JavaScript version; the Flash versions out performed the JavaScript versions every time. Another factor to consider is that Flash is better at handling larger data sets. Extrapolating the performance data, you can see what the increasing the size of the data increases the time on JavaScript significantly over Flash. In fact, running charts using ten thousand points often caused the browsers to either stop or pause and notify the user that the script was taking too long. Some pseudo-threading techniques could help the perceived performance, but overall, Flash is better at handling large data.
...
This optimization also works for Flash because layers of Sprites are no longer created.
The optimization of the charts is possible because the charts use the FlexJS core.graphics package and, specifically, the GraphicsContainer component. The core.graphics package has both an ActionScript and a JavaScript version. The ActionScript version uses Sprite and Surface while the JavaScript version uses SVG. When the BoxItemRenderer needs to display a rectangle, it uses the core.graphics.Rect component. In ActionScript, this component creates a Sprite and then uses the Flash Player drawing API to make the rectangle. In JavaScript, the core.graphics.Rect component creates an SVG and adds a RECT element to it.
The optimized chart components can be found in the FlexJS charts.optimized package and consist of replacement itemRenderers, a replacement for the ChartAxisGroup, and a replacement for the ChartDataGroup. The itemRenderers are fairly straightforward: instead of creating a core.graphics.Rect element, the itemRenderers access their dataGroup (which extends core.graphics.GraphicsContainer) and uses the drawRect() function. This does not create any new elements in ActionScript and only adds a RECT element to the dataGroup's SVG base in JavaScript.
The optimized ChartDataGroup extends core.graphics.GraphicsContainer which has drawing functions but also fits into the FlexJS component framework. The optimized ChartDataGroup is specified for a in CSS and simply replaces the standard ChartDataGroup. This is required as the optimized itemRenderers expect to be able to use the drawing functions found in GraphicsContainer.
The optimized ChartAxisGroup is similar to the optimized ChartDataGroup in which it replaces the creation of sub-components with the use of the GraphicsContainer drawing functions. For example, rather than creating a Label component for each tick mark, the optimized ChartAxisGroup uses the drawText() function of GraphicsContainer.
The end result is that the optimized charts only replace itemRenderers, ChartAxisGroup, and the ChartDataGroup; the chart layouts and axis beads are untouched.
Performance
The charts below (created with FlexJS Chart package) show the difference between the optimized (orange) and regular (red) chart components; shorter bars are faster. The performance data were gather from two FlexJS LineCharts of a sine wave: one with optimized components and one without. The charts used BoxItemRenderers for each point plotted along with a LineSegmentItemRenderer to display the line connecting the points. The vertical axis is the average of ten runs in milliseconds.
The results show that the best performance comes from the optimized chart components with the difference most notable in the JavaScript version; the Flash versions out performed the JavaScript versions every time. Another factor to consider is that Flash is better at handling larger data sets. Extrapolating the performance data, you can see what the increasing the size of the data increases the time on JavaScript significantly over Flash. In fact, running charts using ten thousand points often caused the browsers to either stop or pause and notify the user that the script was taking too long. Some pseudo-threading techniques could help the perceived performance, but overall, Flash is better at handling large data.
It is yet to be seen if the non-optimized chart components actually offer any advantage over the non-optimized versions; if that turns out to be true, it may not be worth while to keep the non-optimized versions.
In creating the charts for this page, several issues become apparent. Comparison of the chart data is not possible because each chart axis uses the chart's data for the value rather than sharing the data. Second, the vertical scale values do not accurately reflect the data values and the chart layout needs to be adjusted.