Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Collapse]Concepts
  [Expand]Application Solution Components
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]UI Construction
  [Expand]Extend Functionality
  [Expand]Data Manipulation and Business Logic
  [Expand]Security System
  [Expand]Localization
  [Expand]System Module
  [Collapse]Extra Modules
   [Expand]Audit Trail Module Overview
    Business Class Library Customization Module
    Chart Module
    Clone Object Module
   [Expand]Conditional Appearance Module Overview
   [Expand]Dashboards Module
    File Attachments Module Overview
    HTML Property Editor Module
   [Expand]Notifications Module
    KPI Module
   [Expand]Maps Module
   [Expand]Pivot Chart Module
    Pivot Grid Module
   [Expand]Reports V2 Module
   [Expand]Reports Module (Obsolete)
   [Expand]Scheduler Module
    Script Recorder Module
   [Expand]State Machine Module
   [Expand]TreeList Editors Module
   [Expand]Validation Module
    View Variants Module
   [Expand]Workflow Module
  [Expand]Debugging and Error Handling
  [Expand]Filtering
  [Expand]Application Life Cycle
 [Expand]Design-Time Features
 [Expand]Functional Testing
 [Expand]Deployment
 [Expand]Task-Based Help
 [Expand]Frequently Asked Questions
 [Expand]API Reference
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Chart Module

The Chart module contains List Editors that allow you to visualize data using the XtraCharts library from DevExpress. The XtraCharts library is designed for WinForms and ASP.NET, and offers you a comprehensive set of 2D and 3D charts to address a broad range of business needs with ease. The Chart module adopts these controls for XAF applications, so you can easily visualize your data. This topic describes the basics of the Chart module.

The Chart module is represented by three module projects.

  • ChartModule
    Contains base classes and interfaces that are used by both the WinForms and ASP.NET charts in XAF.
    You can add this module to your platform-agnostic module. To do this, invoke the Module Designer and drag ChartModule from the Toolbox to the RequiredModules panel. Be sure to rebuild your solution after making changes in the Designer. As a result, the ChartSettings node will be added to each ListView node in the Application Model.
  • ChartWindowsFormsModule
    Adds references to the DevExpress.ExpressApp.Chart.v17.1 and DevExpress.ExpressApp.Chart.Win.v17.1 assemblies.
    You can add this module to your WinForms module. To do this, invoke the Module Designer and drag ChartWindowsFormsModule from the Toolbox to the RequiredModules panel. Alternatively, you can add this module to the WinForms application project. To do this, invoke the Application Designer and drag the ChartWindowsFormsModule from the Toolbox to the Modules panel. Remember to rebuild your solution after making changes in the Designer. As a result, it will be possible to select the WinForms-specific Chart List Editor as the IModelListView.EditorType value in the Application Model.
  • ChartAspNetModule
    Adds references to the DevExpress.ExpressApp.Chart.v17.1 and DevExpress.ExpressApp.Chart.Web.v17.1 assemblies.
    You can add this module to the ASP.NET application project. To do this, invoke the Application Designer and drag the ChartAspNetModule from the Toolbox to the Modules panel. Alternatively, you can add this module to your ASP.NET module. To do this, invoke the Module Designer and drag the ChartAspNetModule from the Toolbox to the RequiredModules panel. Remember to rebuild your solution after making changes in the Designer. As a result, it will be possible to choose the ASP.NET-specific Chart List Editor as the IModelListView.EditorType value in the Application Model.
Note

A step-by step guide to using the Chart module is provided in the How to: Display a List View as a Chart topic. The charting List Editors described here are demonstrated in the List Editors section of the Feature Center demo. By default, the Feature Center demo is installed in %PUBLIC%\Documents\DevExpress Demos 17.1\Components\eXpressApp Framework\FeatureCenter. The ASP.NET version of this demo is available online at http://demos.devexpress.com/XAF/FeatureCenter/.

Expanded Chart List Editors

The Chart module supplies two List Editors - ChartListEditor for WinForms and ASPxChartListEditor for ASP.NET. These List Editors are based on the WinForms Chart Control and ASP.NET Chart Control, and display a List View as a chart.

To display a certain List View as a chart, find this List View's node in the Model Editor invoked for the WinForms or ASP.NET module project, and change the IModelListView.EditorType property value to DevExpress.ExpressApp.Chart.Win.ChartListEditor or DevExpress.ExpressApp.Chart.Web.ASPxChartListEditor.

Expanded Configure Charts in the Application Model

Both WinForms and ASP.NET chart controls can be configured in the Application Model. Invoke the Model Editor, navigate to the required List View's ChartSettings node, and click the ellipsis button () for the Settings property. This will invoke the Chart Designer. If you invoke the Model Editor in a platform-agnostic module, the settings specified in the Chart Designer will be applied to both WinForms and ASP.NET chart controls.

In WinForms applications, end-users can also invoke the designer at runtime, and reset settings to their defaults using the chart's context menu, when the Application Model's ICustomizationEnabledProvider.CustomizationEnabled property of the List View's ChartSettings node is set to true.

Runtime settings are saved to user differences (the Model.User.xafml file, by default).

Expanded Configure Charts in Code

Both WinForms and ASP.NET chart controls have a number of settings that are unavailable in the Chart Wizard, but can be changed directly in code, by accessing chart control properties. Additionally, you may wish to change chart behavior by handling a control's events. To access a chart control instance in code, implement a View Controller, get the current List Editor, and handle the ListEditor.ControlsCreated event.

The code above is for the WinForms chart control. It should be placed in the WinForms module project. To access the ASP.NET chart control, place the Controller in the ASP.NET module project, and cast the chart object to WebChartControl instead of ChartControl. To learn more about chart controls, including their properties and events, refer to the ChartControl and WebChartControl documents. Note that these classes reside within the DevExpress.XtraCharts.v17.1.UI.dll and DevExpress.XtraCharts.v17.1.Web.dll assemblies, so you should add a corresponding reference to compile the code above.

Expanded Export And Print Charts

Since Chart List Editors implement the IExportable interface, charts can be exported using the ExportController.ExportAction Action and printed using the PrintingController.PrintAction Action. You can customize the behavior of these Actions by handling the events of the ExportController and PrintingController classes (see How to: Customize Export Options of the Printing System and How to: Customize the Export Action Behavior).

Print and Export Actions in a WinForms Application:

Print Preview in a WinForms Application:

Export Action in an ASP.NET Application:

How would you rate this topic?​​​​​​​