This demo illustrates a wind rose using the PolarChart component. To specify chart arguments that correspond to cardinal points, the discreteAxisDivisionMode and firstPointOnStartAngle properties of the argumentAxis object are set. In addition, the chart’s onLegendClick event is handled for you to be able to exclude/include certain series to the PolarChart at runtime.
@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 System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
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;
}