@(Html.DevExtreme().Chart()
.ID("chart")
.Palette(VizPalette.Violet)
.CommonSeriesSettings(s => s
.ArgumentField("Country")
.ValueField("Oil")
.Type(SeriesType.Bar)
)
.SeriesTemplate(t => t
.NameField("Year")
.CustomizeSeries(@<text>
function(valueFromNameField) {
return valueFromNameField === 2009 ? { type: "line", label: { visible: true }, color: "#ff3f7a" } : {};
}
</text>)
)
.Title(t => t
.Text("Oil Production")
.Subtitle(s => s.Text("(in millions tonnes)"))
)
.Export(e => e.Enabled(true))
.Legend(l => l
.VerticalAlignment(VerticalEdge.Bottom)
.HorizontalAlignment(HorizontalAlignment.Center)
)
.DataSource(Model)
)
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 SeriesTemplates() {
return View(SampleData.OilProductionData);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class OilProduction {
public int Year { get; set; }
public string Country { get; set; }
public double Oil { get; set; }
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<OilProduction> OilProductionData = new[] {
new OilProduction { Year = 1970, Country = "Saudi Arabia", Oil = 186.7 },
new OilProduction { Year = 1970, Country = "USA", Oil = 557.8 },
new OilProduction { Year = 1970, Country = "Iran", Oil = 207.3 },
new OilProduction { Year = 1970, Country = "Mexico", Oil = 24.7 },
new OilProduction { Year = 1980, Country = "Saudi Arabia", Oil = 480.4 },
new OilProduction { Year = 1980, Country = "USA", Oil = 423.2 },
new OilProduction { Year = 1980, Country = "Iran", Oil = 74.3 },
new OilProduction { Year = 1980, Country = "Mexico", Oil = 109.2 },
new OilProduction { Year = 1990, Country = "Saudi Arabia", Oil = 319.6 },
new OilProduction { Year = 1990, Country = "USA", Oil = 340.1 },
new OilProduction { Year = 1990, Country = "Iran", Oil = 183.3 },
new OilProduction { Year = 1990, Country = "Mexico", Oil = 145.3 },
new OilProduction { Year = 1990, Country = "Russia", Oil = 499.6 },
new OilProduction { Year = 2000, Country = "Saudi Arabia", Oil = 465 },
new OilProduction { Year = 2000, Country = "USA", Oil = 282.9 },
new OilProduction { Year = 2000, Country = "Iran", Oil = 195.5 },
new OilProduction { Year = 2000, Country = "Mexico", Oil = 148.3 },
new OilProduction { Year = 2000, Country = "Russia", Oil = 375.3 },
new OilProduction { Year = 2008, Country = "Saudi Arabia", Oil = 549.7 },
new OilProduction { Year = 2008, Country = "USA", Oil = 280 },
new OilProduction { Year = 2008, Country = "Iran", Oil = 214.9 },
new OilProduction { Year = 2008, Country = "Mexico", Oil = 132.1 },
new OilProduction { Year = 2008, Country = "Russia", Oil = 503.2 },
new OilProduction { Year = 2009, Country = "Saudi Arabia", Oil = 428.4 },
new OilProduction { Year = 2009, Country = "USA", Oil = 298.9 },
new OilProduction { Year = 2009, Country = "Iran", Oil = 217.2 },
new OilProduction { Year = 2009, Country = "Mexico", Oil = 121.6 },
new OilProduction { Year = 2009, Country = "Russia", Oil = 493.1 }
};
}
}
#chart {
height: 440px;
width: 100%;
}