<div class="long-title"><h3>Average temperature in London</h3></div>
<div id="chart-demo">
@(Html.DevExtreme().PolarChart()
.ID("radarChart")
.DataSource(new[] {
new { arg = "January", day = 6, night = 2 },
new { arg = "February", day = 7, night = 2 },
new { arg = "March", day = 10, night = 3 },
new { arg = "April", day = 14, night = 5 },
new { arg = "May", day = 18, night = 8 },
new { arg = "June", day = 21, night = 11 },
new { arg = "July", day = 22, night = 13 },
new { arg = "August", day = 22, night = 13 },
new { arg = "September", day = 19, night = 11 },
new { arg = "October", day = 15, night = 8 },
new { arg = "November", day = 10, night = 5 },
new { arg = "December", day = 7, night = 3 }
})
.Margin(m => m.Top(50).Bottom(50).Left(100))
.Series(s => {
s.Add().ValueField("day").Name("Day").Color("#ba4d51");
s.Add().ValueField("night").Name("Night").Color("#5f8b95");
})
.CommonSeriesSettings(s => s.Type(PolarChartSeriesType.Scatter))
)
<div class="center">
<div>Series Type</div>
@(Html.DevExtreme().SelectBox()
.Width(200)
.DataSource(new[] { "scatter", "line", "area", "bar", "stackedbar" })
.Value("scatter")
.OnValueChanged(@<text>
function(e) {
$("#radarChart").dxPolarChart("instance").option("commonSeriesSettings.type", e.value);
}
</text>)
)
</div>
</div>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult DiscreteData() {
return View();
}
}
}
#chart-demo {
height: 600px;
}
#radarChart {
height: 500px;
}
#chart-demo > .center {
text-align: center;
}
#chart-demo > .center > div,
#chart-demo > .center > .dx-widget {
display: inline-block;
vertical-align: middle;
}
.long-title h3 {
font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}