This demo illustrates the flexibility of the standard bar series type. To help compare values across different categories, rectangular bars are positioned side-by-side.
@(Html.DevExtreme().Chart()
.ID("chart")
.CommonSeriesSettings(s => s
.ArgumentField("State")
.Type(SeriesType.Bar)
.HoverMode(ChartSeriesHoverMode.AllArgumentPoints)
.SelectionMode(ChartSeriesSelectionMode.AllArgumentPoints)
.Label(l => l
.Visible(true)
.Format(f => f
.Type(Format.FixedPoint)
.Precision(0)
)
)
)
.Series(s => {
s.Add().ValueField("Year2004").Name("2004");
s.Add().ValueField("Year2001").Name("2001");
s.Add().ValueField("Year1998").Name("1998");
})
.Title("Gross State Product within the Great Lakes Region")
.Legend(l => l
.VerticalAlignment(VerticalEdge.Bottom)
.HorizontalAlignment(HorizontalAlignment.Center)
)
.Export(e => e.Enabled(true))
.OnPointClick(@<text>
function(e) {
e.target.select();
}
</text>)
.DataSource(new[] {
new { State = "Illinois", Year1998 = 423.721, Year2001 = 476.851, Year2004 = 528.904 },
new { State = "Indiana", Year1998 = 178.719, Year2001 = 195.769, Year2004 = 227.271 },
new { State = "Michigan", Year1998 = 308.845, Year2001 = 335.793, Year2004 = 372.576 },
new { State = "Ohio", Year1998 = 348.555, Year2001 = 374.771, Year2004 = 418.258 },
new { State = "Wisconsin", Year1998 = 160.274, Year2001 = 182.373, Year2004 = 211.727 }
})
)
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 SideBySideBar() {
return View();
}
}
}