FlexChart Field

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

For more information on FlexChart, see FlexChart documentation.

Bind 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.

    
    

Supported Chart Type

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.

WinForms 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.

WinForms 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.

WinForms 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.

WinForms 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.

WinForms 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.

WinForms 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.

WinForms 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.

WinForms 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.

WinForms 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.

WinForms SplineSymbols Chart

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.

WinForms 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.

WinForms 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:

• Candlestick Chart: A Candlestick chart is a special type of HighLowOpenClose chart that integrates Bar and Line charts to depict a range of values over time. It consists of visual elements known as candles that are further comprised of three elements: body, wick, and tail. The body represents the opening and the closing value, while the wick and the tail represent the highest and the lowest value respectively.

  
  

  
  

• HighLowOpenClose: HighLowOpenClose charts combine four independent values to supply high, low, open, and close data for a point in a series. In addition to showing the high and low value of a stock, the Y2 and Y3 array elements represent the stock's opening and closing price, respectively.

  
  

  
  

WinForms Histogram Chart

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.

WinForms RangedHistogram Chart

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.

WinForms 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.

WinForms StepArea Chart

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.

WinForms 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 Aggregate

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.

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.