ASP.NET MVC Chart Binding to Data

ShieldChart for ASP.NET MVC provides a flexible data binding model that will fit your business requirements. It supports binding to virtually any data available in your views - from lists of values to properties of your model. Every chart series type exposes the .Data() method used to specify the data for that particular series. The Data method provides a set of overloads for specifying series data from various sources.

Binding to IEnumerable

You can provide series data as an enumerable list of numeric values:

@(Html.ShieldChart()
    .Name("chart")
    .DataSeries(series => series
        .Line()
        .Data(new object[] { 1, 3, 2, 4 })))

Alternatively, you can provide the series data as a set of dynamic objects describing individual data points:

@(Html.ShieldChart()
    .Name("chart")
    .DataSeries(series => series
        .Bar()
        .Data(new object[] 
        { 
            new { x = 1, y = 5 },
            new { x = 2, y = 7, color = "red" },
            new { x = 3, y = 3 }
        })))

Binding to Model Objects

ShieldChart for ASP.NET MVC supports data binding to models in your view. You specify model binding by providing an enumerable collection of strongly typed objects as a parameter to the @Html.ShieldChart() helper method. Then, in your series Data method, you specify the fields from your strongly typed objects that will be used to provide the data for the particular series. Here's a simple example. We have a model class of the form:

public class BrowserUsageStatistics
    {
        public string BrowserName { set; get; }
        public double Percent { set; get; }
    }

and a data repository that will return an Enumerable with the method DataRepository.GetInternetUsageStatistics(). We can bind ShieldChart to this collection using the following code:

@(Html.ShieldChart(DataRepository.GetInternetUsageStatistics())
    .DataSeries(series => series.Area()
        .Data(
            model => model.Year,        //X-value selector
            model => model.Percent)))   //Y-value selector

You can also bind axis category values to model properties and specify only the Y-value in the series:

@(Html.ShieldChart(Shield.Examples.Models.DataRepository.GetInternetUsageStatistics())
    .AxisX(axisX => axisX.CategoricalValues(model => model.Year))
    .DataSeries(series => series.Area()
        .Data(model => model.Percent)))   //Y-value selector only