FlexReport for WinForms | ComponentOne
Fields and Custom Fields / FlexChart Field
In This Topic
    FlexChart Field
    In This Topic

    FlexReportDesigner provides the field type, FlexChart field. The FlexChart field simplifies adding data visualization capabilities to FlexReport using flexible data binding, multiple chart types, and supports grouping and data aggregation.

    FlexChart in FlexReport

    For more information on FlexChart, see FlexChart documentation.

    Binding FlexChart Field with Data

    When you add the FlexChart field to your report, you need to bind it to data for populating the data in the displayed chart, say Column chart, as shown below. The following steps show how to bind the FlexChart field with data in FlexReportDesigner application.

    1. Create a new report in FlexReportDesigner.
    2. In Data tab, bind the Main data source with Products table of C1Nwind.mdb database.
    3. Under INSERT tab, select FlexChart field and draw it in the Header section.
    4. Select the FlexChart.
    5. In the Properties window, set the desired Chart Type, say Column chart, from ChartType dropdown.
    6. Navigate to Series and click the ellipsis button next to it.
    7. In the Series Collection Editor, click Add button to add a series data group.
    8. Navigate to Data and set the DataSourceName as Main.
    9. Set Label as ProductID.
    10. Set XExpression to ProductID.
    11. Set YExpression to UnitPrice.
    12. Close the Editor.
    13. Click on Preview.
      Product Reports

    Difference between FlexChartField and FlexChart

    FlexChartField inherits majority of properties from FlexChart. However, since FlexChartField is used in reporting scenarios, few properties and their nature are different from FlexChart. The major difference between the two controls appears in binding the controls with data as the binding properties are different in FlexChartField from that of FlexChart. The following table shows the high-level object model difference between the FlexChartField (FlexReport) and FlexChart.

    FlexChartField (FlexReport) FlexChart
    - AccessibleDescription
    - AccessibleName
    - AccessibleRole
    - AllowDrop
    Anchor Anchor
    AutoHeight -
    AutoWidth AutoWidth
    AxisX AxisX
    AxisY AxisY
    Background BackColor
    - BackgroundImage
    - BackgroundImageLayout
    - Binding
    - BindingMode
    - BindingX
    Bookmark -
    Border -
    BodersPlitHorzMode -
    BordersSplitVertMode -
    - CausesValidation
    CategoryGroups -
    ChartType ChartType
    - ContextMenuStrip
    - Cursor
    DataLabel DataLabel
    - DataMember
    - DataSource
    - Dock
    DataSourceName -
    - Enabled
    Font Font
    Footer Footer
    - ForeColor
    ForcePageBreak -
    - GenerateMember
    Header Header
    Height -
    Hyperlink -
    - ImeMode
    Left -
    Legend Legend
    - LegendToggle
    - Location
    - Locked
    - Margin
    MarginBottom -
    MarginLeft -
    MarginRight -
    MarginTop -
    - MaximumSize
    - MinimumSize
    - Modifiers
    Options Options
    OutlineLabel -
    OutlineParent -
    - Padding
    Palette Palette
    PlotMargin PlotMargin
    PlotStyle PlotStyle
    - RenderMode
    RightToLeft RightToLeft
    Rotated Rotated
    - SelectedIndex
    - SelectedMode
    - SelectionStyle
    Series Series
    SeriesGroups -
    - Size
    - SmoothingMode
    SplitHorzBehavior -
    SplitVertBehavior -
    Stacking Stacking
    Tag -
    - Text
    - ToolTip
    Top -
    Visible -
    Width -
    XLabelExpression -
    - UseWaitCursor
    - Visible
    Zorder -

    The following table shows the Series Object Model comparison.

    FlexChartField FlexChart
    AltStyle AltStyle
    Binding
    BindingMode
    BindingX
    ChartType ChartType
    DataMember
    DataSource
    DataSourceName
    Hyperlink
    Label
    Name
    Style Style
    SymbolMarker SymbolMarker
    SymbolSize SymbolSize
    SymbolStyle SymbolStyle
    Visibility Visibility
    XExpression
    Y1Expression
    Y2Expression
    Y3Expression
    YExpression

    FlexChartField Core Classes

    The following table lists objects and main properties of FlexChartField.

    FlexChartField
    Properties: DataSourceName, DataLabel.Content
    CategoryGroups
    Properties: GroupExpression, SortExpression, Sort, FilterExpression, FilterOutName
    FlexChart Series
    Properties: DataSourceName, XExpression, YExpression, Label
    SeriesGroups
    Properties: GroupExpression, SortExpression,Sort, FilterExpression, FilterOutName

    Supported Chart Types

    The FlexChartField in FlexReport allows you to set a specific chart type using C1.Chart.ChartType property. It allows you to visualize data through different chart types such as Area, Bar, Bubble, Candlestick, Column, Funnel, HighLowOpenClose, Histogram, Line, LineSymbols, RangedHistogram, Scatter, Spline, SplineArea, SplineSymbols, Step, StepArea and StepSymbols. The chart types can be easily selected using the ChartType property in the Properties window of the FlexReportDesigner.

    Area Chart: Area charts are line charts with area between the line chart and axis filled with a color or shading. Each series is drawn on top of the preceding series.

    Area chart

    SplineArea Chart: A SplineArea Chart is similar to an area chart. The only difference is that it connects data points using splines instead of straight lines and fills the area enclosed by the splines.

    SplineArea chart

    Bar Chart: Bar charts compare categorical data through the horizontal bars, where length of each bar represents the value of the corresponding category. Y-axis in these charts is a category axis.

    Bar chart

    Column Chart: Column charts are simply vertical version of bar charts and they use X- axis as a category axis. Though bar charts and column charts can be used interchangeably, column charts are preferred where number of values is too large to be accommodated on an X-axis while bar charts are preferred in the case of long category titles which are difficult to fit on an X-axis or in the case of large number of categories.

    Column chart

    Bubble Chart: A Bubble chart combines two independent values to supply both the point y value and the point sizes. Bubble charts are used to represent an additional data value at each point by changing its size. The Y array elements determine the Cartesian position (as in a XY-Plot chart), and the Y1 element values determine the size of the bubble at each point. The size of the points can be encoded according to area or diameter.

    Bubble Chart

    Scatter Chart: A Scatter chart uses two values to represent each data point. It depicts relationship among items of different data series. This type of chart is often used to represent scientific data, and can highlight the deviation of assembled data from predicted data or result.

    Scatter Chart

    Line Chart: A Line chart displays trends over a period of time by connecting different data points in a series with a straight line. It is the most effective way of denoting changes in the values between different groups of data.

    Line Chart

    LineSymbols Chart: A LineSymbols chart is a combination of the Line chart and the Scatter chart. The chart plots data points by using symbols and connects those data points by using lines.

    LineSymbols Chart

    Spline Chart: A Spline chart is similar to a line chart except that it connects data points by using splines rather than straight lines. It is specifically used for representing data that requires the use of curve fittings.

    Spline Chart

    SplineSymbols: A SplineSymbols chart combines the Spline chart and the Scatter chart. The chart plots data points by using symbols and connects those data points by using splines.

    SplineSymbols

    Funnel Chart: A funnel chart represents sequential stages in a linear process. This chart can be useful in identifying potential problem areas in processes where it is noticeable at what stages and rate the values decrease.

    Funnel Chart

    Stock Charts: Stock charts used in financial applications to show the opening, closing, high and low prices of a given stock. The types of stock charts are as follows:

    Histogram Charts: Histograms are visual representation of data distribution over a continuous interval or certain time period. These charts comprise of vertical bars to indicate the frequency in each interval or bin created by dividing the raw data values into a series of consecutive and non-overlapping intervals.

    RangedHistogram Charts: Ranged histogram is a modern Excel-like histogram chart that helps visualize frequency distribution on Y-axis, against ranged X-axis. Like histogram chart type, bins are created by dividing the raw data values into a series of consecutive, non-overlapping intervals.

    Step Charts: Step charts use vertical and horizontal lines to connect the data points to form a step-like progression. These charts are generally used to demonstrate the sudden change in data that might occur on irregular intervals and remains constant till the next change.

    StepArea Charts: Step area charts are area charts in which points are connected by vertical and horizontal line segments, that resemble staircase steps. The area between X-axis and line segment is filled with color or some pattern.

    Step Symbol Chart: Step symbol chart is a slight variation of step chart and is displayed with markers on the data points. These charts are used when it is required to know the exact data points which have been used to plot the chart.

    Grouping and Aggregates

    FlexReport allows using FlexChartField to render a FlexChart in FlexReport and perform grouping and aggregation in it. Let us create a report to show grouping and aggregation of data.

    The image below shows FlexReport containing FlexChart field where grouping and aggregation is performed on data.

    FlexChartField Data Aggregation and Grouping

    To create a report showing grouping and aggregation of data in FlexChart, follow these steps.

    1. In the FlexReportDesigner application, create a new report by navigating through the Report Wizard.
    2. Bind the report to the Main data source, by specifying the following Sql Statement.
      SELECT Categories.*, Categories.CategoryID as CategoryID, Products.* FROM Categories INNER JOIN Products ON Categories.CategoryID = Products.CategoryID
    3. Add a SubSection to the Header section and add FlexChart field to it.
    4. In the Properties window, expand AxisX and set the value of LabelAngle property to -10.
    5. Navigate to AxisX|Style and set Font properties to Arial, 9pt, Regular, StrokeColor to Olive, and StrokeWidth to 30.
    6. Navigate to AxisY and set Font properties to Arial, 9pt, Regular, StrokeColor to Olive, and StrokeWidth to 15.
    7. Set the Border Color to Black, Style to Solid and Width to 10.
    8. Navigate to CategoryGroups and click ellipsis button next to it.
      The DataGroup Collection Editor opens.
    9. In the DataGroup Collection Editor, click Add button to add a data group and set it's GroupExpression to CategoryID.
    10. Close the Editor.
    11. Navigate to Footer|Content and set it to Group By Category and Series.
    12. Navigate to Header|Content and set it to Count of products per Category.
    13. Navigate to Legend|Title and set it to Reorder Level.
    14. Navigate to Series and click the ellipsis button next to it.
    15. In the Series Collection Editor, click Add button to add a series.
    16. Navigate to Data|YExpression and set it's value to Count(*).
      With Count(*), we are setting aggregate data to the FlexChartField.
    17. Close the Editor.
    18. Navigate to SeriesGroups and click the ellipsis button next to it.
    19. In the Data Group Collection Editor, click Add button to add a series and set it's GroupExpression to RecordLevel.
    20. Close the Editor.
    21. Navigate to XLabelExpression and set it to CategoryName.
    22. Click Preview button to switch to Preview mode to view the report.

    FlexChart Navigation

    FlexChart field allows navigation to another report, a URL or script via the Hyperlink property of FlexChartField or a particular Series.

    Suppose you want to show Total Orders per Year and monthly sales for a particular year. Both these tasks can be achieved in FlexReport using FlexChart navigation feature. In one report, the chart shows Total Orders per year and in the other, the chart shows Sales per Month along with the total orders and amount received every month. If you click on one series, the report navigates to the chart and pass the year for which Monthly sales are shown.

    Let us create a report to navigate from a series to other report, or data within a report.

    1. In the FlexReportDesigner application, create two new reports, Orders Report and Sales Report, by navigating through the Report Wizard.
    2. Bind the reports to the Main data source, by specifying the following Sql Statement.
      SELECT o.OrderDate, od.Quantity * od.UnitPrice AS OrderItemSum FROM Orders AS o, [Order Details] AS od WHERE o.OrderId = od.OrderId  
    3. Add a parameter, pYear, to the report and set it's DataType to Integer, Prompt to Year, and Value to 2012.
    4. Add one FlexChart field in Orders Report and two FlexChart field in Sales Report.
    5. Select FlexChart field in Orders Report.
    6. In the Properties window, navigate to Series and click the ellipsis button next to it.
    7. In the Series Collection Editor, click Add button to add a series data group, navigate to Data|YExpression and set it's value to Sum(OrderItemSum).
    8. Navigate to Hyperlink|LinkTarget and set it to Bookmark.
    9. Click the ellipsis button next to the ParameterValues, add a parameter named pYear with =Year(OrderDate) value, and close the ParametersValues Editor.
    10. Set the Hyperlink|Report to Sales Report.
    11. Close the Editor.
    12. Navigate to SeriesGroups and click the ellipsis button next to it.
    13. In the Data Group Collection Editor, click Add button to add a series and set it's GroupExpression to Year(OrderDate).
    14. Close the Editor.
    15. Select the first FlexChart field in Sales Report.
    16. In the Properties window, navigate to Series and click the ellipsis button next to it.
    17. In the Series Collection Editor, click Add button to add a series data group.
    18. Navigate to Hyperlink|LinkTarget and set it to Bookmark.
    19. Set the Bookmark to =Month(OrderDate).
    20. Close the Editor.
    21. Navigate to SeriesGroups and click the ellipsis button next to it.
    22. In the Data Group Collection Editor, click Add button to add a series and set it's GroupExpression to Month(OrderDate).
    23. Close the Editor.
    24. Select the second FlexChart field in Sales Report.
    25. In the Properties window, navigate to Series and click the ellipsis button next to it.
    26. In the Series Collection Editor, click Add button to add a series data group, navigate to Data|YExpression and set it's value to Sum(OrderSum).
    27. Close the Editor.
    28. Select the Orders Report and click Preview button to switch to the Preview mode to see how FlexChart navigation works in FlexReport.