Introducing New FlexChartField in FlexReport

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.

  1. FlexChartField's easy-to-use API has a small learning curve when it comes to going through the chart object model to design reports.
  2. The rendering is based on DirectX, which fits with FlexReport rendering.
  3. 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.
  4. It has small assembly size as compared to previous chart.
  5. It is visually more appealing and professional.

Try FlexReport in ComponentOne Studio

How to use FlexChartField in FlexReport

Here's a simple scenario to bind FlexChart with data:

  1. Open FlexReportDesigner.exe application.
  2. Create new report.

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

  4. Follow rest of the steps in the FlexReport Wizard.

  5. Under Insert tab, select FlexChart and draw in Report Header area.
  6. Select the Chart.
  7. In the Property Grid, set desired Chart Type from ChartType dropdown (Column in this case).
  8. Open Series collection editor.
  9. Set YExpression to "Sum(OrderItemSum)".
  10. Click OK.
  11. Open SeriesGroup Collection
  12. Add new Series Group
  13. Set GroupExpression to Year(OrderDate).
  14. Click OK.
  15. Click on Preview.

Your chart looks like this: CountOfOrders

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.

  1. Select FlexChartField in Report 2 on Designer.
  2. Open Series Collection editor from Property Grid.
  3. Set Hyperlink: >Link Target = Bookmark.
  4. Click OK.
  5. Add a parameter to the report in Data Tab and name it pYear.
  6. Set DataType to Integer and Value to 2014 for the parameter.
  7. Select FlexChartField in Report 1 on Designer.
  8. Open Series Collection editor.
  9. Set Hyperlink: >LinkTarget=Bookmark
  10. Set Hyperlink: >Report=Report 2.
  11. Open Hyperlink->ParameterValues Collection.
  12. Add a parameter and set Name=pYear, Value=Year(OrderDate)
  13. Click OK.
  14. Preview Report 1.
  15. 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:

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. LegacyChartField If an old ChartField already exists in a report definition, all related functionality in the Designer would still work fine.

MESCIUS inc.

comments powered by Disqus