Page History

...

Once the layoutComplete notification has been sent, the chart's axes, if it has them, go to work and size and position themselves along the chart's edges. They also calculate their tick marks, lines, and set their labels.

Chart optimization

The original FlexJS Chart package consists of many layers of elements. As an exercise, a set of optimized, or flattened, structure was created using a variation of the original FlexJS Chart components. Once that work was completed, a test was set up to see if there were any improvements; the charts below tell the story.

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 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.

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 create the RECT 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 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?To do: describe the problem and solution used.

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.

...