Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Collapse]Charts
    Overview - Chart
   [Collapse]Getting Started
     Lesson 1 - Create a Simple Unbound Chart
     Lesson 2 - Create a Chart Bound to Data
     Lesson 3 - Create a Chart Using a Series Template
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 2 - Create a Chart Bound to Data

This lesson details the steps needed to build a chart in Visual Studio with a series bound to data.

To create a chart bound to data, do the following.

Expanded Step 1. Create a New Project

In this step, do the following preparatory work.

  • Create a new ASP.NET MVC project integrated with DevExpress ASP.NET MVC Extensions.

  • Add a new empty ChartController Controller to the project.

  • Add a new empty Chart | Index View to the project.

To learn how to do this , refer to Lesson 1.

Now the blank project is ready for further customization.

Expanded Step 2. Add a Data Model

In this step, the data model will be added using the Entity Framework and the View will be provided with data.

  • If the Entity Framework is not installed, install it using the NuGet Package Manager or Package Manager Console.

  • Right-click the Models folder. In the invoked menu, click the Add | New Item... item.

  • In the invoked Add New Item dialog, select the Data group and then select the ADO.NET Entity Data Model item. Set the model name to NwindDbContext and click Add.

  • After the previous action, the Entity Data Model Wizard appears. In the wizard, select the Code First from database item and click Next.

  • Then, click the New Connection... button and in the invoked Connection Settings dialog set the Data Source to Microsoft Server SQL Database File (SqlClient) and click Browse....

  • In the invoked Open File dialog, select the NWind database file shipped with DevExpress Components Demo and click Open.

    Note

    By default, the file is located in the C:\Users\Public\Documents\DevExpress Demos 17.1\Components\Data folder.

    Click the OK button to perform changes and then click the Next button to move to the next step.

  • If the following message appears, click Yes to copy the database to the project directory.

  • Select the Categories and Products data tables in the database data tables list and click Finish to generate a database connection and entity classes.

  • Add the following code to the ChartController class definition.

    This code selects a list of products which have the Beverages category. Then, the list is assigned to the Model property of the Chart | Index View using the View's constructor, taking a Model as an argument.

Currently, the Model preparation is finished and data can be provided to a Chart.

Expanded Step 3. Create a Chart

In this step, a Chart will be added to the View and the series bound to the Model will be added to the Chart.

  • Create a new ChartControlExtension. Bind the View.Model property to it using the ChartControlExtension.Bind method. Finally, obtain the resulting HTML code using the ExtensionBase.GetHtml method. The following code snippet demonstrates how to do this.

  • Add a new series using the XtraChartsCollectionExtensions.Add method allowing you to configure series parameters. Specify the series SeriesBase.ArgumentDataMember and SeriesBase.ValueDataMembers using the SeriesBase.SetDataMembers method.

The chart is now created. If you now run the application, it should look as follows.

Required data is provided to the Chart. In the next step, customize the appearance of the chart.

Expanded Step 4. Customize the Chart

In this step, the chart, series and legend appearances will be improved, the chart title will be added, and finally, the crosshair ursor will be configured.

  • To change the default palette, specify the ChartControlSettings.PaletteName property value. Also, to adjust a chart’s size, change its ChartControlSettings.Width and ChartControlSettings.Height properties.

  • To customize the series view, call the XtraChartsSeriesBaseExtensions.Views method to obtain an object allowing you to configure a series view. Then call the method configuring the required series view. In this lesson, the SeriesViewActionMethodContainer.SideBySideBarSeriesView is used. Set the SeriesViewColorEachSupportBase.ColorEach property value to true, and the FillStyle2D.FillMode property of the BarSeriesView.FillStyle to FillMode.Solid.

  • To change the text displayed in the legend item for each series point, specify the SeriesBase.LegendTextPattern property value. For instance, to display an argument value in the legend, assign the "{A}" text value to this property.

  • To add a chart title, call the XtraChartsCollectionExtensions.Add method allowing you to configure the newly added title. Specify the title's Title.Text property.

  • To configure a crosshair cursor, use the ChartControlSettings.CrosshairOptions property. Set the CrosshairOptions.ShowArgumentLabels and CrosshairOptions.ShowValueLabels to true to display a crosshair cursor's axis labels. And then, set the CrosshairOptions.ShowValueLine to true to display the crosshair cursor value line.

Expanded Result

The application is done and its source code should look like the following.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T287970.

Run the application. The following image demonstrates its appearance.

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