<div id="chart-demo">
@(Html.DevExtreme().Chart()
.ID("spline-area-chart")
.Palette(VizPalette.HarmonyLight)
.Title("Corporations with Highest Market Value")
.CommonSeriesSettings(s => s
.ArgumentField("Company")
.Type(SeriesType.SplineArea)
)
.ArgumentAxis(a => a.ValueMarginsEnabled(false))
.Margin(m => m.Bottom(20))
.Series(s => {
s.Add().ValueField("Y2005").Name("2005");
s.Add().ValueField("Y2004").Name("2004");
})
.Export(e => e.Enabled(true))
.Legend(l => l
.VerticalAlignment(VerticalEdge.Bottom)
.HorizontalAlignment(HorizontalAlignment.Center)
)
.DataSource(new[] {
new { Company = "ExxonMobil", Y2005 = 377.28, Y2004 = 270.25 },
new { Company = "GeneralElectric", Y2005 = 353.49, Y2004 = 311.43 },
new { Company = "Microsoft", Y2005 = 269.86, Y2004 = 273.32 },
new { Company = "Citigroup", Y2005 = 252.95, Y2004 = 280.50 },
new { Company = "Royal Dutch Shell plc", Y2005 = 197.67, Y2004 = 165.89 },
new { Company = "Procted & Gamble", Y2005 = 184.72, Y2004 = 130.52 }
})
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Series Type</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] {
SeriesType.SplineArea,
SeriesType.StackedSplineArea,
SeriesType.FullStackedSplineArea
})
.Value(SeriesType.SplineArea)
.OnValueChanged(@<text>
function(e) {
$("#spline-area-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 SplineArea() {
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;
}