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 v25.2 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 v25.2 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.

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

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

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

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.

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

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.

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

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

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

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

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.