Similar with DataBand, the data is specified on Chart through ObjectDataSourceGuid property. To perform client-side filtering or sorting against these data, you can specify the Filters and Sorts property. The processed data will then be used by each series to render a graphical representation. In addition, you can also apply any filtering or sorting mechanism for each series separately.
If you are new to ClientUI Reporting, you may want to learn how to provide the initial data. To do so, please refer to the Defining Data topic.
Chart Area is a place or region for displaying all of the chart items such as title, axes, gridlines, data series, and legend. Chart area controls what type of series you can place within it. Ensure that you choose the area based on the desired series type. Moreover, you can combine multiple types of series in one chart as long as all of your series shared the same area type. You will also notice that some of the series cannot be combined together, such as pie, doughnut, and etc. For complete reference, see the following table.
Clustered Column Area
Stacked Column Area
Full-Stacked Column Area
Clustered Bar Area
Stacked Bar Area
Full-Stacked Bar Area
Stepped Range Area
Chart Title is useful to provide a brief description about what the data in the graph refers to. The title typically appears at the top of the chart. However you can change the title position to appear at the bottom, left, or right of the chart. Simply you can change it via Dock property of ChartTitle. See the following illustration.
Series is a related group of data values that are plotted on the chart. Each plotted point is a data point that reflects the specific values relevant to the chart. The reporting chart is built with the capabilities to support various series types. You can even display the same type or multiple types of series in one chart. In some scenarios, certain types of series are more useful for presenting a data set than the others. The following table lists the available types of series.
Axis is used in almost all chart series, except pie and doughnut. Axis plays an important role in visualizing data by providing the information about data being represented. Chart typically have two axes dimensions that are used to measure and categorize data.
- Vertical Axis
Vertical axis is the line on a chart which is drawn vertically from bottom to top or vice versa. It can be located at the left or right of the chart, known as YLeftAxis and YRightAxis. Vertical axis usually acts as data measurement, except in bar series. Vertical axis can only be a Numeric Axis.
- Horizontal Axis
Horizontal axis is the line on a chart which is drawn horizontally from left to right or vice versa. It can be located at the bottom or top of the chart, known as XBottomAxis and XTopAxis. Horizontal axis provides the description about what part of the data it represents, except in bar series. Horizontal axis can be one of these types: Category Axis, DateTime Axis or Numeric Axis.
As mentioned above, ClientUI Reporting categorizes them all on three different groups.
Category Axis lets data to be grouped by a set of discrete values, instead of using numerical interval. In the image below, you can see that X Axis is a category axis.
Linear Axis lets data to be grouped using numerical interval. In the image below, you can see that both X and Y Axis is a numeric axis.
DateTime Axis lets data to be grouped using date-time interval. In the image below, you can see that X Axis is a date-time axis.
Legend serves as a key to the specific colors or patterns being used to show series values in the chart. The legend has a Title property which is hidden by default. To show it, you only need to specify any value (except empty string) to that property.
The horizontal and vertical alignment of the legend is determined by the HorizontalAlignment and VerticalAlignment properties. These properties allow you to place the legend inside or outside the chart. Using the available combination between the horizontal and vertical alignment, you can place the legend at any position you desire.
When dealing with multiple legend items, you may want to break it into multiple columns. You can configure them through Columns or Rows property. Don't forget to specify the Direction, otherwise it will be rendered from top to bottom. See the following illustration.
Palette is a list of color resource used in ClientUI Reporting to determine the color of each series. There are several built-in palette you can choose. You can easily configure it via the PaletteType property of Chart. The following figure shows the color palette available in ClientUI Reporting.
- Column Background
- Column Background Negative
- Border Color
- Area Background
- Area Background Negative
- Line Color
- Line Color Negative
Not all of those resource properties are supported by each series type. See the following table for detail explanation.
|Column Background||Column Background Negative||Border Color||Area Background||Area Background Negative||Line Color||Line Color Negative|
|Clustered Column Series||Yes||Yes||Yes||No||No||No||No|
|Stacked Column Series||Yes||Yes||Yes||No||No||No||No|
|Full-Stacked Column Series||Yes||Yes||Yes||No||No||No||No|
|Clustered Bar Series||Yes||Yes||Yes||No||No||No||No|
|Stacked Bar Series||Yes||Yes||Yes||No||No||No||No|
|Full-Stacked Bar Series||Yes||Yes||Yes||No||No||No||No|
|Stacked Line Series||No||No||No||No||No||Yes||Yes|
|Full-Stacked Line Series||No||No||No||No||No||Yes||Yes|
|Stacked Spline Series||No||No||No||No||No||Yes||Yes|
|Full-Stacked Spline Series||No||No||No||No||No||Yes||Yes|
|Stepped Line Series||No||No||No||No||No||Yes||Yes|
|Stacked Area Series||No||No||No||Yes||Yes||No||No|
|Full-Stacked Area Series||No||No||No||Yes||Yes||No||No|
|Spline Area Series||No||No||No||Yes||Yes||Yes||Yes|
|Stacked Spline Area Series||No||No||No||Yes||Yes||Yes||Yes|
|Full-Stacked Spline Area Series||No||No||No||Yes||Yes||Yes||Yes|
|Stepped Area Series||No||No||No||Yes||Yes||Yes||Yes|
|Stepped Range Series||Yes||Yes||No||No||No||Yes||Yes|
|Scatter Line Series||No||No||No||No||No||Yes||Yes|
|Scatter Spline Series||No||No||No||No||No||Yes||Yes|
By default, these defined resources will be used sequentially while rendering the series. However, you can still choose to display it in random order or even use a custom one through PaletteOrder and PaletteOrderSequence property.