Backend API
@model IEnumerable<DevExtreme.MVC.Demos.Models.MonthlyPrice>
<div class="long-title"><h3>Monthly Prices of Copper, Nickel and Palladium</h3></div>
<div id="chart-demo">
<table class="demo-table" border="1">
<tr>
<th><div class="dx-screen-reader-only">Year</div></th>
<th>Copper (USD/ton)</th>
<th>Nickel (USD/ton)</th>
<th>Palladium (USD/troy ounce)</th>
</tr>
<tr>
<th>2021</th>
<td>
@(Html.DevExtreme().Sparkline()
.DataSource(Model.Where(i => i.Category == "Copper"))
.ArgumentField("Month")
.ValueField("Y2021")
.Type(SparklineType.WinLoss)
.ShowMinMax(true)
.WinlossThreshold(8000)
.Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
.ElementAttr("class", "sparkline")
)
</td>
<td>
@(Html.DevExtreme().Sparkline()
.DataSource(Model.Where(i => i.Category == "Nickel"))
.ArgumentField("Month")
.ValueField("Y2021")
.WinColor("#6babac")
.LossColor("#8076bb")
.WinlossThreshold(19000)
.Type(SparklineType.WinLoss)
.ShowMinMax(true)
.ShowFirstLast(false)
.Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
.ElementAttr("class", "sparkline")
)
</td>
<td>
@(Html.DevExtreme().Sparkline()
.DataSource(Model.Where(i => i.Category == "Palladium"))
.ArgumentField("Month")
.ValueField("Y2021")
.WinlossThreshold(2000)
.WinColor("#7e4452")
.LossColor("#ebdd8f")
.FirstLastColor("#e55253")
.Type(SparklineType.WinLoss)
.Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
.ElementAttr("class", "sparkline")
)
</td>
</tr>
<tr>
<th>2022</th>
<td>
@(Html.DevExtreme().Sparkline()
.DataSource(Model.Where(i => i.Category == "Copper"))
.ArgumentField("Month")
.ValueField("Y2022")
.Type(SparklineType.WinLoss)
.ShowMinMax(true)
.WinlossThreshold(8000)
.Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
.ElementAttr("class", "sparkline")
)
</td>
<td>
@(Html.DevExtreme().Sparkline()
.DataSource(Model.Where(i => i.Category == "Nickel"))
.ArgumentField("Month")
.ValueField("Y2022")
.WinColor("#6babac")
.LossColor("#8076bb")
.WinlossThreshold(19000)
.Type(SparklineType.WinLoss)
.ShowMinMax(true)
.ShowFirstLast(false)
.Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
.ElementAttr("class", "sparkline")
)
</td>
<td>
@(Html.DevExtreme().Sparkline()
.DataSource(Model.Where(i => i.Category == "Palladium"))
.ArgumentField("Month")
.ValueField("Y2022")
.WinlossThreshold(2000)
.WinColor("#7e4452")
.LossColor("#ebdd8f")
.FirstLastColor("#e55253")
.Type(SparklineType.WinLoss)
.Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
.ElementAttr("class", "sparkline")
)
</td>
</tr>
<tr>
<th>2023</th>
<td>
@(Html.DevExtreme().Sparkline()
.DataSource(Model.Where(i => i.Category == "Copper"))
.ArgumentField("Month")
.ValueField("Y2023")
.Type(SparklineType.WinLoss)
.ShowMinMax(true)
.WinlossThreshold(8000)
.Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
.ElementAttr("class", "sparkline")
)
</td>
<td>
@(Html.DevExtreme().Sparkline()
.DataSource(Model.Where(i => i.Category == "Nickel"))
.ArgumentField("Month")
.ValueField("Y2023")
.WinColor("#6babac")
.LossColor("#8076bb")
.WinlossThreshold(19000)
.Type(SparklineType.WinLoss)
.ShowMinMax(true)
.ShowFirstLast(false)
.Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
.ElementAttr("class", "sparkline")
)
</td>
<td>
@(Html.DevExtreme().Sparkline()
.DataSource(Model.Where(i => i.Category == "Palladium"))
.ArgumentField("Month")
.ValueField("Y2023")
.WinlossThreshold(2000)
.WinColor("#7e4452")
.LossColor("#ebdd8f")
.FirstLastColor("#e55253")
.Type(SparklineType.WinLoss)
.Tooltip(t => t.Format(f => f.Type(Format.Currency).Precision(2)))
.ElementAttr("class", "sparkline")
)
</td>
</tr>
</table>
</div>
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 WinlossSparklines() {
return View(SampleData.MonthlyPrices);
}
}
}
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 double Y2021 { get; set; }
public double Y2022 { get; set; }
public double Y2023 { 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, Y2021 = 52.16, Y2022 = 89.16, Y2023 = 78.12 },
new MonthlyPrice { Category = "Oil", Month = 2, Y2021 = 61.55, Y2022 = 96.13, Y2023 = 76.83 },
new MonthlyPrice { Category = "Oil", Month = 3, Y2021 = 59.19, Y2022 = 100.53, Y2023 = 73.28 },
new MonthlyPrice { Category = "Oil", Month = 4, Y2021 = 63.50, Y2022 = 104.59, Y2023 = 79.45 },
new MonthlyPrice { Category = "Oil", Month = 5, Y2021 = 66.31, Y2022 = 114.38, Y2023 = 71.58 },
new MonthlyPrice { Category = "Oil", Month = 6, Y2021 = 73.52, Y2022 = 107.76, Y2023 = 70.25 },
new MonthlyPrice { Category = "Oil", Month = 7, Y2021 = 73.93, Y2022 = 101.31, Y2023 = 76.07 },
new MonthlyPrice { Category = "Oil", Month = 8, Y2021 = 68.43, Y2022 = 90.09, Y2023 = 81.39 },
new MonthlyPrice { Category = "Oil", Month = 9, Y2021 = 75.22, Y2022 = 79.91, Y2023 = 89.43 },
new MonthlyPrice { Category = "Oil", Month = 10, Y2021 = 83.50, Y2022 = 86.54, Y2023 = 85.64 },
new MonthlyPrice { Category = "Oil", Month = 11, Y2021 = 66.14, Y2022 = 80.48, Y2023 = 77.69 },
new MonthlyPrice { Category = "Oil", Month = 12, Y2021 = 75.33, Y2022 = 80.16, Y2023 = 71.90 },
new MonthlyPrice { Category = "Gold", Month = 1, Y2021 = 1866.98, Y2022 = 1816.51, Y2023 = 1894.75 },
new MonthlyPrice { Category = "Gold", Month = 2, Y2021 = 1808.17, Y2022 = 1856.30, Y2023 = 1858.74 },
new MonthlyPrice { Category = "Gold", Month = 3, Y2021 = 1718.23, Y2022 = 1947.83, Y2023 = 1912.12 },
new MonthlyPrice { Category = "Gold", Month = 4, Y2021 = 1760.27, Y2022 = 1933.88, Y2023 = 2000.13 },
new MonthlyPrice { Category = "Gold", Month = 5, Y2021 = 1850.26, Y2022 = 1848.33, Y2023 = 1992.05 },
new MonthlyPrice { Category = "Gold", Month = 6, Y2021 = 1834.57, Y2022 = 1836.57, Y2023 = 1942.92 },
new MonthlyPrice { Category = "Gold", Month = 7, Y2021 = 1807.84, Y2022 = 1738.41, Y2023 = 1951.01 },
new MonthlyPrice { Category = "Gold", Month = 8, Y2021 = 1784.28, Y2022 = 1764.56, Y2023 = 1918.41 },
new MonthlyPrice { Category = "Gold", Month = 9, Y2021 = 1777.27, Y2022 = 1680.78, Y2023 = 1915.65 },
new MonthlyPrice { Category = "Gold", Month = 10, Y2021 = 1776.85, Y2022 = 1664.15, Y2023 = 1916.14 },
new MonthlyPrice { Category = "Gold", Month = 11, Y2021 = 1820.23, Y2022 = 1725.06, Y2023 = 1984.45 },
new MonthlyPrice { Category = "Gold", Month = 12, Y2021 = 1790.43, Y2022 = 1796.87, Y2023 = 2027.01 },
new MonthlyPrice { Category = "Silver", Month = 1, Y2021 = 25.91, Y2022 = 23.13, Y2023 = 23.76 },
new MonthlyPrice { Category = "Silver", Month = 2, Y2021 = 27.35, Y2022 = 23.51, Y2023 = 21.90 },
new MonthlyPrice { Category = "Silver", Month = 3, Y2021 = 25.60, Y2022 = 25.17, Y2023 = 21.92 },
new MonthlyPrice { Category = "Silver", Month = 4, Y2021 = 25.63, Y2022 = 24.51, Y2023 = 24.98 },
new MonthlyPrice { Category = "Silver", Month = 5, Y2021 = 27.48, Y2022 = 21.90, Y2023 = 24.21 },
new MonthlyPrice { Category = "Silver", Month = 6, Y2021 = 26.98, Y2022 = 21.46, Y2023 = 23.34 },
new MonthlyPrice { Category = "Silver", Month = 7, Y2021 = 25.66, Y2022 = 19.07, Y2023 = 24.08 },
new MonthlyPrice { Category = "Silver", Month = 8, Y2021 = 24.01, Y2022 = 19.74, Y2023 = 23.55 },
new MonthlyPrice { Category = "Silver", Month = 9, Y2021 = 23.19, Y2022 = 18.91, Y2023 = 23.15 },
new MonthlyPrice { Category = "Silver", Month = 10, Y2021 = 23.36, Y2022 = 19.34, Y2023 = 22.25 },
new MonthlyPrice { Category = "Silver", Month = 11, Y2021 = 24.16, Y2022 = 21.03, Y2023 = 23.47 },
new MonthlyPrice { Category = "Silver", Month = 12, Y2021 = 22.47, Y2022 = 23.29, Y2023 = 24.03 },
new MonthlyPrice { Category = "Copper", Month = 1, Y2021 = 7970.50, Y2022 = 9775.93, Y2023 = 8999.79 },
new MonthlyPrice { Category = "Copper", Month = 2, Y2021 = 8460.25, Y2022 = 9941.35, Y2023 = 8955.20 },
new MonthlyPrice { Category = "Copper", Month = 3, Y2021 = 9004.98, Y2022 = 10237.59, Y2023 = 8835.72 },
new MonthlyPrice { Category = "Copper", Month = 4, Y2021 = 9335.55, Y2022 = 10183.13, Y2023 = 8814.00 },
new MonthlyPrice { Category = "Copper", Month = 5, Y2021 = 10183.97, Y2022 = 9362.81, Y2023 = 8234.28 },
new MonthlyPrice { Category = "Copper", Month = 6, Y2021 = 9612.43, Y2022 = 9033.13, Y2023 = 8386.23 },
new MonthlyPrice { Category = "Copper", Month = 7, Y2021 = 9433.59, Y2022 = 7529.79, Y2023 = 8445.26 },
new MonthlyPrice { Category = "Copper", Month = 8, Y2021 = 9357.19, Y2022 = 7960.98, Y2023 = 8351.77 },
new MonthlyPrice { Category = "Copper", Month = 9, Y2021 = 9324.07, Y2022 = 7734.70, Y2023 = 8270.86 },
new MonthlyPrice { Category = "Copper", Month = 10, Y2021 = 9778.50, Y2022 = 7621.21, Y2023 = 7939.66 },
new MonthlyPrice { Category = "Copper", Month = 11, Y2021 = 9765.48, Y2022 = 8029.95, Y2023 = 8173.95 },
new MonthlyPrice { Category = "Copper", Month = 12, Y2021 = 9550.31, Y2022 = 8367.23, Y2023 = 8394.11 },
new MonthlyPrice { Category = "Nickel", Month = 1, Y2021 = 17847.68, Y2022 = 22355.40, Y2023 = 28194.61 },
new MonthlyPrice { Category = "Nickel", Month = 2, Y2021 = 18595.30, Y2022 = 24015.55, Y2023 = 26727.95 },
new MonthlyPrice { Category = "Nickel", Month = 3, Y2021 = 16460.83, Y2022 = 33924.18, Y2023 = 23288.61 },
new MonthlyPrice { Category = "Nickel", Month = 4, Y2021 = 16480.91, Y2022 = 33132.74, Y2023 = 23894.56 },
new MonthlyPrice { Category = "Nickel", Month = 5, Y2021 = 17552.45, Y2022 = 28062.55, Y2023 = 21970.39 },
new MonthlyPrice { Category = "Nickel", Month = 6, Y2021 = 17942.32, Y2022 = 25658.63, Y2023 = 21233.28 },
new MonthlyPrice { Category = "Nickel", Month = 7, Y2021 = 18819.36, Y2022 = 21481.89, Y2023 = 21091.26 },
new MonthlyPrice { Category = "Nickel", Month = 8, Y2021 = 19160.23, Y2022 = 22057.39, Y2023 = 20438.65 },
new MonthlyPrice { Category = "Nickel", Month = 9, Y2021 = 19398.23, Y2022 = 22773.97, Y2023 = 19644.64 },
new MonthlyPrice { Category = "Nickel", Month = 10, Y2021 = 19420.52, Y2022 = 22032.89, Y2023 = 18281.23 },
new MonthlyPrice { Category = "Nickel", Month = 11, Y2021 = 19970.43, Y2022 = 25562.70, Y2023 = 17027.36 },
new MonthlyPrice { Category = "Nickel", Month = 12, Y2021 = 20015.55, Y2022 = 28946.81, Y2023 = 16460.84 },
new MonthlyPrice { Category = "Palladium", Month = 1, Y2021 = 2391.20, Y2022 = 2030.86, Y2023 = 1734.27 },
new MonthlyPrice { Category = "Palladium", Month = 2, Y2021 = 2342.33, Y2022 = 2350.10, Y2023 = 1543.90 },
new MonthlyPrice { Category = "Palladium", Month = 3, Y2021 = 2525.61, Y2022 = 2582.78, Y2023 = 1426.00 },
new MonthlyPrice { Category = "Palladium", Month = 4, Y2021 = 2776.45, Y2022 = 2330.67, Y2023 = 1508.00 },
new MonthlyPrice { Category = "Palladium", Month = 5, Y2021 = 2900.52, Y2022 = 2060.05, Y2023 = 1482.61 },
new MonthlyPrice { Category = "Palladium", Month = 6, Y2021 = 2752.48, Y2022 = 1913.05, Y2023 = 1348.09 },
new MonthlyPrice { Category = "Palladium", Month = 7, Y2021 = 2754.76, Y2022 = 1973.10, Y2023 = 1264.48 },
new MonthlyPrice { Category = "Palladium", Month = 8, Y2021 = 2544.73, Y2022 = 2135.52, Y2023 = 1247.30 },
new MonthlyPrice { Category = "Palladium", Month = 9, Y2021 = 2130.32, Y2022 = 2113.95, Y2023 = 1239.29 },
new MonthlyPrice { Category = "Palladium", Month = 10, Y2021 = 2058.48, Y2022 = 2078.86, Y2023 = 1142.09 },
new MonthlyPrice { Category = "Palladium", Month = 11, Y2021 = 2036.32, Y2022 = 1911.55, Y2023 = 1050.27 },
new MonthlyPrice { Category = "Palladium", Month = 12, Y2021 = 1810.52, Y2022 = 1808.36, Y2023 = 1087.76 }
};
}
}
#chart-demo {
height: 440px;
}
.demo-table {
width: 100%;
border: 1px solid #c2c2c2;
border-collapse: collapse;
}
.demo-table th,
.demo-table td {
text-align: center;
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;
}
.long-title h3 {
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
margin-top: 0px;
}