Flex 3:Feature Introductions: Charting Enhancements
From Adobe Labs
Giving more control to the developers has been the chart(er) for the Charting Enhancements feature, thereby allowing developers to give compelling visual experience to their end-users. The majority of features delve in how the developers can now interact with individual chart items. Charting Interactions provide the developer the interaction framework in Charts, where in developers could enable selection of chart items, have region selection and implement operations like drag and drop on the selected items. Key board accessibility also has been provided to interact with chart items. Per Item Fill enables the user to dynamically choose the colors for the individual chart items in a chart and help visually differentiate items and easily summarize the visual message that needs to be given to the end-user Per Item Label, gives the much desired functionality of showing labels related to individual chart items. The feature gives options to position the label within the items. This feature has been enabled for Bar and Column charts. The multiple axis feature enables developers to have multiple axis renderers in a cartesian chart and all series can now have their own individual axis.
You may wish to download the samples to follow along.
1.1 Charting Interactions
1.1.1 Selection
The selection framework enables the developer to interactively or programmatically select a set of chart items to perform operations on them. The selection follows standard flex rules to highlight, select and navigate across chart items. Charts and Series now expose properties like selectedItems, selectedIndices and allow the users to select the items through mouse, keyboard, through a region or programmatically by setting corresponding properties. Also a new event CHANGE is added to notify of any change in the selection. Refer to the documentation for a detailed set of properties and APIs added.
States are introduced in charts and based on the interaction with these chart items corresponding states are set in a currentstate variable in that chart item. The states that are being set are focused, selected, rollover, disabled, focusedSelected. The renderers that are part of the charts.renderers package have a default implementation to change the visual behavior based on the currentstate of the chart item.
For custom charts, selection would come for free, without any additional code to be written, but if you are writing a custom renderer, then you may have to write code to indicate the visual behavior for various states. The renderers that are part of chart.renderers, change the fill colors and sometimes radius for indicating the visual behavior.
See ChartInteraction as an example.
1.1.2 Region Selection
All Cartesian and Polar charts support region selection. The user could drag the mouse to form a rectangle and choose the chart items that fall under that rectangular region. There are also APIs in ChartBase and Series classes to get the list of chart items that fall under the rectangular region. Custom chart and series developers, which use renderers not there in the charts.renderers package need to write their own algorithm to find the items that fall under a rectangular region by implementing the getItemsFromRange function which is part of the series class.
See RegionSelection for an example of a plot chart, for which region selection could be useful.
Known Issues:
a. For Bubble Chart, Pie Chart – Region selection algorithm considers the chart item as selected, if the center of the item lies within the rectangular region.
1.1.3 Keyboard Navigation
All Cartesian and Polar charts provide a default keyboard navigation, which can result in selection of certain chart items on the chart. The developer could customize the navigation behavior by overriding methods such as getNextItem and getPreviousItem. We would be more than glad to get feedback from developers and users on the keyboard navigation, to make it as much generic and friendly as possible.
Known Issues:
a. While holding Shift and if you move out of the series using arrow keys, it clears the items selected in the current series.
1.1.4 Drag and Drop
All Cartesian and Polar charts provide support for drag events, which could be activated by setting the properties like dragEnabled, dropEnabled etc., similar to other flex controls. The charts framework also provides the default drag proxy during the drag operation. The developer however has to handle the drop event, to take appropriate action on the drop event.
See DragDrop for an example.
1.2 Per Item Fill
Per Item Fill is an enhancement to ColumnSeries, BarSeries, BubbleSeries, LineSeries, AreaSeries, CandleStickSeries and PlotSeries to enable different items within a series to have different fill. This can be used by specifying ‘fills’ array or a ‘fillFunction’. PieSeries is also enhanced to accept a fillFunction (like all the above series), based on which the fill of a chart item is decided. HLOCSeries is not enhanced as it doesn't support the concept of 'fill'. Now charts default legend will not show the legend data of the series which uses per item fill. User should provide his own legend data for the corresponding series. Custom item renderers for the above mentioned series(s), can use the fill property in the chart item, to render their chart items.
See ColumnFill for an example.
1.3 Per Item Label
Per Item Label is an enhancement to Column Chart and Bar Chart to show labels for individual chart items in the series. Labels can be customized using either labelField or labelFunction property. There are various styles like labelAlign, labelPosition which could be used to specify the position of the labels within the bar or the column. For 100%, stacked and overlaid charts, if labelPosition is outside then it is ignored and labelPosition will be considered as inside. If the chart items in the chart coincide with the minimum or maximum values of the chart, then labels will be shown inside the item. If labels cannot fit in the availablewidth, then the labels will be scaled down to a certain limit, based on the value of the property labelSizeLimit specified. For further details, refer to documentation.
1.3.1 Label rendering in Bar Charts
Labels in Bar Charts, can be specified as inside or outside in the labelPosition, however for 100%, stacked and overlaid the label position is always inside.
See BarChart_PIL for an example that shows how labels are renderered when label position is inside and outside.
1.3.2 Label rendering in Column Charts
In Column Charts, the labels can overlap wiht other chart items, but will not overlap with other labels . Developers can specify values for properties like canLabelExtendToEndOfChart and canShowLabelVertically and maxLabelWidth to control the behavior of how labels can be renderered when labelPosition is specified as outside.
See ColumnChart_PIL as an example.
1.4 Work Week Axis
Workweek Axis is an enhancement to the DateTimeAxis class where we can specify the disabled region of the chart (using disabledDays and disabledRanges properties). Data corresponding to the specified disabled region will be filtered out from the chart.
See WorkweekAxis for an example where the week ends have been disabled using disabledDays and some days disabled using disabledRange property.
1.5 Multiple Axes and Renderers
This feature provides the ability to specify multiple axis renderers for Cartesian charts. The axes could be placed on left, top, right and bottom and any number of axis renderers could be placed in any direction. This feature also allows different axis to be associated with each series in the chart, thus allowing rendering of series with different scales more effectively.
1.5.1 Axis properties at Series level
This feature enables the developer to provide axis for a series, rather than at the chart level. The feature encourages the usage of axis at the series level and deprecates the usage of chart’s axis properties and styles, however backward compatibility is addressed by supporting existing properties and styles on the charts. For a detailed list of deprecated properties, styles and methods, refer to the documentation.
See MultipleAxis for an example that demonstrates the usage of these properties along with multiple axis renderers to represent those axes.
1.5.2 AxisRenderer enhancements.
The AxisRenderer implementation now takes axis as a parameter to render that and it can take following values for placement left, top, right and bottom, the placement is automatically assigned if nothing is specified. Cartesian chart calculates the required space for the gutters for the renderers, however as with previous versions the developer can mention the gutters in which case chart will divide the gutter space equally amongst the gutters in that direction. The AxisRenderer implementation also provides a label function, to enable any label change just before rendering, this particularly helps in usecases where two renderers are using the same axis, but want to render different labels. The AxisRenderer implementation provides a highlightElements property, which when set, will highlight the particular series, when mouse is rolled over the corresponding axes.
See AxisRenderer for an example.
Known Issues
- FLEXDMV-922 When all the labels that are actually shown with DateTimeAxis (without disabledDays) fall under specified disabledDays, labels are not shown in Workweek Axis
- FLEXDMV-844 Changing of column chart type at runtime does not render the chart correctly.
- FLEXDMV-829 Adding many series at runtime pushes the axis outside the chart bounds.
- FLEXDMV-826 Adding items at runtime causes overlapping of horizontal axis labels on the second horizontal axis
- FLEXDMV-797 Minimizing and maximising the windows causes the axis labels to be dropped and chart rendering goes wrong.
- FLEXDMV-856 Adding axis and series at runtime in a Bar chart rotates and maximizes the axis title.
