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 3 - Create a Chart Using a Series Template

This lesson goes over the steps needed to build a chart bound to data in Visual Studio using a series template.

To create a chart, do the following.

Result

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 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, a data model used to provide data to the View will be added to the project.

  • In the Solution Explorer, right-click the Models folder. In the invoked menu, click Add | New Item....

  • In the invoked Add New Item dialog, select the Class group and then select the Class item. Set the Class name to Gdp and click Add.

    Add the following code to the newly created class.

  • Then, create a new GdpProvider class as was done in the previous steps and add the following code to it.

  • Find the GDPofG7.xml file shipped with the DevExpress DemoCenter and copy it to the App_Data directory within the project directory.

    Note

    By default, the file is located in the C:\Users\Public\Documents\DevExpress Demos 17.1\Components\ASP.NET\CS\MVCxChartDemos\App_Data folder.

  • Add the following code to the ChartController class definition.

    In this code, a collection of GDP values is loaded from the file copied from the DemoCenter. Then, the collection is assigned to the Model property of the Chart | Index View using the View’s constructor, which takes a model object as an argument.

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

Expanded Step 3. Create a Chart

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

  • Create a new ChartControlExtension. Bind the View.Model property to it and specify the series data member using the ChartControlExtension.Bind method (series data member values will be used to identify series). Finally, obtain the resulting HTML code using the ExtensionBase.GetHtml method. The following code snippet demonstrates how to do this.

  • Specify the SeriesBase.ArgumentDataMember and SeriesBase.ValueDataMembers properties of a series template to bind automatically generated series arguments and values to the Model properties. To obtain the series template, use the XtraChartsCollectionExtensions.Template method. Then, to specify the properties, use the SeriesBase.SetDataMembers method.

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

Required data is provided to the Chart. In the next step, let's customize the chart appearance.

Expanded Step 4. Customize the Chart

In this step, the appearance of chart and series is improved and the chart title and axis titles are added.

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

  • To customize the view of all automatically generated series, use the XtraChartsSeriesBaseExtensions.Views method. Change the series view to line using the SeriesViewActionMethodContainer.LineSeriesView method of an object returned by Views(). For example, show markers by setting the LineSeriesView.MarkerVisibility property value of the view to DefaultBoolean.True.

  • To add a chart title, use the XtraChartsCollectionExtensions.Add method, which will allow you to configure an added ChartTitle object. Specify the title’s Title.Text property as shown below.

  • To specify an axis title, call the ChartControlSettings.XYDiagram method allowing you to configure the chart's diagram as a diagram of the XYDiagram type. Then, using the XYDiagram.AxisY property, get access to the Y-axis settings and assign the Millions of USD string value to the Title.Text property of Axis.Title. Finally, set TitleBase.Visible to DefaultBoolean.True to show the Y-axis title.

    Repeat these actions to show the "Year" title for the X-axis.

  • To configure for which numeric values axis labels should be displayed, obtain the NumericScaleOptions object using the AxisBase.NumericScaleOptions property and modify it. For example, to show labels for each integer value, set the NumericScaleOptions.MeasureUnit property value to Ones and ScaleGridOptionsBase.GridOffset to 1.

  • To change the default legend options, use the XtraChartsCollectionExtensions.Default method. In this lesson, this method is used to locate the legend at the top-left corner of the chart (using the Legend.AlignmentHorizontal and Legend.AlignmentVertical properties) and align legend items from left to right (using the Legend.Direction property).

Expanded Result

The application is done and its source code should look like as follows.

Show Me

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

Run the application. The following image demonstrates its appearance.

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