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

    FlexReport provides the Legacy Chart field, and it uses the C1.Win.C1Chart and C1.Win.C1Chart3D assemblies to render chart fields consisting of 2D and 3D chart types, respectively. In order to view the Legacy Field and Legacy Chart buttons in the Insert tab, select the checkboxes against Show "Legacy Field" button on the INSERT tab and Show "Legacy Chart" button in the General tab options in FlexReportDesigner Options. For more information on 2DCharts and 3DCharts, see 2DChart documentation and 3DChart documentation, respectively.

    Chart Types

    The Chart Field in FlexReport allows you to insert various types of charts using Chart.Chart2DGroup.ChartType and Chart.Chart3DGroup.ChartType. The chart types that are supported in C1FlexReport are - Area, Bar (horizontal bars), Column (vertical columns), Doughnut, Scatter (X-Y values), Line, Pie, Step, Stock, Histogram, Radar, Polar, and 3D charts-Cone, Cylinder, and Pyramid. The chart types can be easily selected using the ChartType property in the Properties window of the FlexReportDesigner.

    Area chart: An Area chart draws each series as connected points of data, filled below the points. Each series is drawn on top of the preceding series.

    Bar and Column charts: A Bar chart or a Column chart represents each series in the form of bars of the same color and width, whose length is determined by its value. Each new series is plotted in the form of bars next to the bars of the preceding series. A Bar or Column chart draws each series as a bar in a cluster. The number of clusters is the number of points in the data. Each cluster displays the nth data point in each series. When the bars are arranged horizontally, the chart is called a bar chart and when the bars are arranged vertically, the chart is called column chart.

    The following image represents a Bar chart:

    The following image represents a 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.

    Scatter chart: A Scatter chart uses two values to represent each data point. This type of chart is often used to support statistical techniques that quantify the relationship between the variables (typically Linear Regression Analysis).

    Pie chart: A Pie chart draws each series as a slice in a pie. The number of pies is the number of points in the data. Each pie displays the nth data point in each series. You can also customize Pie charts for displaying legends and labels.


    Doughnut Chart:

    A doughnut chart is a pie chart with a non-zero radius and is identical in function to a pie chart, but can be used to increase aesthetic appeal, particularly when shown with 3D effects. As with all pie charts, each doughnut shows each series as a fraction of the whole at each data point. If multiple data points are specified, then multiple doughnuts appear in the chart.

    A doughnut chart can be created by setting the InnerRadius property of a pie chart to a non-zero value. The InnerRadius value represents the percentage of the full pie radius. The InnerRadius property can be accessed in the pie object of each Chart group.

    Radar chart: A Radar chart draws the y value in each data set along a radar line (the x value is ignored except for labels). If the data has n unique points, then the chart plane is divided into n equal angle segments, and a radar line is drawn (representing each point) at n/360 degree increments. By default, the radar line representing the first point is drawn vertically (at 90 degrees). Radar charts can be further customized.


    Step chart: A Step chart is a form of XY plot chart that draws series as connected points of data. These charts are often used when Y values change by discrete amounts, at specific values of X with a sudden change of value. A simple, everyday example would be a plot of a checkbook balance with time. As each deposit is made, and each check is written, the balance (Y value) of the check register changes suddenly, rather than gradually, as time passes (X value). During the time that no deposits are made, or checks written, the balance (Y value) remains constant as time passes.

    Line chart: A Line chart draws each series as connected points of data. It is the most effective way of denoting changes in values between different groups of data. These charts are commonly used to show trends and performance over time.

    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 chart: A Histogram chart takes a collection of raw data values and plots the frequency distribution. It is frequently used with grouped data, which is generated by measuring a collection of raw data and plotting the number of data values that fall within defined intervals. Note that raw values are not used to generate data for a histogram, but are used to generate a frequency instead. While showing similarities to bar charts, it is important to note that histograms are used with quantitative variables whereas bar charts are commonly used with qualitative variables.

    While the histogram and bar charts' appearances relate, their functionality does not. A bar chart is created from data points whereas a Histogram is created from the frequency distribution of the data. The charts following illustrate the difference between a bar chart and a histogram chart. Both of the charts use exactly the same Y data. The bar chart (top) shows each average mean temperature for each year in which it occurred. The histogram chart (bottom) using the same input temperature data automatically tabulates the number of temperatures that fall within each interval and draws the resulting histogram. For convenience, chart labels with the count in each interval have been added at the top of each interval.

    A histogram is beneficial for pinpointing prominent features of the distribution of data for a quantitative variable. The important features for a quantitative variable include the following:

    To select the chart type as Histogram, go to ChartGroups|Group0 and set the ChartType to Histogram.

    Polar chart: A Polar chart draws the x and y coordinates in each series as (theta,r), where theta is amount of rotation from the origin and r is the distance from the origin. Theta may be specified in either degrees (default) or radians. Since the X-axis is a circle, the X-axis maximum and minimum values are fixed. The series can be drawn independently, or stacked.

    3D Charts

    Design-Time Support

    The Chart field in FlexReport provides design-time support through design-time editors and collection editors that simplify working with the charts.

    The design-time editors for Chart field are as follows:

    These editors can be invoked by right-clicking the chart field and selecting the required editor.

    Chart properties window

    It provides an easy and interactive way to create and modify a new or existing chart. It contains the options to select the type of chart and . However, it also includes additional property settings for the x and y axis along with appearance settings for the header, footer, legend, chart area, and plot area of the chart. The Chart Properties dialog box provides more options to address specific details with the design of the chart you are developing. It consists of following elements:

    Note: If you don't select a chart type for data [Group1] then the elements for data [Group1] will not appear in the list box in the left pane of the Chart Properties dialog box.

    Chart Data window

    The Chart Data editor lets you bind the chart by setting data through Chart Data-add or remove data series in your chart, specify the label and color of each data series, and stack your data by checking the Show stacked data check box.

     Visual effects


    Visual Effects is a tool used for visually enhancing the Chart2D control's elements such as the data series, header, and footer. Any existing project can use the new features provided by this tool. The chart's appearance can dramatically improve in a few simple steps using the Visual Effects designer.

    The collection editors for Chart field are as follows:

    Plotting Data in Data-Bound Charts

    The steps to plot a simple 2D chart are as follows:

    1. Open the C1FlexReportDesigner application.
    2. Create a new report by navigating through the C1FlexReport wizard or open an existing report definition.
    3. Add Legacy Chart field to the Detail section.
      Note: To add Legacy Chart field to your report, you need to add it to the INSERT tab. In order to do that, go to File|Options in the designer and select Show "Legacy Chart" button on the INSERT tab.
    4. Right-click the chart field, select Chart Properties>Simple Types>Bar.
    5. Right-click the chart field and select Chart Data Source.
    6. Click Simple 2D Chart and check the Generate simple 2D chart checkbox.
    7. Specify X and Y values of the chart.

    For example, the chart shown is created using C1NWind.mdb database and Products table, with following properties set:

    Add series label as follows:

    1. Select 2D Chart Group0, and then Series Values.
    2. Specify Series Label as ''CategoryID vs UnitPrice'.

    Add legend as follows:

    1. Go to the Properties window.
    2. In the Legend|Text, set the legend name as 'Legend' and Legend|Visible to True.

    Add Titles to the chart as follows:

    1. Go to Properties window.
    2. Select Titles|Header, set the header text as 'Header' and Titles|Header|Visible to True.
    3. Select Titles|Footer, set the footer text as 'Footer' to add header and footer to the chart.

    You can also add axis titles in the chart, add back color and border to chart area, and more. For more information on  using properties for customizing charts, see 2DChart documentation.

    Three dimensional data can be represented in the form of 3D Surface, 3D Bar, and many more by using 3D Chart types. To plot 3D charts from 2D charts, you can change the VisualizationType property to Chart3D. For more information on plotting 3D charts, see 3DChart documentation.

    Plotting Data in Unbound Charts

    FlexReport allows you to add data to the charts without binding the charts to a data source. You can plot series on chart and display it by setting an array of X and Y values directly in unbound mode. Let us add an unbound 2D chart by performing the following steps:

    1. In the C1FlexReportDesigner application, create a new report by navigating through the C1FlexReport wizard or open an existing report definition.
    2. Add Chart field to the Detail section.
      Note: To add Legacy Chart field to your report, you need to add it to the INSERT tab. In order to do that, go to File|Options in the designer and select Show "Legacy Chart" button on the INSERT tab.
    3. In Properties window, expand ChartGroups|Group0|ChartType and select a type of chart from the ChartType dropdown. In our case, we have selected Bar chart type.
    4. Navigate to ChartGroups|Group0|ChartData and click the ellipsis button next to UnboundSeriesList property.
    5. In the ChartUnboundDataSeries Collection Editor, add any number of series you want to plot in chart. Here, we have added two series.
    6. Select one of the series and click the ellipsis button next to SeriesData property.
    7. In the editor for series data, enter your data.
    8. Click OK to close the editors.
    9. Click the Preview button to switch to Preview mode to view the report.
      Preview mode to view the report

    For 3D unbound chart, perform the following steps:

    1. Add Chart field to the Detail section.
    2. In Properties window, expand ChartGroups|Group0|ChartType and select a type of chart from the ChartType dropdown. In our case, we have selected Surface chart type.
    3. Navigate to ChartGroups|Group0|ChartData|UnboundData|GridSet.
    4. Set the ColumnCount and RowCount properties to the desired value, if required. In our case, both ColumnCount and RowCount properties are set to 0.
    5. Click the ellipsis button next to the GridData property.
    6. In Single Array Editor, enter data and close it.
    7. Click the Preview button to switch to Preview mode to view the report.
      Preview report

    Charts with Multiple Series

    Sometimes you need to create charts that have multiple data sets or multiple series. To create such charts, the values for each series are required to be set.

    Chart with multiple series

    Consider an example of Products table from C1Nwind.mdb database, where you want to view Unit Price, Units in Stock, and Reorder Level corresponding to the Category IDs. The steps to achieve this scenario are as follows:

    1. Right-click the Chart field and select Chart Data Source .
    2. Click 2DChartGroup0 and then click Series Values.
    3. Click the plus glyph and specify Series Label of your choice and Values from the drop-down list. You can also add colors to the series from the Fill option in  Style tab. In this case, the data specified for our multiple-series chart is as follows:
      Series Label Values Style | Fill
      Unit Price UnitPrice Blue Voilet
      Units in Stock UnitsinStock Pale Turquoise
      Reorder Level ReorderLevel Deep Pink
    1. To create Legend:

    2. Right-click Legacy Chart field.
    3. Select Chart Properties.
    4. Navigate to Appearance | Legend.
    5. Select the Visible checkbox and write “Legend” as Text.

    Charts in Grouped Reports

    FlexReport for WinForms allows you to create reports with multiple groups. For example, instead of listing all products in a single flat report, you could group products by category. Each group has a header and a footer section that allow you to display information about the group, including titles and subtotals, for example.

    If you add a chart to a group header, the chart will display only the data for the current group. By contrast, adding a chart to the report header or footer would include all the data in the report.

    To illustrate this, here is a diagram depicting a report definition as shown in the report designer and showing the effect of adding a Chart field to the report header and to a group header:

    Report Header section

    A chart field here would generate
    only one chart for the entire report.

    The chart would show all the data
    in the report's data source.

    Page Header section

    Group Header section (CategoryName)

    A chart field here would generate
    one chart for each CategoryName value.

    Each chart would show all the data
    for the current CategoryName.

    Detail section

    Group Footer section (CategoryName)

    Page Footer section

    Report Footer section

    Continuing with the example mentioned above, lets visualize the report data for each category through chart.

    Add a Legacy Chart field to the Group Header section (Category Name) and create the chart as explained in the topic Plotting Data in Charts. Specify X and Y values of the chart as ProductName and UnitPrice and specify Value in Series Values as UnitPrice.

    The images below show screenshots of the report described above with the group headers, the charts they contain, and a few detail records to illustrate:

    Grouped report charts

    The chart above shows unit prices for products in the "Condiments" category. The chart below shows unit prices for products in the "Confections" category.

    Grouped report charts