Skip to main content
BuyLog In
ASP.NET MVC Extensions
Search in…
Docs > Components > Charting > Getting Started > Lesson 2 - Create a Chart Bound to Data
All docs
V24.1
ASP.NET MVC Extensions
Prerequisites
Supported Browsers
What's Installed
Get Started
Upgrade to a New Version
Common Concepts
Components
Card View
Charting
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
Data and Image Navigation
Data Editors
Diagram
Docking and Popups
File Management
Gantt
Grid View
HTML Editor
Multi-Use Site Extensions
Pivot Grid
Reporting
Rich Text Editor
Scheduler
Site Navigation and Layout
Spell Checker
Spreadsheet
Tree List
Vertical Grid
Query Builder
Security Considerations
Redistribution and Deployment
Troubleshooting
Get More Help
.NET Framework API Reference
Client API Reference
Download CHM

Lesson 2 - Create a Chart Bound to Data

  • 6 minutes to read

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.

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.

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.

    Lesson2_AddModelMenu

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

    Lesson2_AddNewItemDialog

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

    Lesson1_EntityDataModelWizard_Step1

  • 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….

    Lesson2_EntityDataModelWizard_Step2

  • 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 24.1\Components\Data folder.

    Lesson2_SelectDbDialog

    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.

    Lesson2_CopyQuestion

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

    Lesson2_EntityDataModelWizard_Step3

  • Add the following code to the ChartController class definition.

    using GettingStarted2.Models;
using System.Linq;
using System.Web.Mvc;

namespace GettingStarted2.Controllers {
    public class ChartController : Controller {
        public ActionResult Index() {
            using(var context = new NwindDbContext()) {
                Category beveragesCategory = context.Categories
                        .Where(c => c.CategoryName == "Beverages")
                        .Single();
                return View(beveragesCategory.Products.ToList());
            }
        }
    }
}

    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.

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.

    @{
    ViewBag.Title = "Getting Started Lesson 2";
}

@Html.DevExpress().Chart(settings => {
    // Specify obligatory properties of the chart control.
    settings.Name = "chart";
}).Bind(Model).GetHtml()

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

    // ...
settings.Name = "chart";

// Add a new series bound to data.
settings.Series.Add(s => {
    // Set argument and value data members.
    s.SetDataMembers("ProductName", "UnitPrice");
});
// ...

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

Lesson2_Step3_Result

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

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

    // ...
settings.Name = "chart";

// Configure the chart appearance.
settings.PaletteName = "Office 2013";
settings.Width = 640;
settings.Height = 360;
// ...

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

    // ...
s.SetDataMembers("ProductName", "UnitPrice");

// Configure the series appearance.
s.Views().SideBySideBarSeriesView(v => {
    v.FillStyle.FillMode = FillMode.Solid;
    v.ColorEach = true;
});
// ...

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

    // ...
s.SetDataMembers("ProductName", "UnitPrice");

// Change a pattern used to form text in legend items.
s.LegendTextPattern = "{A}";
// ...

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

    // ...
// Add a chart title.
settings.Titles.Add(t => {
    t.Text = "Beverage product prices comparison";
})
// ...

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

    // ...
//Configure the crosshair cursor options. 
settings.CrosshairOptions.ShowArgumentLabels = true;
settings.CrosshairOptions.ShowValueLabels = true;
settings.CrosshairOptions.ShowValueLine = true;
// ...

Result

The application is done and you can see its source code at the following link:

View Example: Getting started lesson 2 - create a chart bound to data

Run the application. The following image demonstrates its appearance.

Lesson2_Result