Your search did not match any results.
Charts

Wind Rose

Documentation
This demo illustrates a wind rose using the PolarChart widget. To specify chart arguments that correspond to cardinal points, the discreteAxisDivisionMode and firstPointOnStartAngle options 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.
www.wrcc.dri.edu
@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) .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; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System; using System.Collections.Generic; 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 List<WindRoseItem> WindRoseData = new List<WindRoseItem> { new WindRoseItem { Period = "Sep. 1, 2012 - Oct. 1, 2012", Values = new List<object> { new { Arg = "N", Val1 = 0.7, Val2 = 1.7, Val3 = 1.8, Val4 = 0.8, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "NNE", Val1 = 0.1, Val2 = 0.6, Val3 = 0.1, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "NE", Val1 = 0.3, Val2 = 0.8, Val3 = 0.1, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "ENE", Val1 = 0.3, Val2 = 0.7, Val3 = 0.1, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "E", Val1 = 0.7, Val2 = 3.2, Val3 = 2.5, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "ESE", Val1 = 0.8, Val2 = 1.5, Val3 = 0.3, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "SE", Val1 = 0.3, Val2 = 1.3, Val3 = 0.4, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "SSE", Val1 = 0.1, Val2 = 2.4, Val3 = 0.3, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "S", Val1 = 1.1, Val2 = 4.2, Val3 = 2.2, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "SSW", Val1 = 0.6, Val2 = 3.6, Val3 = 3.5, Val4 = 0.4, Val5 = 0.1, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "SW", Val1 = 0.8, Val2 = 2.5, Val3 = 5, Val4 = 1.3, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "WSW", Val1 = 0.3, Val2 = 2.6, Val3 = 3.2, Val4 = 0.4, Val5 = 0, Val6 = 0, Val7 = 0.1, Val8 = 0 }, new { Arg = "W", Val1 = 0.6, Val2 = 1.7, Val3 = 2.6, Val4 = 0.3, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "WNW", Val1 = 0.7, Val2 = 2.5, Val3 = 3.1, Val4 = 0.3, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "NW", Val1 = 1, Val2 = 3.2, Val3 = 2.6, Val4 = 0.8, Val5 = 0.1, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "NNW", Val1 = 0.6, Val2 = 3.8, Val3 = 4.3, Val4 = 2.2, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 } } }, new WindRoseItem { Period = "Oct. 1, 2012 - Nov. 1, 2012", Values = new List<object> { new { Arg = "N", Val1 = 0.6, Val2 = 1.8, Val3 = 1.9, Val4 = 0.6, Val5 = 0.1, Val6 = 1, Val7 = 0.4, Val8 = 0 }, new { Arg = "NNE", Val1 = 0.3, Val2 = 1.2, Val3 = 1.5, Val4 = 0.4, Val5 = 0.6, Val6 = 0.3, Val7 = 0, Val8 = 0.1 }, new { Arg = "NE", Val1 = 0.3, Val2 = 2.4, Val3 = 2.2, Val4 = 1, Val5 = 0.6, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "ENE", Val1 = 1, Val2 = 2.2, Val3 = 1.2, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "E", Val1 = 0.6, Val2 = 4.9, Val3 = 1.8, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0.1 }, new { Arg = "ESE", Val1 = 0.1, Val2 = 0.6, Val3 = 0.4, Val4 = 0.1, Val5 = 0, Val6 = 0.1, Val7 = 0, Val8 = 0 }, new { Arg = "SE", Val1 = 0.1, Val2 = 0.3, Val3 = 1.2, Val4 = 0.6, Val5 = 0, Val6 = 0.1, Val7 = 0, Val8 = 0 }, new { Arg = "SSE", Val1 = 0.4, Val2 = 0.7, Val3 = 1.3, Val4 = 0.3, Val5 = 0, Val6 = 0.1, Val7 = 0, Val8 = 0 }, new { Arg = "S", Val1 = 0, Val2 = 3.1, Val3 = 3.1, Val4 = 0.7, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "SSW", Val1 = 0.6, Val2 = 1.8, Val3 = 4, Val4 = 1.2, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "SW", Val1 = 0.7, Val2 = 1.8, Val3 = 2.1, Val4 = 1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "WSW", Val1 = 0.3, Val2 = 2.5, Val3 = 4.8, Val4 = 1.2, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "W", Val1 = 0, Val2 = 2.8, Val3 = 5.8, Val4 = 1.5, Val5 = 0.1, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "WNW", Val1 = 0.3, Val2 = 1.5, Val3 = 3.9, Val4 = 1.3, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "NW", Val1 = 0.1, Val2 = 2.7, Val3 = 1.8, Val4 = 1, Val5 = 0.1, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "NNW", Val1 = 0.3, Val2 = 1.5, Val3 = 0.6, Val4 = 1, Val5 = 0.1, Val6 = 0, Val7 = 0, Val8 = 0 } } }, new WindRoseItem { Period = "Nov. 1, 2012 - Deс. 1, 2012", Values = new List<object> { new { Arg = "N", Val1 = 0.7, Val2 = 3, Val3 = 7.4, Val4 = 2.3, Val5 = 0.1, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "NNE", Val1 = 0.4, Val2 = 1.6, Val3 = 2.3, Val4 = 1, Val5 = 0.1, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "NE", Val1 = 0.5, Val2 = 3.4, Val3 = 7.8, Val4 = 1.8, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "ENE", Val1 = 0.3, Val2 = 4.1, Val3 = 1.6, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "E", Val1 = 1.2, Val2 = 1.8, Val3 = 0.4, 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 = 0.7, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "S", Val1 = 0.4, Val2 = 0.8, Val3 = 1.2, Val4 = 0.4, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "SSW", Val1 = 0.4, Val2 = 1.5, Val3 = 0.1, Val4 = 0.1, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "SW", Val1 = 0.8, Val2 = 0.1, Val3 = 1.2, Val4 = 0, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "WSW", Val1 = 0, Val2 = 1.5, Val3 = 2.2, Val4 = 0.7, Val5 = 0, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "W", Val1 = 0.3, Val2 = 1, Val3 = 6.3, Val4 = 2.7, Val5 = 0.4, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "WNW", Val1 = 0.3, Val2 = 1.2, Val3 = 2.7, Val4 = 1.6, Val5 = 0.8, Val6 = 0, Val7 = 0, Val8 = 0 }, new { Arg = "NW", Val1 = 0.3, Val2 = 0.7, Val3 = 4.8, Val4 = 2, Val5 = 0.3, Val6 = 0.1, Val7 = 0, Val8 = 0 }, new { Arg = "NNW", Val1 = 0.1, Val2 = 2.5, Val3 = 2.2, Val4 = 2.3, Val5 = 0.7, Val6 = 0.1, Val7 = 0, Val8 = 0 } } } }; } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class WindRoseItem { public string Period { get; set; } public List<object> Values { get; set; } } }
#chart-demo { height: 600px; width: 100%; } #radarChart { height: 500px; } #chart-demo > .center { text-align: center; } #chart-demo > .center > div, #chart-demo > .center > .dx-widget { display: inline-block; vertical-align: middle; }