@(Html.DevExtreme().Chart()
.ID("chart")
.DataSource(new[] {
new { month = "January", avgT = 14.1, avgLowT = 9.1, avgHighT = 19.1, avgH = 70 },
new { month = "February", avgT = 14.7, avgLowT = 9.8, avgHighT = 19.6, avgH = 74 },
new { month = "March", avgT = 15.6, avgLowT = 10.6, avgHighT = 20.4, avgH = 79 },
new { month = "April", avgT = 16.8, avgLowT = 11.9, avgHighT = 21.7, avgH = 80 },
new { month = "May", avgT = 18.2, avgLowT = 13.6, avgHighT = 22.7, avgH = 83 },
new { month = "June", avgT = 20.2, avgLowT = 15.4, avgHighT = 25.0, avgH = 85 },
new { month = "July", avgT = 22.6, avgLowT = 17.3, avgHighT = 27.9, avgH = 86 },
new { month = "August", avgT = 23.0, avgLowT = 17.7, avgHighT = 28.4, avgH = 86 },
new { month = "September", avgT = 22.3, avgLowT = 17.0, avgHighT = 27.7, avgH = 83 },
new { month = "October", avgT = 20.1, avgLowT = 14.8, avgHighT = 25.3, avgH = 79 },
new { month = "November", avgT = 17.2, avgLowT = 11.8, avgHighT = 22.7, avgH = 72 },
new { month = "December", avgT = 14.6, avgLowT = 9.5, avgHighT = 19.7, avgH = 68 }
})
.CommonSeriesSettings(s => s.ArgumentField("month"))
.Panes(p => {
p.Add().Name("top");
p.Add().Name("bottom");
})
.DefaultPane("bottom")
.Series(s => {
s.Add()
.Pane("top")
.ValueField("avgT")
.Name("Average Temperature, °C")
.ValueErrorBar(b => b
.LowValueField("avgLowT")
.HighValueField("avgHighT")
.LineWidth(1)
.Opacity(0.8));
s.Add()
.Pane("bottom")
.ValueField("avgH")
.Type(SeriesType.Bar)
.Name("Average Humidity, %")
.ValueErrorBar(b => b
.Type(ValueErrorBarType.Fixed)
.Value(3)
.LineWidth(1));
})
.ArgumentAxis(a => a
.Label(l => l
.DisplayMode(ChartLabelDisplayMode.Stagger)))
.Export(e => e.Enabled(true))
.ValueAxis(a => {
a.Add()
.Pane("top")
.Grid(g => g.Visible(true))
.Title(t => t.Text("Temperature, °C"));
a.Add()
.TickInterval(50)
.Pane("bottom")
.Grid(g => g.Visible(true))
.Title(t => t.Text("Humidity, %"));
})
.Tooltip(t => t
.Enabled(true)
.CustomizeTooltip(@<text>
function (arg) {
return {
text: arg.seriesName + ": " + arg.value + " ( range: " + arg.lowErrorValue + " - " + arg.highErrorValue + ")"
};
}
</text>))
.Legend(l => l
.VerticalAlignment(VerticalEdge.Bottom)
.HorizontalAlignment(HorizontalAlignment.Center))
.Title(t => t.Text("Weather in Los Angeles, California"))
)
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult ErrorBars() {
return View();
}
}
}
#chart {
height: 440px;
}