Lesson 1 - Create a Simple Unbound Chart

  • 8 minutes to read

This lesson goes over the steps needed to build a chart in Visual Studio with manually created and populated series.

To create a simple unbound chart, do the following.

Step 1. Create a New Project

In this step, a new MVC application will be created using the DevExpress v20.2 Template Gallery. Also, a Controller and a View will be added to the application.

  • Run the MS Visual Studio 2012, 2013, 2015, 2017 or 2019.
  • Open the New Project dialog. To do this, select the File | New | Project... menu item. In the invoked dialog, select the Web template group, then select the DevExpress v20.2 Template Gallery item. Specify the name of a project and click OK.

    Lesson1_NewProject

  • In the invoked DevExpress Template Gallery, select the ASP.NET MVC | Empty Web Application and click the Create Project button.

    Lesson1_TemplateGallery

    NOTE

    If you create a new project using another template, refer to the Integration into an ASP.NET MVC Project topic group to learn how to integrate the DevExpress ASP.NET MVC Extensions to the project.

  • In the invoked Project Wizard, in the Choose Layout tab, select the empty layout.

    GettingSterted_ProjectWizard_Layout

  • Then, switch to Suites and specify the used suites as shown on an image below.

    GettingSterted_ProjectWizard_Suites

    Click Create Project to finish project creation.

  • Add a controller to manage a View. To do this, locate and right-click the Controllers folder in the Solution Explorer. In the invoked menu, locate the Add item and in the invoked submenu, select the Controller... item.

    Lesson1_AddControllerMenu

    In the invoked Add Scaffold dialog, select the MVC 5 Controller - Empty controller template and click Add.

    Lesson1_AddController

    After that, the Add Controller dialog appears. In the dialog, set the controller name to ChartController and click Add.

    Lesson1_ControllerName

  • Add a View that will contain a Chart. To do this, locate and right-click the Views | Chart folder in the Solution Explorer. In the invoked menu, locate the Add item and in the invoked submenu select the View... item.

    Lesson1_AddViewMenu

    In the invoked Add View dialog, set the View name to Index, uncheck the Use a layout page: check box and click Add.

    Lesson1_AddView

All preparatory work is complete. In the next step, the chart will be added to the View.

Step 2. Add a Chart to the View

  • Add a Chart to the View, add a series to the Chart and populate the series with series points. To do this, write the following code in the Index View.

    @{
        ViewBag.Title = "Getting Started Lesson 1";
    }
    
    @Html.DevExpress().Chart(settings => {
        // Specify obligatory properties of the chart control.
        settings.Name = "chart";
    
        // Add a new series to the series collection.
        settings.Series.Add(s => {
            s.Name = "1998";
            // Manually populate series with points.
            s.Points.AddPoint("Illinois", 423.721);
            s.Points.AddPoint("Indiana", 178.719);
            s.Points.AddPoint("Michigan", 308.845);
            s.Points.AddPoint("Ohio", 348.555);
            s.Points.AddPoint("Wisconsin", 160.274);
        });
    }).GetHtml()
    

    In the code snippet represented above, the HtmlHelperExtension.DevExpress method was called to get access to the DevExpress ASP.NET MVC Extensions. Then, a ChartControlExtension object was created using the ExtensionsFactory.Chart method with the specified ChartControlSettings object. Finally, the ExtensionBase.GetHtml method was called to insert the HTML code representing the chart.

    The SettingsBase.Name property of the ChartControlSettings was set to chart. Note that this property must be specified. Then, a Series object was created and its Series.Points collection was populated with several SeriesPoint objects. Finally, the series was added to the ChartControlSettings.Series collection.

  • Add two series with the 2001 and 2004 Series.Name property values and populate them with the following arguments and values.

    Argument 2001 series value 2004 series value
    Illinois 476.851 528.904
    Indiana 195.769 227.271
    Michigan 335.793 372.576
    Ohio 374.771 418.258
    Wisconsin 182.373 211.727

If you run the web application, it should look as follows.

Lesson1_Step2_Result

The chart represents the required data. In the next step, the appearance of the chart will be improved.

Step 3. Customize the Chart

In this step, the chart appearance and palette is specified, the chart size is increased to improve its legibility, and chart and axis titles are added. Also, the series view is configured.

  • To customize chart appearance, specify the ChartControlSettings.AppearanceName property, and to change the chart palette, specify the ChartControlSettings.PaletteName property. The following code demonstrates how to do this.

    // ...
    settings.AppearanceName = "Gray";
    settings.PaletteName = "Office 2013";
    // ...
    
  • To customize chart size, use the ChartControlSettings.Width and ChartControlSettings.Height properties.

    // ...
    settings.Width = 640;
    settings.Height = 360;
    // ...
    
  • To configure the series view, cast the SeriesBase.View to the SideBySideBarSeriesView to obtain access to specific options of the view type. Customize the BarSeriesView.FillStyle property. Set the FillStyle2D.FillMode to the FillMode.Solid.

    // ...
    settings.Series.Add(s => {
        s.Name = "1998";
        // Configure the series appearance.
        s.Views().SideBySideBarSeriesView(v => {
            v.FillStyle.FillMode = FillMode.Solid;
        });
    // ...
    
  • To add a chart title, create a new ChartTitle object and add it to the ChartControlSettings.Titles collection.

    // ...
    // Add title to the chart.
    settings.Titles.Add(t => {
        t.Text = "Great Lakes gross state product";
    });
    // ...
    
  • To specify an axis title, cast the ChartControlSettings.Diagram to the XYDiagram and then, using the XYDiagram.AxisY property, get access to the Y-axis settings. After that, assign the Millions of USD string value to the Title.Text property of the Axis.Title. And finally, set the TitleBase.Visible to the DefaultBoolean.True to show the Y-axis title.

    // ...
    // Customize the chart diagram.
    settings.XYDiagram(d => {
        d.AxisY.Title.Text = "Millions of USD";
        d.AxisY.Title.Visibility = DefaultBoolean.True;
    });
    // ...
    

Result

The following code should be obtained as a result of this lesson.

<%@ Application Codebehind="Global.asax.cs" Inherits="GettingStarted1.MvcApplication" Language="C#" %>

Run the application. The following image demonstrates its appearance.

Lesson1_Result