Charting

Feb 02, 2023
3 minutes to read

Chart is a visual extension used to display assorted data in a graphical representation. It visualizes the Series of Points, using one of the available View Types. Note that a chart can draw multiple series using different View Types at the same time.

To learn more about Chart and see it in action, refer to its online demos.

Implementation Details

Chart is represented by the ChartControlExtension class. Its instance can be accessed via the ExtensionsFactory.Chart helper method, which is used to add a Chart extension to a view. This method’s parameter provides access to the Chart ‘s settings implemented by the ChartControlSettings class, allowing you to fully customize the extension.

Chart ‘s client counterpart is represented by the MVCxClientChart object.

Declaration

Chart can be added to a view in the following manner.

C# (Model)
VB.NET (Model)

csharp

namespace MyProject.Models {
    public class ChartPoint {
        public int X { get; set; }
        public int Y { get; set; }
    }
}

Namespace MyProject.Models
    Public Class ChartPoint
        Private m_X As Integer
        Private mY As Integer

        Public Property X() As Integer
            Get
                Return mX
            End Get
            Set
                mX = Value
            End Set
        End Property

        Public Property Y() As Integer
            Get
                Return mY
            End Get
            Set
                mY = Value
            End Set
        End Property        
    End Class
End Namespace

C# (Controller)
VB.NET (Controller)

csharp

using System.Collections.Generic;
using System.Web.Mvc;
using MyProject.Models;

namespace MyProject.Controllers {
    public class HomeController : Controller {
        public ActionResult Index() {
            return View(GetPoints());
        }

        private List<ChartPoint> GetPoints() {
            var m = new List<ChartPoint>();
            m.Add(new ChartPoint { X = 1, Y = 1 });
            m.Add(new ChartPoint { X = 2, Y = 5 });
            m.Add(new ChartPoint { X = 3, Y = 3 });
            m.Add(new ChartPoint { X = 4, Y = 9 });
            m.Add(new ChartPoint { X = 5, Y = 10 });
            return m;
        }
    }
}

Imports System.Collections.Generic
Imports System.Web.Mvc
Imports MyProject.Models

Namespace MyProject.Controllers
    Public Class HomeController Inherits Controller
        Public Function Index() As ActionResult
            return View(GetPoints())
        End Function

        Private Function GetPoints() As List<ChartPoint>
            Dim m As List<ChartPoint> = New List<ChartPoint>()
            m.Add(New ChartPoint With { .X = 1, .Y = 1 })
            m.Add(New ChartPoint With { .X = 2, .Y = 5 })
            m.Add(New ChartPoint With { .X = 3, .Y = 3 })
            m.Add(New ChartPoint With { .X = 4, .Y = 9 })
            m.Add(New ChartPoint With { .X = 5, .Y = 10 })
            Return m
        End Function
    End Class
End Namespace

Razor (View)

razor

@Html.DevExpress().Chart(settings => {
    settings.Name = "chart";
    settings.Series.Add(s => {
        s.Name = "My Data";
        s.SetDataMembers("X", "Y");
        s.Views().SplineSeriesView(v =>{ });
    });
}).Bind(Model).GetHtml()

The code result is demonstrated in the image below.