Skip to end of metadata
Go to start of metadata

Chart is a graphical representation of data, in which the data is represented by a column, bar, line, area, or slice. Charts are often used to ease understanding of large quantities of data and the relationships between parts of the data. Charts can usually be read more quickly than the raw data that they are produced from.

On this page:

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

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

  • Clustered Column Series
  • Line Series
  • Area Series
  • Spline Series
  • Spline Area Series
  • Stepped Line Series
  • Stepped Area Series

Stacked Column Area

  • Stacked Column Series
  • Stacked Line Series
  • Stacked Area Series
  • Stacked Spline Series
  • Stacked Spline Area Series

Full-Stacked Column Area

  • Full-Stacked Column Series
  • Full-Stacked Line Series
  • Full-Stacked Area Series
  • Full-Stacked Spline Series
  • Full-Stacked Spline Area Series

Clustered Bar Area

  • Clustered Bar Series

Stacked Bar Area

  • Stacked Bar Series

Full-Stacked Bar Area

  • Full-Stacked Bar Series

Scatter Area

  • Scatter Series
  • Scatter Line Series
  • Scatter Spline Series

Range Area

  • Range Series

Stepped Range Area

  • Stepped Range Series

Pie Area

  • Pie Series

Doughnut Area

  • Doughnut Series

Bubble Area

  • Bubble Series

Title

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

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.

Clustered Column

  • Clustered Column Series
  • Stacked Column Series
  • Full-Stacked Column Series

Clustered Bar

  • Clustered Bar Series
  • Stacked Bar Series
  • Full-Stacked Bar Series

Range

  • Range Series
  • Stepped Range Series

Line

  • Line Series
  • Stacked Line Series
  • Full-Stacked Line Series
  • Spline Series
  • Stacked Spline Series
  • Full-Stacked Spline Series
  • Stepped Line Series

Area

  • Area Series
  • Stacked Area Series
  • Full-Stacked Area Series
  • Spline Area Series
  • Stacked Spline Area Series
  • Full-Stacked Spline Area Series
  • Stepped Area Series

Scatter

  • Scatter Series
  • Scatter Line Series
  • Scatter Spline Series

Pie

  • Pie Series

Doughnut

  • Doughnut Series

Bubble

  • Bubble Series

Axis

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.

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

  • NumericAxis

    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.

  • DateTimeAxis

    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

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.

Horizontal Alignment

  • Left
  • Center
  • Right
  • LeftOutside
  • RightOutside

Vertical Alignment

  • Top
  • Center
  • Bottom
  • TopOutside
  • BottomOutside

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

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.

In addition, you are also allowed to define your own style by using CustomPalette property. A palette contains several resources, named as PaletteResource, which has the following properties:

  • 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 BackgroundColumn Background NegativeBorder ColorArea BackgroundArea Background NegativeLine ColorLine Color Negative
Clustered Column SeriesYesYesYesNoNoNoNo
Stacked Column SeriesYesYesYesNoNoNoNo
Full-Stacked Column SeriesYesYesYesNoNoNoNo
Clustered Bar SeriesYesYesYesNoNoNoNo
Stacked Bar SeriesYesYesYesNoNoNoNo
Full-Stacked Bar SeriesYesYesYesNoNoNoNo
Line SeriesNoNoNoNoNoYesYes
Stacked Line SeriesNoNoNoNoNoYesYes
Full-Stacked Line SeriesNoNoNoNoNoYesYes
Spline SeriesNoNoNoNoNoYesYes
Stacked Spline SeriesNoNoNoNoNoYesYes
Full-Stacked Spline SeriesNoNoNoNoNoYesYes
Stepped Line SeriesNoNoNoNoNoYesYes
Area SeriesNoNoNoYesYesNoNo
Stacked Area SeriesNoNoNoYesYesNoNo
Full-Stacked Area SeriesNoNoNoYesYesNoNo
Spline Area SeriesNoNoNoYesYesYesYes
Stacked Spline Area SeriesNoNoNoYesYesYesYes
Full-Stacked Spline Area SeriesNoNoNoYesYesYesYes
Stepped Area SeriesNoNoNoYesYesYesYes
Range SeriesYesYesNoNoNoYesYes
Stepped Range SeriesYesYesNoNoNoYesYes
Scatter SeriesNoNoNoNoNoYesYes
Scatter Line SeriesNoNoNoNoNoYesYes
Scatter Spline SeriesNoNoNoNoNoYesYes
Pie SeriesYesNoYesNoNoNoNo
Bubble SeriesNoNoYesNoNoNoNo
Doughnut SeriesYesNoYesNoNoNoNo

 

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.