FlexReport for WPF | 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

    Comparison 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