@model IEnumerable<DevExtreme.MVC.Demos.Models.SampleData.MonthName>
@(Html.DevExtreme().Chart()
.ID("chart")
.DataSource(d => d.OData()
.Url("https://js.devexpress.com/Demos/WidgetsGallery/odata/WeatherItems")
.Expand("DayItems")
)
.DataSourceOptions(o => o
.PostProcess("function(d) { return d[0].DayItems; }")
.Filter(@"[""Id"", ""="", 1]")
)
.Title("Temperature in Barcelona, 2012")
.Size(s => s.Height(420))
.Series(s => s.Add()
.ArgumentField("Number")
.ValueField("Temperature")
.Type(SeriesType.Spline)
)
.Legend(l => l.Visible(false))
.CommonPaneSettings(s => s
.Border(b => b
.Visible(true)
.Width(2)
.Top(false)
.Right(false)
)
)
.Export(e => e.Enabled(true))
.Tooltip(t => t
.Enabled(true)
.CustomizeTooltip(@<text>
function(arg) {
return {
text: arg.valueText + "°C"
};
}
</text>)
)
.ValueAxis(a => a
.Add()
.ValueType(ChartDataType.Numeric)
.Grid(g => g.Opacity(0.2))
.Label(l => l
.CustomizeText(@<text>
function() {
return this.valueText + "°C";
}
</text>)
)
)
.ArgumentAxis(a => a
.Type(AxisScaleType.Discrete)
.Grid(g => g
.Visible(true)
.Opacity(0.5)
)
)
.LoadingIndicator(l => l.Enabled(true))
)
<div class="action">
@(Html.DevExtreme().SelectBox()
.ID("selectbox")
.Width(150)
.DataSource(Model)
.Value(1)
.ValueExpr("Id")
.DisplayExpr("Name")
.OnValueChanged(@<text>
function(data) {
var dataSource = $("#chart").dxChart("getDataSource");
dataSource.filter(["Id", "=", data.value]);
dataSource.load();
}
</text>)
)
<div class="monthlabel">Choose a month:</div>
</div>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult ServerSideDataProcessing() {
return View(SampleData.MonthNames);
}
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public class MonthName {
public int Id { get; set; }
public string Name { get; set; }
}
public partial class SampleData {
public static readonly IEnumerable<MonthName> MonthNames = new[]{
new MonthName {
Id = 1,
Name = "January"
},
new MonthName {
Id = 2,
Name = "February"
},
new MonthName {
Id = 3,
Name = "March"
},
new MonthName {
Id = 4,
Name = "April"
},
new MonthName {
Id = 5,
Name = "May"
},
new MonthName {
Id = 6,
Name = "June"
},
new MonthName {
Id = 7,
Name = "July"
},
new MonthName {
Id = 8,
Name = "August"
},
new MonthName {
Id = 9,
Name = "September"
},
new MonthName {
Id = 10,
Name = "October"
},
new MonthName {
Id = 11,
Name = "November"
},
new MonthName {
Id = 12,
Name = "December"
}
};
}
}
#selectbox {
float: right;
}
.action {
width: 270px;
margin-top: 20px;
}
.monthlabel {
padding-top: 9px;
}