Your search did not match any results.
Sankey Chart

Sankey Chart

Documentation

The DevExtreme HTML5 JavaScript Sankey Chart is used to visualize the flow magnitude between value sets. The values are connected. A wider connection denotes a higher flow magnitude.

@(Html.DevExtreme().Sankey() .ID("sankey") .Title(t=>t.Text("Commodity Turnover in 2017")) .SourceField("Source") .TargetField("Target") .WeightField("Weight") .Node(n => n.Width(8) .Padding(30) ) .Link(l => l.ColorMode(SankeyColorMode.Gradient)) .Tooltip(t => t .Enabled(true) .CustomizeLinkTooltip( @<text> function(info) { return { html: "<b>From:</b> " + info.source + "<br/><b>To:</b> " + info.target + "<br/>" + "<b>Weight:</b> " + info.weight }; } </text>) ) .DataSource(new List<object> { new { Source = "Spain", Target = "United States of America", Weight = 2 }, new { Source = "Germany", Target = "United States of America", Weight = 8 }, new { Source = "France", Target = "United States of America", Weight = 4 }, new { Source = "Germany", Target = "Great Britain", Weight = 2 }, new { Source = "France", Target = "Great Britain", Weight = 4 }, new { Source = "United States of America", Target = "Australia", Weight = 6 }, new { Source = "United States of America", Target = "New Zealand", Weight = 5 }, new { Source = "United States of America", Target = "Japan", Weight = 3 }, new { Source = "Great Britain", Target = "New Zealand", Weight = 4 }, new { Source = "Great Britain", Target = "Japan", Weight = 1 }, }) )
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult SankeyChart() { return View(); } } }
#sankey { height: 440px; }