Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@model IEnumerable<DevExtreme.MVC.Demos.Models.WindRoseItem>
<div id="chart-demo">
@(Html.DevExtreme().PolarChart()
.ID("radarChart")
.Palette(VizPalette.Soft)
.DataSource(Model.First().Values)
.Title("Wind Rose, Philadelphia PA")
.CommonSeriesSettings(s => s.Type(PolarChartSeriesType.Stackedbar))
.Margin(m => m.Bottom(50).Left(100))
.OnLegendClick(@<text>
function(e) {
var series = e.target;
if (series.isVisible()) {
series.hide();
} else {
series.show();
}
}
</text>)
.ArgumentAxis(a => a
.DiscreteAxisDivisionMode(DiscreteAxisDivisionMode.CrossLabels)
.FirstPointOnStartAngle(true))
.ValueAxis(a => a.ValueMarginsEnabled(false))
.Export(e => e.Enabled(true))
.Series(s => {
s.Add().ValueField("Val1").Name("1.3-4 m/s").ArgumentField("Arg");
s.Add().ValueField("Val2").Name("4-8 m/s").ArgumentField("Arg");
s.Add().ValueField("Val3").Name("8-13 m/s").ArgumentField("Arg");
s.Add().ValueField("Val4").Name("13-19 m/s").ArgumentField("Arg");
s.Add().ValueField("Val5").Name("19-25 m/s").ArgumentField("Arg");
s.Add().ValueField("Val6").Name("25-32 m/s").ArgumentField("Arg");
s.Add().ValueField("Val7").Name("32-39 m/s").ArgumentField("Arg");
s.Add().ValueField("Val8").Name("39-47 m/s").ArgumentField("Arg");
})
)
<center>
@(Html.DevExtreme().SelectBox()
.Width(300)
.DataSource(Model)
.InputAttr("aria-label", "Period")
.Value(Model.First().Period)
.ValueExpr("Period")
.DisplayExpr("Period")
.OnValueChanged(@<text>
function(e) {
$("#radarChart").dxPolarChart("instance").option("dataSource", e.component.option("selectedItem").Values);
}
</text>)
)
</center>
</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 WindRose() {
return View(SampleData.WindRoseData);
}
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<WindRoseItem> WindRoseData = new[] {
new WindRoseItem {
Period = "Sep. 1, 2012 - Oct. 1, 2012",
Values = new object[] {
new { Arg = "N", Val1 = 0.7, Val2 = 1.7, Val3 = 2, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "NNE", Val1 = 0.1, Val2 = 0.6, Val3 = 0, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "NE", Val1 = 0.3, Val2 = 0.8, Val3 = 0, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "ENE", Val1 = 0.3, Val2 = 0.7, Val3 = 0, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "E", Val1 = 0.7, Val2 = 3.2, Val3 = 3, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "ESE", Val1 = 0.8, Val2 = 1.5, Val3 = 0, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "SE", Val1 = 0.3, Val2 = 1.3, Val3 = 0, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "SSE", Val1 = 0.1, Val2 = 2.4, Val3 = 0, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "S", Val1 = 1.1, Val2 = 4.2, Val3 = 2, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "SSW", Val1 = 0.6, Val2 = 3.6, Val3 = 3, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "SW", Val1 = 0.8, Val2 = 2.5, Val3 = 5, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "WSW", Val1 = 0.3, Val2 = 2.6, Val3 = 3, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "W", Val1 = 0.6, Val2 = 1.7, Val3 = 3, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "WNW", Val1 = 0.7, Val2 = 2.5, Val3 = 3, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "NW", Val1 = 1, Val2 = 3.2, Val3 = 3, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "NNW", Val1 = 0.6, Val2 = 3.8, Val3 = 4, Val4 = 2, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }
}
},
new WindRoseItem {
Period = "Oct. 1, 2012 - Nov. 1, 2012",
Values = new object[] {
new { Arg = "N", Val1 = 0.6, Val2 = 1.8, Val3 = 2, Val4 = 1, Val5 = 0, Val6 = 1, Val7 = 0, Val8 = 0 },
new { Arg = "NNE", Val1 = 0.3, Val2 = 1.2, Val3 = 1, Val4 = 0, Val5 = 1, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "NE", Val1 = 0.3, Val2 = 2.4, Val3 = 2, Val4 = 1, Val5 = 1, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "ENE", Val1 = 1, Val2 = 2.2, Val3 = 1, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "E", Val1 = 0.6, Val2 = 4.9, Val3 = 2, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "ESE", Val1 = 0.1, Val2 = 0.6, Val3 = 0, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "SE", Val1 = 0.1, Val2 = 0.3, Val3 = 1, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "SSE", Val1 = 0.4, Val2 = 0.7, Val3 = 1, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "S", Val1 = 0, Val2 = 3.1, Val3 = 3, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "SSW", Val1 = 0.6, Val2 = 1.8, Val3 = 4, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "SW", Val1 = 0.7, Val2 = 1.8, Val3 = 2, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "WSW", Val1 = 0.3, Val2 = 2.5, Val3 = 5, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "W", Val1 = 0, Val2 = 2.8, Val3 = 6, Val4 = 2, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "WNW", Val1 = 0.3, Val2 = 1.5, Val3 = 4, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "NW", Val1 = 0.1, Val2 = 2.7, Val3 = 2, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "NNW", Val1 = 0.3, Val2 = 1.5, Val3 = 1, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }
}
},
new WindRoseItem {
Period = "Nov. 1, 2012 - Dec. 1, 2012",
Values = new object[] {
new { Arg = "N", Val1 = 0.7, Val2 = 3, Val3 = 8, Val4 = 2, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "NNE", Val1 = 0.4, Val2 = 1.6, Val3 = 2, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "NE", Val1 = 0.5, Val2 = 3.4, Val3 = 8, Val4 = 2, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "ENE", Val1 = 0.3, Val2 = 4.1, Val3 = 2, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "E", Val1 = 1.2, Val2 = 1.8, Val3 = 0, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "ESE", Val1 = 0.7, Val2 = 0.3, Val3 = 0, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "SE", Val1 = 0.1, Val2 = 0.3, Val3 = 0, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "SSE", Val1 = 0.3, Val2 = 0.4, Val3 = 1, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "S", Val1 = 0.4, Val2 = 0.8, Val3 = 1, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "SSW", Val1 = 0.4, Val2 = 1.5, Val3 = 0, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "SW", Val1 = 0.8, Val2 = 0.1, Val3 = 1, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "WSW", Val1 = 0, Val2 = 1.5, Val3 = 2, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "W", Val1 = 0.3, Val2 = 1, Val3 = 6, Val4 = 3, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "WNW", Val1 = 0.3, Val2 = 1.2, Val3 = 3, Val4 = 1, Val5 = 1, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "NW", Val1 = 0.3, Val2 = 0.7, Val3 = 5, Val4 = 2, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 },
new { Arg = "NNW", Val1 = 0.1, Val2 = 2.5, Val3 = 2, Val4 = 2, Val5 = 1, Val6 = 0, Val7 = 0, Val8 = 0 }
}
}
};
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models {
public class WindRoseItem {
public string Period { get; set; }
public IEnumerable<object> Values { get; set; }
}
}
#chart-demo {
height: 600px;
}
#radarChart {
height: 500px;
}
#chart-demo > .center {
text-align: center;
}
#chart-demo > .center > .dx-widget {
display: inline-block;
vertical-align: middle;
}