AnalyticsChart
The AnalyticsChart UI element is used to display data in a chart. An AnalyticsChart is rendered into a Flash component. The dataSource property of the AnalyticsChart itself must point to the context node. The binding can be done in a similar way that a Table is bound to the context, with the CategoryAxis and DataSeries corresponding to TableColumns It is required that a dataSource and CategoryAxis is defined.
Description of UI Element Properties
● animateBy
Defines over which elements the chart animation is applied. animateBy is of type WDChartAnimateBy and can take the following values:
○ mixed. Animate each data series in turn and within each series animate each data point in turn.
○ chart. The entire chart is animated as one unit.
○ points Animate each data point in turn (runs in parallel in all data series).
○ series. Animate each data series in turn (each data series is animated as one unit).
● animation
The animation to apply whenever the chart data changes. animation is of type WDChartAnimation and can take the following values:
○ fold. Fold out the old data and fold in the new data.
○ interpolate. Interpolate the old data into the new data.
○ none. Don't animate.
○ slide. Slide out the old data and slide in the new data.
● animationDirection
Defines the animation sliding direction, ignored for all animations except slide. animationDirectionis of type WDAnimationDirection and can take the following values:
○ bottomToTop. Animate from the bottom to the top.
○ leftToRight. Animate from the left to the right
○ rightToLeft. Animate from the right to the left.
○ topToBottom. Animate from the top to the bottom.
● animationDuration
Defines the animation duration. animationDuration is of type WDAnimationDuration and can take the following values:
○ fast. Approximately 1 second.
○ medium. Approximately 2 seconds.
○ slow. Approximately 3 seconds.
○ veryfast. Approximately 0.5 seconds.
○ veryslow. Approximately 5 seconds.
● chartStyle
chartStyle is of type WDChartStyle and can take the following values:
○ clustered. Series are clustered by category. This applies to the chart types bar and column.
○ overlaid. Data series are overlaid on top of each other. This attribute applies to the chart types: area line
○ stacked. Data series are stacked on top of each other. This attribute applies to the chart types: area bar column line
● chartType
chartType is of type WDAnalyticsChartType and can take the following values:
value |
description |
screenshot |
area |
Displays data series with connected lines and the area below the lines are filled with color. The chart requires a category axis. |
|
bar |
Displays data series horizontally and requires a category axis. |
|
column |
Displays data series vertically and requires a category axis. |
|
combo |
A Combo Chart control, displays data series of varying series type. For each series specify the series type. The chart requires a category axis. |
|
doughnut |
A doughnut chart is identical to a pie chart, but has a hollow center. Multiple data series can be displayed using concentric doughnut charts. Doughnut charts can be drawn either in two or three dimensions |
|
line |
A Line Chart control, displays data series with connecting lines and requires a category axis. |
|
pie |
A pie chart has a single data series. Pie charts can be drawn either in two or three dimensions |
|
● colorAlgorithm
This property uses the color palette defined in the legend. The color scheme this property is of type WDColorAlgorithm and can take the following values:
○ reverse. Reversed color palette.
○ snake. The chart's color palette is 'snaked' through to determine the color.
○ straight. Color scheme that goes through the color palette.
● dataSeriesAxisMinorTicks
Defines the number of minor ticks to draw between major ticks on the data series axis. This property can be set for the following chartTypes: bar, column, line, area and combo.
● dataSeriesAxisTitle
Title for the DataSeries axis, opposite the Category Axis. For chartType column, area, line and combo this is the title on the Y axis. For chartType bar it is the title on the X axis.
● dataSeriesAxisUnit
Unit for the DataSeries Axis, opposite the Category Axis. For chartType column, area, line and combo Charts this is the units string appended to the visible values on the axis. The values for example would be 10, 20, 30, ... 100 (assuming the data was in the range of 0 to 100). By setting this attribute to "$" for example the values will be appended like so: 10$, 20$, 30$, .. 100$. For Bar Charts this is the unit setting on the X axis.
● dataSource
Determines the context node from which the AnalyticsChart gets its data.
● height
Specifies the height of the AnalyticsChart and can be specified in relative CSS units like em or ex.
● legendPosition
Defines the position in relation to the chart, where the legend is displayed. This property is of type WDLegendPosition and can take the following values.
○ above
○ below
○ left
○ none. Legend is not shown.
○ right.
● radius
This property only applies to the chartType doughnut and specifies the inner radius of the doughnut in pixels.
● range
Defines how the AnalyticsChart's values range is determined. this property is of type WDChartRange. and can take the following values:
○ auto. Automatically calculate the values range based on the actual data.
○ fixed. Fix the value range according to the maximum and minimum attributes.
○ live. Same as slider, except the chart is continuously updated while the user is dragging the range slider (and not just upon release of the mouse).
○ slider. Set the initial value range to minimum and maximum, but let the user change the range at any time by dragging a range slider.
○ zero. Similar to auto, but also ensures that the range starts or ends on the zero baseline.
● selectable
Indicates whether the user is allowed to modify the leadSelection.
● title
Specifies the text displayed.
● wedgeLabelPosition
Defines the position of pie wedge labels. This property only applies to the chartType pie and doughnut. This property is of type WDChartWedgeLabel and can take the following values.
○ auto. The labels are positioned in the optimal way depending on the pie's size and available space
○ callout. Draw labels in callouts on either side of the chart.
○ inside. Draw labels inside the pie
○ none. Hide labels
○ outside. Draw labels outside (but close to) the pie.
● width
Specifies the width of the AnalyticsChart and can be specified in relative CSS units like em, ex, or percentage.
Properties Overview
Name |
Interface |
Type |
Initial value |
Bindable |
animateBy |
IWDAnalyticsChart |
WDChartAnimateBy |
mixed |
bindable |
animation |
IWDAnalyticsChart |
WDChartAnimation |
interpolate |
bindable |
animationDirection |
IWDAnalyticsChart |
WDAnimationDirection |
leftToRight |
bindable |
animationDuration |
IWDAnalyticsChart |
WDAnimationDuration |
fast |
bindable |
chartStyle |
IWDAnalyticsChart |
WDChartStyle |
clustered |
bindable |
chartType |
IWDAnalyticsChart |
WDAnalyticsChartType |
column |
bindable |
colorAlgorithm |
IWDAnalyticsChart |
WDColorAlgorithm |
straight |
bindable |
dataSeriesAxisMinorTicks |
IWDAnalyticsChart |
int |
0 |
bindable |
dataSeriesAxisTitle |
IWDAnalyticsChart |
String |
|
bindable |
dataSeriesAxisUnit |
IWDAnalyticsChart |
String |
|
bindable |
dataSource |
IWDAnalyticsChart |
Object |
|
binding required |
enabled |
IWDUIElement |
boolean |
true |
bindable |
height |
IWDAnalyticsChart |
String |
|
bindable |
legendPosition |
IWDAnalyticsChart |
WDLegendPosition |
above |
bindable |
radius |
IWDAnalyticsChart |
int |
50 |
bindable |
range |
IWDAnalyticsChart |
WDChartRange |
auto |
bindable |
selectable |
IWDAnalyticsChart |
boolean |
false |
bindable |
title |
IWDAnalyticsChart |
String |
|
bindable |
tooltip |
IWDUIElement |
String |
|
bindable |
visible |
IWDUIElement |
WDVisibility |
visible |
bindable |
wedgeLabelPosition |
IWDAnalyticsChart |
WDChartWedgeLabel |
inside |
bindable |
width |
IWDAnalyticsChart |
String |
|
bindable |
Events
● onSelectCategory (String newRowElement, String oldRowElement). The event is triggered if the selection of the chart was changed. Event parameters are the String based path of the newly selected row and the previous selected row.
More Information