<div id="chart-demo">
@(Html.DevExtreme().Chart()
.ID("spline-chart")
.Palette(VizPalette.Violet)
.CommonSeriesSettings(s => s
.ArgumentField("Year")
.Type(SeriesType.Spline)
)
.CommonAxisSettings(s => s
.Grid(g => g.Visible(true))
)
.Margin(m => m.Bottom(20))
.Series(s => {
s.Add().ValueField("SMP").Name("SMP");
s.Add().ValueField("MMP").Name("MMP");
s.Add().ValueField("Cnstl").Name("Cnstl");
s.Add().ValueField("Cluster").Name("Cluster");
})
.Tooltip(t => t.Enabled(true))
.Legend(l => l
.VerticalAlignment(VerticalEdge.Top)
.HorizontalAlignment(HorizontalAlignment.Right)
)
.ArgumentAxis(a => a
.Label(l => l.Format(Format.Decimal))
.AllowDecimals(false)
.AxisDivisionFactor(60)
)
.Export(e => e.Enabled(true))
.Title("Architecture Share Over Time (Count)")
.DataSource(new[] {
new { Year = 1997, SMP = 263, MMP = 208, Cnstl = 9, Cluster = 1 },
new { Year = 1999, SMP = 169, MMP = 270, Cnstl = 61, Cluster = 7 },
new { Year = 2001, SMP = 57, MMP = 261, Cnstl = 157, Cluster = 45 },
new { Year = 2003, SMP = 0, MMP = 154, Cnstl = 121, Cluster = 211 },
new { Year = 2005, SMP = 0, MMP = 97, Cnstl = 39, Cluster = 382 },
new { Year = 2007, SMP = 0, MMP = 83, Cnstl = 3, Cluster = 437 }
})
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Series Type</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] {
SeriesType.Spline,
SeriesType.StackedSpline,
SeriesType.FullStackedSpline
})
.Value(SeriesType.Spline)
.OnValueChanged(@<text>
function (e) {
$("#spline-chart").dxChart("option", "commonSeriesSettings.type", e.value);
}
</text>)
)
</div>
</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 Spline() {
return View();
}
}
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}