Lesson 2 - Create a Chart Bound to Data

  • 8 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 20.2\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 its source code should look like the following.

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

@Html.DevExpress().Chart(settings => {
    // Specify the obligatory Name property of the chart.
    settings.Name = "chart";

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

    // Add a new series bound to data.
    settings.Series.Add(s => {
        // Set argument and value data members.
        s.SetDataMembers("ProductName", "UnitPrice");
        // Configure the series appearance.
        s.Views().SideBySideBarSeriesView(v => {
            v.FillStyle.FillMode = FillMode.Solid;
            v.ColorEach = true;
        });
        // Change a pattern used to form text in legend items.
        s.LegendTextPattern = "{A}";
    });

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

    //Configure the crosshair cursor options. 
    settings.CrosshairOptions.ShowArgumentLabels = true;
    settings.CrosshairOptions.ShowValueLabels = true;
    settings.CrosshairOptions.ShowValueLine = true;
}).Bind(Model).GetHtml();

Run the application. The following image demonstrates its appearance.

Lesson2_Result