@model IEnumerable<DevExtreme.MVC.Demos.Models.DiscreteScaleTemperature>
@{
var maxDay = Model.First(d => d.DayT == Model.Max(dd => dd.DayT));
var minNight = Model.First(d => d.NightT == Model.Min(dn => dn.NightT));
}
@(Html.DevExtreme().PolarChart()
.ID("radarChart")
.DataSource(Model)
.CommonSeriesSettings(s => s.Type(PolarChartSeriesType.Bar).ArgumentField("Date").Opacity(0.75))
.Series(s => {
s.Add().ValueField("DayT").Name("Day").Color("#fdff5e");
s.Add().ValueField("NightT").Name("Night").Color("#0f3b59");
})
.CommonAnnotationSettings(ca => ca.Type(AnnotationType.Text).Opacity(0.7).ArrowLength(0))
.Annotations(a => {
a.Add().Text("WINTER").Angle(45).Radius(180);
a.Add().Text("SPRING").Angle(135).Radius(180);
a.Add().Text("SUMMER").Angle(225).Radius(180);
a.Add().Text("FALL").Angle(315).Radius(180);
a.Add()
.Argument(maxDay.Date)
.Series("Day")
.Text(String.Format("Highest temperature: {0} °C", maxDay.DayT))
.Opacity(1)
.OffsetX(105)
.PaddingTopBottom(15)
.PaddingLeftRight(15);
a.Add()
.Argument(minNight.Date)
.Series("Night")
.Text(String.Format("Lowest temperature: {0} °C", minNight.NightT))
.Opacity(1)
.OffsetX(105)
.PaddingTopBottom(15)
.PaddingLeftRight(15);
})
.ArgumentAxis(a => {
a.Strips(st => {
st.Add().StartValue("December").EndValue("February").Color("#0076d1");
st.Add().StartValue("March").EndValue("May").Color("#3ca3b0");
st.Add().StartValue("June").EndValue("August").Color("#3fbc1e");
st.Add().StartValue("September").EndValue("November").Color("#f0bb00");
});
})
.Legend(l => l
.HorizontalAlignment(HorizontalAlignment.Center)
.VerticalAlignment(VerticalEdge.Bottom)
)
.Title("Average temperature in London")
)
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 PolarChartAnnotations() {
return View(SampleData.DiscreteScaleTemperatures);
}
}
}
using System;
namespace DevExtreme.MVC.Demos.Models {
public class DiscreteScaleTemperature {
public string Date { get; set; }
public double DayT { get; set; }
public double NightT { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<DiscreteScaleTemperature> DiscreteScaleTemperatures = new[] {
new DiscreteScaleTemperature { Date = "December", DayT = 7, NightT = 3 },
new DiscreteScaleTemperature { Date = "January", DayT = 6, NightT = 2 },
new DiscreteScaleTemperature { Date = "February", DayT = 7, NightT = 3 },
new DiscreteScaleTemperature { Date = "March", DayT = 10, NightT = 3 },
new DiscreteScaleTemperature { Date = "April", DayT = 14, NightT = 5 },
new DiscreteScaleTemperature { Date = "May", DayT = 18, NightT = 8 },
new DiscreteScaleTemperature { Date = "June", DayT = 21, NightT = 11 },
new DiscreteScaleTemperature { Date = "July", DayT = 22, NightT = 13 },
new DiscreteScaleTemperature { Date = "August", DayT = 21, NightT = 13 },
new DiscreteScaleTemperature { Date = "September", DayT = 19, NightT = 11 },
new DiscreteScaleTemperature { Date = "October", DayT = 15, NightT = 8 },
new DiscreteScaleTemperature { Date = "November", DayT = 10, NightT = 4 }
};
}
}
#radarChart {
height: 600px;
}