As of January's Service Pack, you can take advantage of a new high-performance FlexChartField (Beta) to complete your reports' data visualisation needs. Its powerful and flexible data binding make adding data visualisation capabilities a simpler task in FlexReport. The FlexChartField is supported in FlexReport in all three platforms: WinForms, UWP, WPF. While FlexReports already have built-in chart options. FlexChartField offers much more flexibility.
- FlexChartField's easy-to-use API has a small learning curve when it comes to going through the chart object model to design reports.
- The rendering is based on DirectX, which fits with FlexReport rendering.
- It is supported on multiple platforms in FlexReport - WinForms, WPF & UWP. It fulfills the limitation of previous charts not being supported in WPF and UWP.
- It has small assembly size as compared to previous chart.
- It is visually more appealing and professional.
How to use FlexChartField in FlexReport
Here's a simple scenario to bind FlexChart with data:
- Open FlexReportDesigner.exe application.
- Create new report.
In Data tab, add a new data source and bind it with Orders table of C1Nwind.mdb database. Set following query to bind data:
SELECT o.OrderDate, od.Quantity * od.UnitPrice AS OrderItemSum FROM Orders AS o, [Order Details] AS od WHERE o.OrderId = od.OrderId
Follow rest of the steps in the FlexReport Wizard.
- Under Insert tab, select FlexChart and draw in Report Header area.
- Select the Chart.
- In the Property Grid, set desired Chart Type from ChartType dropdown (Column in this case).
- Open Series collection editor.
- Set YExpression to "Sum(OrderItemSum)".
- Click OK.
- Open SeriesGroup Collection
- Add new Series Group
- Set GroupExpression to Year(OrderDate).
- Click OK.
- Click on Preview.
FlexChart Navigation with Report Parameters
You can also navigate to other reports, a url, or a script via the hyperlink property of FlexChartField or a particular Series. Here's an example: Suppose you want to show Total Orders per Year and monthly sales for the particular year. Both problems are solved in separate reports. In one report, a chart shows Total Orders per year. If a user clicks on one series, the report should navigate to the chart in other report and pass the year, for which Monthly sales should be shown.
- Select FlexChartField in Report 2 on Designer.
- Open Series Collection editor from Property Grid.
- Set Hyperlink: >Link Target = Bookmark.
- Click OK.
- Add a parameter to the report in Data Tab and name it pYear.
- Set DataType to Integer and Value to 2014 for the parameter.
- Select FlexChartField in Report 1 on Designer.
- Open Series Collection editor.
- Set Hyperlink: >LinkTarget=Bookmark
- Set Hyperlink: >Report=Report 2.
- Open Hyperlink->ParameterValues Collection.
- Add a parameter and set Name=pYear, Value=Year(OrderDate)
- Click OK.
- Preview Report 1.
- Click on a series of say Year 2014.
Monthly sales for Year 2014 would be shown. Here is a video demonstrating the above.
For a complete settings of the charts in the two reports, please refer to the FlexChart Navigation report from "FlexCommonTasks" sample. For other features, please refer to following reports:
- FlexCommonTasks_UWP.flxr: FlexReportSamples for UWP
- FlexCommonTasks: FlexCommonTasks for Winforms
- FlexCommonTasks_XML: FlexReportSamples for WPF
Note about Old ChartField The old ChartField is now hidden by default and has been turned into LegacyChartField. To restore it you can check option in File->Options dialog. If an old ChartField already exists in a report definition, all related functionality in the Designer would still work fine.