Dynamic Series from the DataSource
Documentation
In this example, data for series is provided in a peculiar manner. Each object in the data source represents a point in a single series. To define series in this case, use the seriesTemplate object where you need to specify the data field providing series names and custom settings for a given series. Settings common to all series must be set within the commonSeriesSettings object. Providing data in this manner is useful when the number of points within a single series changes over time.
www.geohive.com
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
@(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.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult SeriesTemplates() {
return View(SampleData.OilProductionData);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.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.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static List<OilProduction> OilProductionData = new List<OilProduction> {
new OilProduction() { Year = 1970, Country = "Saudi Arabia", Oil = 192.2 },
new OilProduction() { Year = 1970, Country = "USA", Oil = 533.5 },
new OilProduction() { Year = 1970, Country = "Iran", Oil = 192.6 },
new OilProduction() { Year = 1970, Country = "Mexico", Oil = 24.2 },
new OilProduction() { Year = 1980, Country = "Saudi Arabia", Oil = 509.8 },
new OilProduction() { Year = 1980, Country = "USA", Oil = 480.2 },
new OilProduction() { Year = 1980, Country = "Iran", Oil = 74.3 },
new OilProduction() { Year = 1980, Country = "Mexico", Oil = 107.2 },
new OilProduction() { Year = 1990, Country = "Saudi Arabia", Oil = 342.6 },
new OilProduction() { Year = 1990, Country = "USA", Oil = 416.6 },
new OilProduction() { Year = 1990, Country = "Iran", Oil = 162.8 },
new OilProduction() { Year = 1990, Country = "Mexico", Oil = 146.3 },
new OilProduction() { Year = 1990, Country = "Russia", Oil = 515.9 },
new OilProduction() { Year = 2000, Country = "Saudi Arabia", Oil = 456.3 },
new OilProduction() { Year = 2000, Country = "USA", Oil = 352.6 },
new OilProduction() { Year = 2000, Country = "Iran", Oil = 191.3 },
new OilProduction() { Year = 2000, Country = "Mexico", Oil = 171.2 },
new OilProduction() { Year = 2000, Country = "Russia", Oil = 323.3 },
new OilProduction() { Year = 2008, Country = "Saudi Arabia", Oil = 515.3 },
new OilProduction() { Year = 2008, Country = "USA", Oil = 304.9 },
new OilProduction() { Year = 2008, Country = "Iran", Oil = 209.9 },
new OilProduction() { Year = 2008, Country = "Mexico", Oil = 157.7 },
new OilProduction() { Year = 2008, Country = "Russia", Oil = 488.5 },
new OilProduction() { Year = 2009, Country = "Saudi Arabia", Oil = 459.5 },
new OilProduction() { Year = 2009, Country = "USA", Oil = 325.3 },
new OilProduction() { Year = 2009, Country = "Iran", Oil = 202.4 },
new OilProduction() { Year = 2009, Country = "Mexico", Oil = 147.5 },
new OilProduction() { Year = 2009, Country = "Russia", Oil = 494.2 }
};
}
}
#chart {
height: 440px;
width: 100%;
}