jQuery Sankey Diagram Data Binding

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main
Launch Theme Builder

Also available for:

#sankey{ margin: 0 auto; } $(document).ready(function () { const trafficData = [ { gender: "Female", device: "Tablet", age: "< 18", value: 4, }, { gender: "Female", device: "Tablet", age: "> 40", value: 8, }, { gender: "Female", device: "Mobile", age: "< 18", value: 4, }, { gender: "Female", device: "Mobile", age: "18-26", value: 24, }, { gender: "Female", device: "Mobile", age: "27-40", value: 10, }, { gender: "Female", device: "Mobile", age: "> 40", value: 2, }, { gender: "Female", device: "Desktop", age: "18-26", value: 11, }, { gender: "Female", device: "Desktop", age: "27-40", value: 28, }, { gender: "Female", device: "Desktop", age: "> 40", value: 9, }, { gender: "Male", device: "Mobile", age: "< 18", value: 4, }, { gender: "Male", device: "Mobile", age: "18-26", value: 11, }, { gender: "Male", device: "Mobile", age: "27-40", value: 28, }, { gender: "Male", device: "Mobile", age: "> 40", value: 9, }, { gender: "Male", device: "Desktop", age: "18-26", value: 11, }, { gender: "Male", device: "Desktop", age: "27-40", value: 28, }, { gender: "Male", device: "Desktop", age: "> 40", value: 9, }, ]; const dimensions = [ { value: (item) => item.gender, }, { value: (item) => item.device, }, { value: (item) => "Age " + item.age, }, ]; const measure = { value: (item) => item.value, }; const data = kendo.dataviz.createSankeyData(trafficData, dimensions, measure); const element = $("#sankey").css({ width: 900, height: 300 }).kendoSankey({ theme: 'sass', legend: { position: "bottom" }, style: { maxWidth: 700, height: 250, margin: "auto" }, links: { colorType: 'source' }, data: data }); });

Description

This demo demonstrates how one can transform data represented as an array to a SankeyData format. This is achieved using the createSankeyData function. It takes an array of data, dimensions, and measure as input parameters and returns an object that can be fed directly into the component. The dimensions refer to the Sankey nodes while the measure refers to the value that will be used to set the value of the links.

jQuery Sankey Diagram Data Binding

Description

Additional Resources