Page History

...

#note2 A LineSeries has two renderers: the itemRenderer is used to draw a figure at the point (such as a small square box). The lineSegmentItemRenderer is used to connect the points with a single line. Both renderers are optional although you should include at least one of them to see anything.

If you compare the component (strand) code for each chart type, you will see they are almost identical and are very thin. Each chart is extends on ChartBase which provides the common series property. The actual "chart" graphics are handled by the chart layouts, covered next. The reason for the different chart classes is to make it easier to assign styles and default beads via CSS.

Chart Layouts

...

and Axes

For the most part, all of the charts are the same. Charts are lists and follow the same pattern, using an itemRenderer mapper to generate the itemRenderers for the chart elements and using a layout to size and position them. The work of building a chart falls onto the layout.

The ColumnChart uses a ColumnChartLayout bead which determines where and how the bars appear. The StackedColumnChart uses a StackedColumnChartLayout. All of the chart layouts extend ChartBaseLayout which provides common properties, such as identifying an horizontal or vertical axis beads that might be used.

An important part of the chart is the chart's drawing parent, which is a ChartDataGroup (List uses NonVirtualDataGroup). The ChartDataGroup provides a way for a chart layout to locate itemRenderers based on series as well as position. 

A FlexJS chart layout follows this basic pattern:

1. Identify the axes being used to determine how much space they occupy.
2. Determine minimums and maximums of the values to be plotted.
3. Identify an itemRenderer (created earlier by the itemRenderer data mapper bead) to use for each point, size and position it based on the chart data values and scaled to the chart's visible size.
4. Send a notification that the layout is complete.

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 labelsThis section is next and will describe how FlexJS charts actually work using layouts.