New to Kendo UI for jQuery? Start a free 30-day trial

Data

configuration

The data of the Sankey. The data object contains the Sankey nodes and links configuration.

data

Object

Default: (required)

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Node 1" } },
                { id: 2, label: { text: "Node 2" } },
                { id: 3, label: { text: "Node 3" } }
            ],
            links: [
                { sourceId: 1, targetId: 3, value: 2 },
                { sourceId: 2, targetId: 3, value: 1 }
            ]
        }
    });
</script>

The links of the Sankey. The links are the connections between the nodes. Each link has a sourceId and targetId that correspond to the id of the source and target nodes, and a value that represents the value of the link.

Default: (required)

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Source 1" } },
                { id: 2, label: { text: "Source 2" } },
                { id: 3, label: { text: "Target" } }
            ],
            links: [
                { sourceId: 1, targetId: 3, value: 50 },
                { sourceId: 2, targetId: 3, value: 30 }
            ]
        }
    });
</script>

data.nodes

Array

The nodes of the Sankey. The nodes are the elements that are connected by the links. Each node has an id that is used to connect the nodes with the links.

Default: (required)

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Input 1" }, color: "#ff6358" },
                { id: 2, label: { text: "Input 2" }, color: "#ffd246" },
                { id: 3, label: { text: "Process" }, color: "#78d237" },
                { id: 4, label: { text: "Output" }, color: "#28b4c8" }
            ],
            links: [
                { sourceId: 1, targetId: 3, value: 30 },
                { sourceId: 2, targetId: 3, value: 20 },
                { sourceId: 3, targetId: 4, value: 50 }
            ]
        }
    });
</script>

Data

data

data.links

data.nodes

Related Members