Lesson 2 - Create a Chart Bound to Data

• Jul 08, 2024
• 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
• Step 2. Add a Data Model
• Step 3. Create a Chart
• Step 4. Customize the Chart
• Result

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.

  

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

  C#

  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());
              }
          }
      }
  }
  

  VB.NET

  Imports System.Web.Mvc
  
  Namespace Controllers
      Public Class ChartController
          Inherits Controller
  
          Function Index() As ActionResult
              Using context As New NwindDbContext
                  Dim beveragesCategory As Category
                  beveragesCategory = context.Categories.Where(Function(c) c.CategoryName = "Beverages").Single()
                  Return View(beveragesCategory.Products.ToList())
              End Using
          End Function
      End Class
  End Namespace
  

  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.

  cshtml

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

  vbhtml

  @Code
      ViewBag.Title = "Getting Started Lesson 2"
  End Code
  
  @Html.DevExpress().Chart(Sub(settings)
      ' Specify obligatory properties of the chart control.
      settings.Name = "chart"
  End Sub).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.

  cshtml

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

  vbhtml

  ' ...
  settings.Name = "chart"
  
  ' Add a New series bound to data.
  settings.Series.Add(Sub(s)
      ' Set argument and value data members.
      s.SetDataMembers("ProductName", "UnitPrice")
  End Sub)
  ' ...
  

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.

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.

  cshtml

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

  vbhtml

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

  cshtml

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

  vbhtml

  ' ...
   s.SetDataMembers("ProductName", "UnitPrice")
  
  ' Configure the series appearance.
  s.Views().SideBySideBarSeriesView(Sub(v)
      v.FillStyle.FillMode = FillMode.Solid
      v.ColorEach = True
  End Sub)
  ' ...
  

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

  cshtml

  // ...
  s.SetDataMembers("ProductName", "UnitPrice");
  
  // Change a pattern used to form text in legend items.
  s.LegendTextPattern = "{A}";
  // ...
  

  vbhtml

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

  cshtml

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

  vbhtml

  ' ...
  ' Add a chart title.
  settings.Titles.Add(Sub(t)
      t.Text = "Beverage product prices comparison"
  End Sub)
  ' ...
  

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

  cshtml

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

  vbhtml

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