Your search did not match any results.
Charts

Winloss Sparklines

Documentation
This demo illustrates the sparklines of the win-loss type. In the winloss sparkline, values are represented by bars that either grow up or go down from an invisible line. This line is determined by a threshold value. If a data source value is greater than this threshold value, the bar grows up. Otherwise, it goes down.
@model IEnumerable<DevExtreme.NETCore.Demos.Models.MonthlyPrice> <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() .DataSource(Model.Where(i => i.Category == "Aluminium")) .ArgumentField("Month") .ValueField("Y2010") .Type(SparklineType.WinLoss) .ShowMinMax(true) .WinlossThreshold(2100) .Tooltip(t => t.Format(Format.Currency)) .ElementAttr("class", "sparkline") ) </td> <td> @(Html.DevExtreme().Sparkline() .DataSource(Model.Where(i => i.Category == "Nickel")) .ArgumentField("Month") .ValueField("Y2010") .WinColor("#6babac") .LossColor("#565077") .WinlossThreshold(19000) .Type(SparklineType.WinLoss) .ShowMinMax(true) .ShowFirstLast(false) .Tooltip(t => t.Format(Format.Currency)) .ElementAttr("class", "sparkline") ) </td> <td> @(Html.DevExtreme().Sparkline() .DataSource(Model.Where(i => i.Category == "Copper")) .ArgumentField("Month") .ValueField("Y2010") .WinlossThreshold(8000) .WinColor("#7e4452") .LossColor("#ebdd8f") .FirstLastColor("#e55253") .Type(SparklineType.WinLoss) .Tooltip(t => t.Format(Format.Currency)) .ElementAttr("class", "sparkline") ) </td> </tr> <tr> <th>2011</th> <td> @(Html.DevExtreme().Sparkline() .DataSource(Model.Where(i => i.Category == "Aluminium")) .ArgumentField("Month") .ValueField("Y2011") .Type(SparklineType.WinLoss) .ShowMinMax(true) .WinlossThreshold(2100) .Tooltip(t => t.Format(Format.Currency)) .ElementAttr("class", "sparkline") ) </td> <td> @(Html.DevExtreme().Sparkline() .DataSource(Model.Where(i => i.Category == "Nickel")) .ArgumentField("Month") .ValueField("Y2011") .WinColor("#6babac") .LossColor("#565077") .WinlossThreshold(19000) .Type(SparklineType.WinLoss) .ShowMinMax(true) .ShowFirstLast(false) .Tooltip(t => t.Format(Format.Currency)) .ElementAttr("class", "sparkline") ) </td> <td> @(Html.DevExtreme().Sparkline() .DataSource(Model.Where(i => i.Category == "Copper")) .ArgumentField("Month") .ValueField("Y2011") .WinlossThreshold(8000) .WinColor("#7e4452") .LossColor("#ebdd8f") .FirstLastColor("#e55253") .Type(SparklineType.WinLoss) .Tooltip(t => t.Format(Format.Currency)) .ElementAttr("class", "sparkline") ) </td> </tr> <tr> <th>2012</th> <td> @(Html.DevExtreme().Sparkline() .DataSource(Model.Where(i => i.Category == "Aluminium")) .ArgumentField("Month") .ValueField("Y2012") .Type(SparklineType.WinLoss) .ShowMinMax(true) .WinlossThreshold(2100) .Tooltip(t => t.Format(Format.Currency)) .ElementAttr("class", "sparkline") ) </td> <td> @(Html.DevExtreme().Sparkline() .DataSource(Model.Where(i => i.Category == "Nickel")) .ArgumentField("Month") .ValueField("Y2012") .WinColor("#6babac") .LossColor("#565077") .WinlossThreshold(19000) .Type(SparklineType.WinLoss) .ShowMinMax(true) .ShowFirstLast(false) .Tooltip(t => t.Format(Format.Currency)) .ElementAttr("class", "sparkline") ) </td> <td> @(Html.DevExtreme().Sparkline() .DataSource(Model.Where(i => i.Category == "Copper")) .ArgumentField("Month") .ValueField("Y2012") .WinlossThreshold(8000) .WinColor("#7e4452") .LossColor("#ebdd8f") .FirstLastColor("#e55253") .Type(SparklineType.WinLoss) .Tooltip(t => t.Format(Format.Currency)) .ElementAttr("class", "sparkline") ) </td> </tr> </table> </div>
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 WinlossSparklines() { return View(SampleData.MonthlyPrices); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.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.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<MonthlyPrice> MonthlyPrices = new List<MonthlyPrice> { 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; width: 100%; } .demo-table { margin-top: 80px; 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 #e5e5e5; } .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-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }