Lesson 1 - Create a Simple Unbound Chart

• Dec 10, 2023
• 6 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
• Step 2. Add a Chart to the View
• Step 3. Customize the Chart

Step 1. Create a New Project

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

• Run the MS Visual Studio.

• 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 v24.1 Template Gallery item. Specify the name of a project and click OK.

  

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

  

  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.

  

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

  

  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.

  

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

  

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

  

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

  

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

  

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.

  cshtml

  @{
      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()
  

  vbhtml

  @Code
      ViewData("Title") = "Getting Started Lesson 1"
  End Code
  
  @Html.DevExpress().Chart(Sub(settings)
      ' Specify obligatory properties of the chart control.
      settings.Name = "chart"
  
      ' Add a New series to the series collection.
      settings.Series.Add(Sub(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)
      End Sub)
  End Sub).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.

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.

  cshtml

  // ...
  settings.AppearanceName = "Gray";
  settings.PaletteName = "Office 2013";
  // ...
  

  vbhtml

  ' ...
  settings.AppearanceName = "Gray"
  settings.PaletteName = "Office 2013"
  ' ...
  

• To customize chart size, use the ChartControlSettings.Width and ChartControlSettings.Height properties.

  cshtml

  // ...
  settings.Width = 640;
  settings.Height = 360;
  // ...
  

  vbhtml

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

  cshtml

  // ...
  settings.Series.Add(s => {
      s.Name = "1998";
      // Configure the series appearance.
      s.Views().SideBySideBarSeriesView(v => {
          v.FillStyle.FillMode = FillMode.Solid;
      });
  // ...
  

  vbhtml

  ' ...
  settings.Series.Add(Sub(s)
      s.Name = "1998"
      ' Configure the series appearance.
      s.Views().SideBySideBarSeriesView(Sub(v)
          v.FillStyle.FillMode = FillMode.Solid
      End Sub)' ...
  

• To add a chart title, create a new ChartTitle object and add it to the ChartControlSettings.Titles collection.

  cshtml

  // ...
  // Add title to the chart.
  settings.Titles.Add(t => {
      t.Text = "Great Lakes gross state product";
  });
  // ...
  

  vbhtml

  ' ...
  ' Add title to the chart.
  settings.Titles.Add(Sub(t)
      t.Text = "Great Lakes gross state product"
  End Sub)
  ' ...
  

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

  cshtml

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

  vbhtml

  ' ...
  ' Customize the chart diagram.
  settings.XYDiagram(Sub(d)
      d.AxisY.Title.Text = "Millions of USD"
      d.AxisY.Title.Visibility = DefaultBoolean.True
  End Sub)
  ' ...
  

Result

You can see the result of this lesson in the following example:

View Example: Getting started lesson 1 - create a simple unbound chart

The following image demonstrates its appearance.