Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
<div class="long-title"><h3>Monthly Prices of Aluminium, Nickel and Copper</h3></div>
<div id="chart-demo">
<table class="demo-table" border="1">
<tr>
<th></th>
<th>Aluminium (USD/ton)</th>
<th>Nickel (USD/ton)</th>
<th>Copper (USD/ton)</th>
</tr>
<tr>
<th>2010</th>
<td>
@(Html.DevExtreme().Sparkline()
.ID("alum2010")
.DataSource(d => d.Mvc().LoadAction("GetMonthlyPrices"))
.DataSourceOptions(o => o.Filter(@"[[""Month"", ""<="", ""12""],[""Category"", ""Aluminium""]]"))
.ArgumentField("Month")
.ValueField("Y2010")
.Type(SparklineType.Bar)
.ShowMinMax(true)
.Tooltip(t => t.Format(Format.Currency))
.ElementAttr("class", "sparkline")
)
</td>
<td>
@(Html.DevExtreme().Sparkline()
.ID("nick2010")
.DataSource(d => d.Mvc().LoadAction("GetMonthlyPrices"))
.DataSourceOptions(o => o.Filter(@"[[""Month"", ""<="", ""12""],[""Category"", ""Nickel""]]"))
.ArgumentField("Month")
.ValueField("Y2010")
.Type(SparklineType.Bar)
.ShowMinMax(true)
.ShowFirstLast(false)
.BarPositiveColor("#6babac")
.MinColor("#9ab57e")
.MaxColor("#8076bb")
.Tooltip(t => t.Format(Format.Currency))
.ElementAttr("class", "sparkline")
)
</td>
<td>
@(Html.DevExtreme().Sparkline()
.ID("cop2010")
.DataSource(d => d.Mvc().LoadAction("GetMonthlyPrices"))
.DataSourceOptions(o => o.Filter(@"[[""Month"", ""<="", ""12""],[""Category"", ""Copper""]]"))
.ArgumentField("Month")
.ValueField("Y2010")
.Type(SparklineType.Bar)
.BarPositiveColor("#e55253")
.FirstLastColor("#ebdd8f")
.Tooltip(t => t.Format(Format.Currency))
.ElementAttr("class", "sparkline")
)
</td>
</tr>
<tr>
<th>2011</th>
<td>
@(Html.DevExtreme().Sparkline()
.ID("alum2011")
.DataSource(d => d.Mvc().LoadAction("GetMonthlyPrices"))
.DataSourceOptions(o => o.Filter(@"[[""Month"", ""<="", ""12""],[""Category"", ""Aluminium""]]"))
.ArgumentField("Month")
.ValueField("Y2011")
.Type(SparklineType.Bar)
.ShowMinMax(true)
.Tooltip(t => t.Format(Format.Currency))
.ElementAttr("class", "sparkline")
)
</td>
<td>
@(Html.DevExtreme().Sparkline()
.ID("nick2011")
.DataSource(d => d.Mvc().LoadAction("GetMonthlyPrices"))
.DataSourceOptions(o => o.Filter(@"[[""Month"", ""<="", ""12""],[""Category"", ""Nickel""]]"))
.ArgumentField("Month")
.ValueField("Y2011")
.Type(SparklineType.Bar)
.ShowMinMax(true)
.ShowFirstLast(false)
.BarPositiveColor("#6babac")
.MinColor("#9ab57e")
.MaxColor("#8076bb")
.Tooltip(t => t.Format(Format.Currency))
.ElementAttr("class", "sparkline")
)
</td>
<td>
@(Html.DevExtreme().Sparkline()
.ID("cop2011")
.DataSource(d => d.Mvc().LoadAction("GetMonthlyPrices"))
.DataSourceOptions(o => o.Filter(@"[[""Month"", ""<="", ""12""],[""Category"", ""Copper""]]"))
.ArgumentField("Month")
.ValueField("Y2011")
.Type(SparklineType.Bar)
.BarPositiveColor("#e55253")
.FirstLastColor("#ebdd8f")
.Tooltip(t => t.Format(Format.Currency))
.ElementAttr("class", "sparkline")
)
</td>
</tr>
<tr>
<th>2012</th>
<td>
@(Html.DevExtreme().Sparkline()
.ID("alum2012")
.DataSource(d => d.Mvc().LoadAction("GetMonthlyPrices"))
.DataSourceOptions(o => o.Filter(@"[[""Month"", ""<="", ""12""],[""Category"", ""Aluminium""]]"))
.ArgumentField("Month")
.ValueField("Y2012")
.Type(SparklineType.Bar)
.ShowMinMax(true)
.Tooltip(t => t.Format(Format.Currency))
.ElementAttr("class", "sparkline")
)
</td>
<td>
@(Html.DevExtreme().Sparkline()
.ID("nick2012")
.DataSource(d => d.Mvc().LoadAction("GetMonthlyPrices"))
.DataSourceOptions(o => o.Filter(@"[[""Month"", ""<="", ""12""],[""Category"", ""Nickel""]]"))
.ArgumentField("Month")
.ValueField("Y2012")
.Type(SparklineType.Bar)
.ShowMinMax(true)
.ShowFirstLast(false)
.BarPositiveColor("#6babac")
.MinColor("#9ab57e")
.MaxColor("#8076bb")
.Tooltip(t => t.Format(Format.Currency))
.ElementAttr("class", "sparkline")
)
</td>
<td>
@(Html.DevExtreme().Sparkline()
.ID("cop2012")
.DataSource(d => d.Mvc().LoadAction("GetMonthlyPrices"))
.DataSourceOptions(o => o.Filter(@"[[""Month"", ""<="", ""12""],[""Category"", ""Copper""]]"))
.ArgumentField("Month")
.ValueField("Y2012")
.Type(SparklineType.Bar)
.BarPositiveColor("#e55253")
.FirstLastColor("#ebdd8f")
.Tooltip(t => t.Format(Format.Currency))
.ElementAttr("class", "sparkline")
)
</td>
</tr>
</table>
<div class="action">
<div class="selectBox-label">
Choose a number of months:
</div>
@(Html.DevExtreme().SelectBox()
.ID("choose-months")
.InputAttr("aria-label", "Month")
.DataSource(new[] { 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 })
.Value(12)
.OnValueChanged("selectBox_valueChanged")
)
</div>
</div>
<script>
function updateSparklineFilter(sparkline, count, category) {
dataSource = sparkline.getDataSource();
dataSource.filter(["Month", "<=", count], ["Category", category]);
dataSource.load();
}
function selectBox_valueChanged(data) {
var count = data.value;
$("#alum2010, #alum2011, #alum2012").each(function() {
var sparkline = $(this).dxSparkline("instance");
updateSparklineFilter(sparkline, count, "Aluminium");
});
$("#nick2010, #nick2011, #nick2012").each(function() {
var sparkline = $(this).dxSparkline("instance");
updateSparklineFilter(sparkline, count, "Nickel");
});
$("#cop2010, #cop2011, #cop2012").each(function() {
var sparkline = $(this).dxSparkline("instance");
updateSparklineFilter(sparkline, count, "Copper");
});
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult BarSparklines() {
return View();
}
[HttpGet]
public ActionResult GetMonthlyPrices(DataSourceLoadOptions loadOptions) {
return Content(JsonSerializer.Serialize(DataSourceLoader.Load(SampleData.MonthlyPrices, loadOptions)), "application/json");
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models {
public class MonthlyPrice {
public string Category { get; set; }
public int Month { get; set; }
public int Y2010 { get; set; }
public int Y2011 { get; set; }
public int Y2012 { get; set; }
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<MonthlyPrice> MonthlyPrices = new[] {
new MonthlyPrice { Category = "Oil", Month = 1, Y2010 = 77, Y2011 = 93, Y2012 = 107 },
new MonthlyPrice { Category = "Oil", Month = 2, Y2010 = 72, Y2011 = 101, Y2012 = 112 },
new MonthlyPrice { Category = "Oil", Month = 3, Y2010 = 79, Y2011 = 115, Y2012 = 123 },
new MonthlyPrice { Category = "Oil", Month = 4, Y2010 = 82, Y2011 = 116, Y2012 = 123 },
new MonthlyPrice { Category = "Oil", Month = 5, Y2010 = 86, Y2011 = 124, Y2012 = 116 },
new MonthlyPrice { Category = "Oil", Month = 6, Y2010 = 73, Y2011 = 115, Y2012 = 102 },
new MonthlyPrice { Category = "Oil", Month = 7, Y2010 = 73, Y2011 = 110, Y2012 = 94 },
new MonthlyPrice { Category = "Oil", Month = 8, Y2010 = 77, Y2011 = 117, Y2012 = 105 },
new MonthlyPrice { Category = "Oil", Month = 9, Y2010 = 76, Y2011 = 113, Y2012 = 113 },
new MonthlyPrice { Category = "Oil", Month = 10, Y2010 = 81, Y2011 = 103, Y2012 = 111 },
new MonthlyPrice { Category = "Oil", Month = 11, Y2010 = 83, Y2011 = 110, Y2012 = 107 },
new MonthlyPrice { Category = "Oil", Month = 12, Y2010 = 89, Y2011 = 109, Y2012 = 110 },
new MonthlyPrice { Category = "Gold", Month = 1, Y2010= 1115, Y2011= 1358, Y2012= 1661 },
new MonthlyPrice { Category = "Gold", Month = 2, Y2010= 1099, Y2011= 1375, Y2012= 1742 },
new MonthlyPrice { Category = "Gold", Month = 3, Y2010= 1114, Y2011= 1423, Y2012= 1677 },
new MonthlyPrice { Category = "Gold", Month = 4, Y2010= 1150, Y2011= 1486, Y2012= 1650 },
new MonthlyPrice { Category = "Gold", Month = 5, Y2010= 1205, Y2011= 1511, Y2012= 1589 },
new MonthlyPrice { Category = "Gold", Month = 6, Y2010= 1235, Y2011= 1529, Y2012= 1602 },
new MonthlyPrice { Category = "Gold", Month = 7, Y2010= 1193, Y2011= 1573, Y2012= 1593 },
new MonthlyPrice { Category = "Gold", Month = 8, Y2010= 1220, Y2011= 1765, Y2012= 1634 },
new MonthlyPrice { Category = "Gold", Month = 9, Y2010= 1272, Y2011= 1771, Y2012= 1750 },
new MonthlyPrice { Category = "Gold", Month = 10, Y2010= 1345, Y2011= 1672, Y2012= 1745 },
new MonthlyPrice { Category = "Gold", Month = 11, Y2010= 1370, Y2011= 1741, Y2012= 1720 },
new MonthlyPrice { Category = "Gold", Month = 12, Y2010= 1392, Y2011= 1643, Y2012= 1684 },
new MonthlyPrice { Category = "Silver", Month = 1, Y2010 = 17, Y2011 = 30, Y2012 = 27 },
new MonthlyPrice { Category = "Silver", Month = 2, Y2010 = 28, Y2011 = 28, Y2012 = 33 },
new MonthlyPrice { Category = "Silver", Month = 3, Y2010 = 34, Y2011 = 34, Y2012 = 35 },
new MonthlyPrice { Category = "Silver", Month = 4, Y2010 = 37, Y2011 = 37, Y2012 = 32 },
new MonthlyPrice { Category = "Silver", Month = 5, Y2010 = 47, Y2011 = 47, Y2012 = 30 },
new MonthlyPrice { Category = "Silver", Month = 6, Y2010 = 37, Y2011 = 37, Y2012 = 28 },
new MonthlyPrice { Category = "Silver", Month = 7, Y2010 = 34, Y2011 = 34, Y2012 = 27 },
new MonthlyPrice { Category = "Silver", Month = 8, Y2010 = 40, Y2011 = 40, Y2012 = 27 },
new MonthlyPrice { Category = "Silver", Month = 9, Y2010 = 41, Y2011 = 41, Y2012 = 31 },
new MonthlyPrice { Category = "Silver", Month = 10, Y2010 = 30, Y2011 = 30, Y2012 = 34 },
new MonthlyPrice { Category = "Silver", Month = 11, Y2010 = 34, Y2011 = 34, Y2012 = 31 },
new MonthlyPrice { Category = "Silver", Month = 12, Y2010 = 32, Y2011 = 32, Y2012 = 33 },
new MonthlyPrice { Category = "Copper", Month = 1, Y2010 = 7341, Y2011 = 9585, Y2012 = 7501 },
new MonthlyPrice { Category = "Copper", Month = 2, Y2010 = 7016, Y2011 = 10026, Y2012 = 8470 },
new MonthlyPrice { Category = "Copper", Month = 3, Y2010 = 7202, Y2011 = 9889, Y2012 = 8591 },
new MonthlyPrice { Category = "Copper", Month = 4, Y2010 = 7851, Y2011 = 9460, Y2012 = 8459 },
new MonthlyPrice { Category = "Copper", Month = 5, Y2010 = 7481, Y2011 = 9373, Y2012 = 8320 },
new MonthlyPrice { Category = "Copper", Month = 6, Y2010 = 6532, Y2011 = 9108, Y2012 = 7465 },
new MonthlyPrice { Category = "Copper", Month = 7, Y2010 = 6498, Y2011 = 9295, Y2012 = 7475 },
new MonthlyPrice { Category = "Copper", Month = 8, Y2010 = 7191, Y2011 = 9834, Y2012 = 7430 },
new MonthlyPrice { Category = "Copper", Month = 9, Y2010 = 7596, Y2011 = 9121, Y2012 = 7614 },
new MonthlyPrice { Category = "Copper", Month = 10, Y2010 = 8057, Y2011 = 7125, Y2012 = 8245 },
new MonthlyPrice { Category = "Copper", Month = 11, Y2010 = 8373, Y2011 = 7871, Y2012 = 7727 },
new MonthlyPrice { Category = "Copper", Month = 12, Y2010 = 8636, Y2011 = 7725, Y2012 = 7880 },
new MonthlyPrice { Category = "Nickel", Month = 1, Y2010 = 18974, Y2011 = 24298, Y2012 = 18322 },
new MonthlyPrice { Category = "Nickel", Month = 2, Y2010 = 18162, Y2011 = 27929, Y2012 = 21093 },
new MonthlyPrice { Category = "Nickel", Month = 3, Y2010 = 20535, Y2011 = 28802, Y2012 = 19701 },
new MonthlyPrice { Category = "Nickel", Month = 4, Y2010 = 24562, Y2011 = 26142, Y2012 = 17695 },
new MonthlyPrice { Category = "Nickel", Month = 5, Y2010 = 26131, Y2011 = 26753, Y2012 = 17549 },
new MonthlyPrice { Category = "Nickel", Month = 6, Y2010 = 19278, Y2011 = 23055, Y2012 = 16436 },
new MonthlyPrice { Category = "Nickel", Month = 7, Y2010 = 19475, Y2011 = 22870, Y2012 = 16382 },
new MonthlyPrice { Category = "Nickel", Month = 8, Y2010 = 20701, Y2011 = 24388, Y2012 = 15687 },
new MonthlyPrice { Category = "Nickel", Month = 9, Y2010 = 21266, Y2011 = 21845, Y2012 = 16085 },
new MonthlyPrice { Category = "Nickel", Month = 10, Y2010 = 23358, Y2011 = 18346, Y2012 = 18250 },
new MonthlyPrice { Category = "Nickel", Month = 11, Y2010 = 23150, Y2011 = 18822, Y2012 = 16083 },
new MonthlyPrice { Category = "Nickel", Month = 12, Y2010 = 23282, Y2011 = 17320, Y2012 = 17104 },
new MonthlyPrice { Category = "Palladium", Month = 1, Y2010 = 398, Y2011 = 788, Y2012 = 649 },
new MonthlyPrice { Category = "Palladium", Month = 2, Y2010 = 422, Y2011 = 817, Y2012 = 698 },
new MonthlyPrice { Category = "Palladium", Month = 3, Y2010 = 431, Y2011 = 812, Y2012 = 713 },
new MonthlyPrice { Category = "Palladium", Month = 4, Y2010 = 481, Y2011 = 760, Y2012 = 654 },
new MonthlyPrice { Category = "Palladium", Month = 5, Y2010 = 551, Y2011 = 774, Y2012 = 665 },
new MonthlyPrice { Category = "Palladium", Month = 6, Y2010 = 449, Y2011 = 775, Y2012 = 609 },
new MonthlyPrice { Category = "Palladium", Month = 7, Y2010 = 442, Y2011 = 750, Y2012 = 584 },
new MonthlyPrice { Category = "Palladium", Month = 8, Y2010 = 482, Y2011 = 827, Y2012 = 580 },
new MonthlyPrice { Category = "Palladium", Month = 9, Y2010 = 517, Y2011 = 776, Y2012 = 632 },
new MonthlyPrice { Category = "Palladium", Month = 10, Y2010 = 566, Y2011 = 624, Y2012 = 657 },
new MonthlyPrice { Category = "Palladium", Month = 11, Y2010 = 630, Y2011 = 651, Y2012 = 601 },
new MonthlyPrice { Category = "Palladium", Month = 12, Y2010 = 737, Y2011 = 615, Y2012 = 675 },
new MonthlyPrice { Category = "Aluminium", Month = 1, Y2010 = 2262, Y2011 = 2454, Y2012 = 2262 },
new MonthlyPrice { Category = "Aluminium", Month = 2, Y2010 = 2087, Y2011 = 2537, Y2012 = 2087 },
new MonthlyPrice { Category = "Aluminium", Month = 3, Y2010 = 2238, Y2011 = 2586, Y2012 = 2238 },
new MonthlyPrice { Category = "Aluminium", Month = 4, Y2010 = 2349, Y2011 = 2689, Y2012 = 2349 },
new MonthlyPrice { Category = "Aluminium", Month = 5, Y2010 = 2071, Y2011 = 2591, Y2012 = 2071 },
new MonthlyPrice { Category = "Aluminium", Month = 6, Y2010 = 1957, Y2011 = 2584, Y2012 = 1957 },
new MonthlyPrice { Category = "Aluminium", Month = 7, Y2010 = 2008, Y2011 = 2554, Y2012 = 2008 },
new MonthlyPrice { Category = "Aluminium", Month = 8, Y2010 = 2119, Y2011 = 2413, Y2012 = 2119 },
new MonthlyPrice { Category = "Aluminium", Month = 9, Y2010 = 2199, Y2011 = 2327, Y2012 = 2199 },
new MonthlyPrice { Category = "Aluminium", Month = 10, Y2010 = 2374, Y2011 = 2210, Y2012 = 2374 },
new MonthlyPrice { Category = "Aluminium", Month = 11, Y2010 = 2354, Y2011 = 2102, Y2012 = 2354 },
new MonthlyPrice { Category = "Aluminium", Month = 12, Y2010 = 2369, Y2011 = 2038, Y2012 = 2369 }
};
}
}
#chart-demo {
height: 440px;
}
.demo-table {
width: 100%;
border: 1px solid #c2c2c2;
border-collapse: collapse;
}
.demo-table th,
.demo-table td {
font-weight: 400;
width: 200px;
padding: 25px 10px 5px 10px;
border: 1px solid #c2c2c2;
}
.demo-table th {
padding: 25px 15px 20px 15px;
border: 1px solid #c2c2c2;
}
.demo-table tr:nth-child(2) td {
border-top: 1px solid #c2c2c2;
}
.demo-table td:first-of-type {
border-left: 1px solid #c2c2c2;
}
.demo-table .sparkline {
width: 200px;
height: 30px;
}
.action {
width: 300px;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.action .dx-selectbox {
width: 90px;
}
.long-title h3 {
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
margin-top: 0px;
}