@(Html.DevExtreme().Chart()
.ID("chart")
.Palette(VizPalette.Violet)
.Title("Crude Oil Prices in 2005")
.Tooltip(t => t.Enabled(true))
.CommonSeriesSettings(s => s
.ArgumentField("Date")
.Type(SeriesType.RangeBar)
.MinBarSize(2)
)
.Series(s => {
s.Add().RangeValue1Field("AVal1").RangeValue2Field("AVal2").Name("ANS West Coast");
s.Add().RangeValue1Field("TVal1").RangeValue2Field("TVal2").Name("West Texas Intermediate");
})
.ValueAxis(a => a
.Add()
.Title(t => t.Text("$ per barrel"))
)
.ArgumentAxis(a => a.Label(l => l.Format(Format.Month)))
.Export(e => e.Enabled(true))
.Legend(l => l
.VerticalAlignment(VerticalEdge.Bottom)
.HorizontalAlignment(HorizontalAlignment.Center)
)
.DataSource(new[] {
new { Date = new DateTime(2005, 1, 1), AVal1 = 34.33, AVal2 = 43.29, TVal1 = 40.18, TVal2 = 49.91 },
new { Date = new DateTime(2005, 2, 1), AVal1 = 42.24, AVal2 = 47.07, TVal1 = 29.65, TVal2 = 51.75 },
new { Date = new DateTime(2005, 3, 1), AVal1 = 42.93, AVal2 = 52.77, TVal1 = 51.01, TVal2 = 56.72 },
new { Date = new DateTime(2005, 4, 1), AVal1 = 44.24, AVal2 = 54.14, TVal1 = 48.06, TVal2 = 57.27 },
new { Date = new DateTime(2005, 5, 1), AVal1 = 44.47, AVal2 = 49.03, TVal1 = 47.28, TVal2 = 52.07 },
new { Date = new DateTime(2005, 6, 1), AVal1 = 50.55, AVal2 = 57.94, TVal1 = 55.01, TVal2 = 60.54 },
new { Date = new DateTime(2005, 7, 1), AVal1 = 52.79, AVal2 = 58.98, TVal1 = 55.52, TVal2 = 61.28 },
new { Date = new DateTime(2005, 8, 1), AVal1 = 56.49, AVal2 = 67.06, TVal1 = 62.23, TVal2 = 68.94 },
new { Date = new DateTime(2005, 9, 1), AVal1 = 62.77, AVal2 = 66.72, TVal1 = 65.19, TVal2 = 69.47 },
new { Date = new DateTime(2005, 10, 1), AVal1 = 57.52, AVal2 = 63.47, TVal1 = 59.35, TVal2 = 65.47 },
new { Date = new DateTime(2005, 11, 1), AVal1 = 52.92, AVal2 = 59.98, TVal1 = 56.15, TVal2 = 61.78 },
new { Date = new DateTime(2005, 12, 1), AVal1 = 55.22, AVal2 = 55.22, TVal1 = 57.34, TVal2 = 57.37 }
})
)
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 RangeBar() {
return View();
}
}
}
#chart {
height: 440px;
}