Skip to main content

Charting

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

namespace MyProject.Models {
    public class ChartPoint {
        public int X { get; set; }
        public int Y { get; set; }
    }
}
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;
        }
    }
}
@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.

ChartExtension - declaraion