The requested page is not available for the requested platform. You are viewing the content for Default platform.

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.

ASPxChartListEditor

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.v19.1.dll and DevExpress.ExpressApp.Chart.Win.v19.1.dll 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.v19.1.dll and DevExpress.ExpressApp.Chart.Web.v19.1.dll 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. The Feature Center demo is installed in %PUBLIC%\Documents\DevExpress Demos 19.1\Components\eXpressApp Framework\FeatureCenter by default. The ASP.NET version of this demo is available online at http://demos.devexpress.com/XAF/FeatureCenter/.

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.

ChartListEditor

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.

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 (EllipsisButton) 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.

ModelEditor_SpecialEditors_ChartWizard

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.

ChartContextMenu

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

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.

public class MyController : ViewController<ListView> {
    protected override void OnActivated() {
        base.OnActivated();
        View.Editor.ControlsCreated += Editor_ControlsCreated;
    }
    void Editor_ControlsCreated(object sender, EventArgs e) {
        ChartControl chart = View.Editor.Control as ChartControl;
        if(chart != null) {
             // Place your chart configuration code here.
        }
    }
}

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.v19.1.UI.dll and DevExpress.XtraCharts.v19.1.Web.dll assemblies, so you should add a corresponding reference to compile the code above.

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:

Export_ChartListEditor

Print Preview in a WinForms Application:

Printing_ChartListEditor

Export Action in an ASP.NET Application:

Export_ASPxChartListEditor